The post describes how to add a substep in the main step of GAF application and navigating from main step to sub step and back to main step from substep.
In the link Simple GAF Application- Part 3 we have completed an initial screen, the main steps and the confirmation screen in GAF application. The application looks like:
Initial Screen.
Main Step 1.
Main Step 2.
Confirmation screen.
Now the task is to add a substep in the main step1. Go to the application configuration. Select the main step1 and add a substep .
So it first adds a substep variant and under that it adds a substep. we can add multiple substeps in a substep variant. Select the substep variant and note down the substep variant ID as this is required when we have to call the substep from the main step.
Select the substep and note down the substep ID. This is also required when we have to call the substep from the main step.
From the UIBB button add a form UIBB component . Delete the other option.
Create a configuration for the form UIBB.
Make ready the form feeder class and provide a form feeder class.
Design the form layout. Here just we have added a single element. Save and test the application.
Application Initial Page.
So here we are in the main step 1 and the step 1 contains an incoming arrow and an outgoing arrow means the main step1 contains sub step. Click the NEXT button.
Well it goes to the NEXT main step not the substep. Now the question arises how to go inside the main step 1 substep. So it can be done via a button click and navigating to the substep by raising correct event. So we need a button on the main step1.
Go to the toolbar schema.
Expand the Main Step 1. as we need a button here to enter inside to sub step.
Main Step having a Toobar. Expand and select the Toolbar option & add a toolbar element.
Chose button as Other Function.
Provide button text and an event. Save and test the application.
We are in main step 1 and the call substep button appears. Click Next button.
In the main step2, there is no button. So we have placed the call substep button at the correct place. Click Previous button.
If you click Call Substep button, nothing will happen as we have not coded to call the substep. Now the question is where to code to call the substep. It is good if we can handle the button event in the application controller class. As we don’t have any application controller class created, we can code in the feeder class of the main step 1 form uibb.
Main step display a form UIBB. Go to that feeder class PROCESS_EVENT method. Add the below code to raise an event CHANGE_STEP and provide main step ID, the substep variant ID as well as substep ID. So the framework under stands from where to navigate and wahts the destination.
Test the application . In the main step 1, click on the Call Substep button.
Well we are inside the substep 1 of the main step 1. 🙂 . Now as we don’t have only 1 substep, the previous and next buttons are inactive. Now the question is how to go back to the main step1 after completing the task inside the sub step 1. So we need a button in the substep 1 to exit to the main step1.
Change the substep 1 name . Go to the tollbar schema.
Expand the Substep variant->substep->toolbar under the main step 1. Add a toolbar element.
Select the button as Exit to Main Step button.
Save the changes and test the application.
In the main step, navigate to the sub step by pressing the button Call Substep.
So here we are in the sub step 1 of the main step 1 and to go back to the main step 1 we have a button Exit to main step.
So we are back to the main step1 and click next to go to the next main step 2.
Click finish button at end of the main step of the application.
And finally we have the confirmation screen. 🙂 .
One comment