GeneXus For SAP Systems Wizard Floorplan

Official Content

The Wizard Floorplan is a useful page that allows you to create an easy way to get the user to complete a long or difficult task.
You have 4 kinds of wizards to choose from. They have a different appearance, but their functionality is the same.

The 4 kinds are:

Number

WizardNumber_png

Icon

WizardIcon_png

Label Number

WizardLabelNumber_png

Label Icon

WizardLabelIcon_png

You can see this sample running here. It has been created using this Knowledge Base (KB).

Note: The design guideline of this floorplan is at SAP's documentation.

The wizard is divided into steps. Each step focuses on a single part of the task (insert information, select, add,…).
The wizard is a Web Panel, and the steps are Web Panels that behave as Web Components of the wizard.
By default, the wizard comes step-empty.

 

How to apply it

Look at the Patterns tab of the shown Web Panel. If you have never applied the Fiori for Web pattern in your Knowledge Base yet, read here. Otherwise, being positioned on the Fiori for Web Pattern tab, check the Apply this pattern on save checkbox and select the offered link to choose a floorplan:

WizardApplyPatternonsave_png

Then, select the Wizard option from the list given by GeneXus:

WizardSelectFloorplan_png

This floorplan can be applied only to a Web Panel object.

 

Steps

This section explains how to work with the steps.

First of all, you need to know how to add a step to the Wizard. To do that you have to right-click the Steps node (it has a folder icon) and select in the contextual menu Add / Step:

  AddStepWizard_png

There are 6 different kinds of steps:

  1. Welcome Step
  2. Data Step
  3. Select Grid Items Step
  4. Add Grid Items Step
  5. Summary Step
  6. Completed Step

These steps are detailed below on this page.

When you create a step by default their Code and Title Properties are empty. You have to set them in order to compile:

  CodeandTitleProperty_png

To delete a step you have to while being positioned on the Wizard Floorplan tab, right-click the step and select from the contextual menu the Delete option.

 

1. Welcome Step

WizardWelcomeWebView_png

The purpose of the Welcome step is to introduce the users to the wizard and give some information about what they will do in the steps that follow.

To modify the information shown in this step, first, you have to select the Welcome tab:

WelcomeStepTab_png

Then, you have to modify the Caption property in order to show the text you decide.

ExplanationCaptionWelcomeStep_png

Also, you can add actions (it is not the meaning of the step) by right-clicking the node of the area in which you want the action to be in, and then, by selecting from the contextual menu Add / UserAction.

 

2. Data Step

WizardDataStepWebView_png

The purpose of the Data step is to allow the users enter information.

By default, the step is offered empty. To add variables you have to right-click the TableAttributes node and then select Add / Variable (if you want to use new variables) or Add / VariablesBasedOn (to use variables based on attributes definitions).

AddAttrOrVariableWizardDataStep_png

To delete variables, you have to right-click the variable and select Delete from the contextual menu.

DeleteAttrOrVariableWizardStepData_png

You can add actions. In order to do it you have to right-click the node of the area in which you want to add it, and then select Add / UserAction.

AddUserActionWizardDataStep_png

 

3. Select Grid Items Step

SelectGridItemsWebView_png

The objective of the Select Grid Items step is to allow the users to select items from a list.

By default, the grid that will contain the list is empty. To choose which items you want to show you have to right-click the GridGrid node and select Add / Grid Attribute from the contextual menu.

AddGridAttrWizardSelectGridItemsStep_20184279513_1_png

Then, you only have to select the attributes you want to add:

SelectGridAttrWizardSelectGridItemsStep_png

You also can add actions. In order to do it you have to right-click the node of the area in which you want to add it, and select from the contextual menu Add / UserAction.

AddUserActionWizardSelectGridItemsStep_png

 

4. Add Grid Items Step

AddGriditemsWebView_png

The objective of the Add Grid Items step is to allow the users to insert or delete items from a list.

By default, the grid that will contain the list is empty and the buttons are unprogrammed. To choose which items you want to show you have to right-click the GridGrid node and select Add / Grid Attribute.

WizardAddGridAttrWizardAddGridItemsStep_png

Then, you only have to select the attributes you want to add:

SelectGridAttrWizardAddGridItemsStep_png

You also can add actions. In order to do it you have to right-click the node of the area in which you want to add it, and select from the contextual menu Add / UserAction.

AddUserActionWizardAddGridItemsStep_png

 

5. Summary Step

SummaryStepWebView_png

The objective of the Summary step is to give the users a summary of the wizard.

To modify which summaries you want to show you can right-click the Summary tab and select Open WizardYourSummaryName:

OpenSummaryStepWebPanel_png

Once there, go to the Events Section:

GoToEventsSectionSummaryWebPanelWizard_png

Then, go to the Start event and after that, set the visible property of YourStepName_SummaryTable in false:

EventStartSummaryStepWizard_png

 

6. Completed Step

CompletedStepWebView_png

The completed step functionality is to give the user a closure of the wizard. Here is where you will handle the information stored on the Web Session.

By default the OK button comes with no functionality besides the automatically generated by GeneXus, so to program what do you want the wizard to do when finished you have to:

Open the Completed Web Panel.

GoToCompletedStepWebPanel_201842714620_1_png

Go to the Events section.

CompletedStepEventsSection_201842714631_1_png

Once there, on the finish wizard event, program what do you want it to do.

CompletedStepFinishWizardSubroutine_201842714638_1_png

Also, you can add actions (it is not the meaning of the step) by right-clicking the node of the area you want the action to be in, and select from the contextual menu Add / UserAction.

 

How to work with the wizard

You may be wondering how to use the data collected from the wizard. In order to use the data you can do it from the last step's web panel (if you want to work with all the data at once) or from a particular step's web panel (if you want to work ASAP with the data of the step (Example: save a Country to appear on the list of the next steps)). 

If you want to work with all the data at once, you have to open your last step's web panel, in this example is the Completed Step

GoToCompletedStepWebPanel_png

Once there go to the events section

CompletedStepEventsSection_png

And on the Events Section, you can manage the data from the Finish Wizard Subroutine.

CompletedStepFinishWizardSubroutine_png

If you want to work with the data step by step you can do it opening the step's web panel, in this example, the data step will be used

GoToWizardDataStepWebPanel_png

once there go to the Events section

DataStepEventsSection_png

And there you can manage the data from the Enter event in most of the steps.(Remember to code outside the code generated automatically by GeneXus to prevent it from being overwritten)

DataStepEventEnter_png

On the case of the Select Grid, items step you can manage the data from the LoadGridSelectedRows Subroutine immediately after the code generated by GeneXus

LoadGridSelectedRowsWizardSelectGridItemsStep_png

See Also

 

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.