Page tree

The add task window now is converted into a wizard. With this feature you are able
to add wizard cards to the window depending on your needs.
The wizard window contains 3 groups of cards. Each new card must to belong to one of those groups.
The groups are:

  • cards before the 'Add Task' window
  • cards on 'Add Task' window
  • cards after The task import is finished


The card need to be of type Ext.panel.Panel, and need to extend the card wizard interface 'Editor.controller.admin.IWizardCard'.
Use the "insertCard" function from TaskAddWindow to insert cards in card groups. The insert function accepts two parameters:

  • card -  extjs panel component
  • group - target group where the card will exist. Available options: "preimport", "import" and "postimport".              

Card wizard interface: IWizardCard

For each component the card type and card position can be defined using the following parameters:

  • importType : available options are "preimport", "import" and "postimport". Defines where the component will appear.
  • groupIndex: integer type. Defines the card index in the group.(ex. groupIndex:0, this card will appear first in the defined group)


This interface provide us with couple of functions needed for manipulation with the buttons visibility and functionality.

In the interface there are two types of functions:

  • functions wich handle the button clicks (Button handler type)
  • functions wich hides and shows the card components (Component handler type)

 

Button handler type:

 

triggerNextCard


This function is called each time when the next button on the wizard window is clicked.
The purpose of this function is to to set/switch the next active card in wizard window, if there is one.
Switching the card is done with firing the specific event, who is handled by the wizard window controller (TaskOverview.js).
Using events for switching the cards, makes the validations of the card components more flexible.
Posible steps before the card is changed:

    • handle all dependencies needed for switching the card
    • fire the event for switching the card
    • the next card is displayed

 

triggerSkipCard


This function is called each time when the skip button on the wizard window is clicked.
This button exist only if after the current active card there are another card from different card group.
A card group is set of cards in one wizard window group (ex. globalese group of cards).
Skipping the card is done with firing the specific event, this event also is handled by the wizard window controller (TaskOverveiw.js).
When group of cards is skipped, the validation logic of all cards also is skipped.

 

Component handler type:

For each button in the wizard card there is one function from this type. Only the functions in the active card are called.
The call of those function is processed by TaskAddWindowViewModel formulas, whenever the activeItem in the view model is changed (each time when the card is set to active).
If new button should be added, a viewmodel formula for this function also is needed.

 

Card events


Changing the active card, however skipping a group of cards are posible with events fired from the active cards.

Currently existing events:

  • wizardCardFinished - fired when the card validations is finished, and next card is requested
  • wizardCardSkipped - fired when the group of cards should be skipped

All of those card events are handled in the TaskOverview controller.

Here is the code which handles the events fired from the visible(active) card.

'adminTaskAddWindow panel:not([hidden])': {
	wizardCardFinished:me.onWizardCardFinished,
	wizardCardSkiped:me.onWizardCardSkiped
}
  • No labels