X

The Visual Builder Cloud Service Blog

Navigating Between Pages and Flows

John 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 admin 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 create a custom event on the shell page that will call the navigateToPage action and pass in the required parameters. Then we'll set up the hyperlink on main-start to fire this event and pass in the page it wants to navigate to. Click the Events tab and click + Event Listener. Click the + sign next to Other Events and name your event customNavEvent. Then click Select.
  5. Select navigateToPage action chain and click Finish.
  6. In the list of events, select customNavEvent > navigateToPage. In the Property Inspector, click Assign above Input Parameters.
  7. Set navigate to true and page to $event. Make sure both are set as Expression and not Static Text. Click Save.
  8. 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.
  9. Drag a Fire Custom Event action onto the chain. Set the name to customNavEvent and set the payload to admin/admin-newpage.
  10. Run the app and click the hyperlink. admin/admin-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 admin/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": "admin/admin-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".

 

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha
Oracle

Integrated Cloud Applications & Platform Services