Side Navigation Menu

You can set any view in your UI model as side navigation menu of your app. The view that is set as home page cannot be set as side navigation menu.

Perform the following steps:

  1. Open the project and navigate to the UI Model in which you want to set the side navigation menu.
  2. Expand the Pages and select a View that you want to set as a side navigation menu.
  3. Click the context menu and click Side Nav. The view is converted into side navigation menu.
  4. Specify the following details:
    • SideNav Name: Enter a name for the view.
    • Routing URL: Enter an identifier for the current view. For example, Login Page or Home Page or Dashboard.
    • Id: Specifies the unique ID of the side navigation menu.
    • Is Open? (Reference): The reference variable to open the side navigation menu when the user operates the UI control that has the specified reference variable.
    • Mode: Specifies how the side navigation menu should function when displayed. The following options are available:

      • Flat on the Side: Select this mode to display the side navigation menu always open.

      • Slide Over the Page: Select this mode to display the side navigation menu only when the user clicks the toggle bar and slide over the page covering the content.

      • Push Over the Page: Select this mode to display the side navigation menu only when the user clicks the toggle bar and slide over the page moving the content to the right side of the side navigation menu.

    • Close on Escape: Select Yes, to allow the side navigation menu to close when the user clicks outside the side navigation menu on the view. Select No, to allow the side navigation menu to close only when the user clicks the toggle bar.
    • Width: Enter a value to specify the width of the side navigation menu when displayed. You can specify the width in percentile (%) or pixels (px). The default value is 30%.
  5. Add all the required UI elements and apply the settings as applicable. See UI Control and Settings for the list of UI elements that you can add in a view. You can add a script task with routing task to each UI element that you add to the side navigation menu to navigate the user to the view configured in the routing task. To create script model to UI element, see Script Model.
  6. Apply the styles to specify how the side navigation menu should look. See UI Controls Styles to learn about how to apply styles to views and UI elements.
  7. Click Save to update the UI model (.vm file).

    8. You have successfully set the view as side navigation menu of your app.