The Visual Builder Cloud Service Blog

Navigating Between Pages and Flows

John Jullion-Ceccarelli
Product Manager

Flows are a feature in Visual Builder that can provide encapsulation that is smaller that the whole app but bigger than a page. A visual builder app has one or more root pages that define the shell and navigation for your app. These root pages load one or more flows in the main content area, and each flow has a default entry page that gets displayed when it is loaded.

Flows do impose certain limitations on your app, and the most important one regards navigation. Currently the Visual Builder design time only allows you to navigate between pages inside a flow or back up to a root page. It does not allow you to navigate directly to a different flow, or to deep link to a page inside that flow. For example, if you have Customers in on flow, and Orders in another, and you want to link from a particular Order's page to the related Customer's page, you can't do it through the UI yet. 

For this reason, we recommend that you put all of the related pages that need to link to each other inside a flow. Unfortunately, sometimes you can't. For example the Mobile Application template requires you to have one flow for each navigation button. The navigation pattern recommended in the Learning Path also assumes each nav link goes to a separate flow. 

So let's take a look at how we can navigate from one flow to another using custom events:

  1. Download the sample for the Role-Based Security lesson, since it has the navigation bar already implemented. Import the app into VB and call it something like ExpenseReport_NavigateBetweenPages.
  2. Under the administration flow, create a new page called newpage. Add a paragraph tag to the page and change the text to "You made it!"
  3. Open main > main-start and add a hyperlink at the top of the page.
  4. Now we're ready to wire up the navigation. Open up root pages > shell. We're going to first create the action chain that does the navigation, then set up the custom event to fire the action chain. Go the Actions tab and create a new action chain called navigateToPage.
  5. Create two variables in the chain: a Boolean called navigate and a String called page. Mark them both as required.
  6. Drag an If action onto the chain and set the condition to $chain.variables.navigate.
  7. Drag a Navigate to Page action into the True path of the If condition. 
  8. Switch to the JSON view and enter the following for the 
                     "navigateToPage1": {
                         "module": "vb/action/builtin/navigateToPageAction",
                         "parameters": {
                             "history": "push",
                             "page": "[[ $chain.variables.page ]]"
  9. Go to Events tab and open the Custom Events tab. Create a new custom event called customNavEvent. Add a parameter named event of type Any.
  10. Go to the Event Listeners tab and click + Event Listener. Search for customNavEvent and select it. Then select the navigateToPage action chain.
  11. Under Event Listeners, select customNavEvent -> navigateToPage. In the Property Inspector, click to assign parameters. Map navigate to true and the event to page.
  12. Now go back to main-start, select the hyperlink, and in the Events tab of the Property Inspector, use the quickstart to generate an action for the the click event.
  13. Drag a Fire Custom Event action onto the chain. Set the name to customNavEvent (it doesn't appear in the drop-down, you have to type it manually) and set the payload to administration/administration-newpage.
  14. Run the app and click the hyperlink. administration/administration-newpage opens.

Passing a Parameter

But what about if the page we're navigating to has a mandatory input parameter? How do I pass that in when navigating via the custom event. Never fear - payload is an object so we can pass in anything we like. 

  1. Go to administration/administration-newpage and create a new variable called name. Mark it as a required input parameter that gets passed in the URL.
  2. Change the text in your Paragraph to {{ "You made it, " + $page.variables.name }}
  3. Go back to the main-start/HyperlinkClickChain editor and click the {}
  4. Change the fireCustomEvent1 action to:
          "actions": {
            "fireCustomEvent1": {
              "module": "vb/action/builtin/fireCustomEventAction",
              "parameters": {
                "name": "customNavEvent",
                "payload": {
                  "name": "john",
                  "page": "administration/administration-newpage"
  5. Go to the shell page and open the Actions tab. Open the navigateToPage action chain. Click the variables tab and enter a new variable called name. Mark it as a required input parameter in the Property Inspector.
  6. Switch to the code view by clicking the {} button in the Action Chain Editor. Change the navigateToPage1 action to the following:
            "navigateToPage1": {
              "module": "vb/action/builtin/navigateToPageAction",
              "parameters": {
                "history": "push",
                "page": "[[ $variables.page ]]",
                "params": {
                  "name": "{{ $variables.name }}"
  7. Go back to the shell page and open the Events tab. Select customNavAction > navigateToPage and in the Property Inspector click the Assign link for the Input Parameters.
  8. Map name to $event.name and page to $event.page. Again, mark each as an Expression, not Static content.
  9. Run the app again. When you navigate to the page, it should say "You made it john".


Join the discussion

Comments ( 3 )
  • Harsha Monday, March 16, 2020
    Hi John,

    Can you please upload the sample application to the repository again. The link in the blog does not contain the sample app. This will help me a lot.

    Thank you,
  • Suraj Kumar Tuesday, March 17, 2020
    Not able to download the code. Redirected to 404. Please provide the file and fix the link.
  • John Ceccarelli Tuesday, March 17, 2020
    Fixed the broken link.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.