In this post, we will see how to navigate to Flow (Page) from Fragments.

When we create fragments and want to navigate to flow, there is no action available for navigation.

We need to follow the steps below to navigate to Page/Flow from fragments.

Step1: Create Sample VBCS Application.

Navigate to Web Application.

Click on Web Application.

Provide Web application name and click on Create.

This will create VBCS Web application as shown below.

Let us create three different flows as shown below:

1. 
   Employee
   
2. 
   Supplier
   
3. 
   Customer.
   

Each flow will be created with default page.

Let us create Highlight Text for each page.

Step2: Modify Fragments

Navigate to Fragments —->Shell Footer —> Code

Remove all existing code.

Drag and Drop Tab Bar Layout to footer.

Add tabs for Employee, Supplier, Customer.

Let us create one variable to store current selected Tab as shown below:

Let us assign this variable to Tab Bar data.

This will create Tab Bar region as shown below:

Step3: Create Event for Tab Bar as shown below.

Let us add Fire Notification for action chain to verify and display selected Tab element.

Let us run the application and click on each Tab.

Now if we try to use “Navigate to page” action inside this action chain, it is not available as shown below.

Hence, we cannot navigate to Page from fragments directly.

Step4: Create Custom Event for fragment.

Navigate to Fragments —>Shell-footer —>Events —>Custom Event.

Provide ID and enable “Emit event to container” check box.

Click on Create.

Let us add payload to this custom event to pass selected tab ID.

Click on Create.

Navigate to shell-footer —>Fragment Designer —>Tab Bar —->Events —->Action chain

Drag and drop Fire Event —>select custom event which we have created earlier.

Pass payload input to current selected Tab value as shown below.

Click on save.

Step5: Create Event from Shell Page.

Let us create Event as shown below from shell footer page (this is containing page for that fragment).

Select custom event which we have created.

Here we can use Navigate to Flow action as shown below.

Let us run the application now.

When we click on Employee tab, it will navigate to Employee Page.

When we click on Supplier tab, it will navigate to Supplier Page.

When we click on Customer tab, it will navigate to Customer Page.