Create an App Navigation Bar

To create consistently branded apps, use a navigation bar that persists from page to page.

You do this by creating a master page and child pages. Add a Navigation component to the header portion of the master page to redirect end users to different pages. Then, create those pages in the app as child pages to that master.

For the marketing app described in the Nintex Apps topic, the navigation bar might look like this:

../_images/image_2.png

Using the Go to URL action

Each of the navigation bar items uses the Go to URL action to redirect to a specific route. To direct end users to a specific app and page, just enter the base and page URLs in the Go to URL action. A button redirecting users to the calendar page within the marketing app would use /marketing/calendar as its redirect URL.

Note:  Begin the redirect URL with a backslash (/), otherwise the value will be appended to the page URL as a whole. For example, a redirect URL of marketing/calendar from a marketing dashboard located at https://www.example.nintex.app/marketing sends users to https://www.example.nintex.app/marketing/marketing/calendar . (One too many instances of /marketing !)

Once you set the redirect URL, Nintex Apps adds it to the end of Nintex Apps tenant's domain URL (such as https:///www.example.nintex.app/ ), sending users to the appropriate location at https:///www.example.nintex.app/marketing/calendar .

Absolute URLs

It's also possible to use absolute URLs, with the full domain path included.

For example, using https:///www.example.nintex.app/marketing/calendar as the redirect URL works just as well. However, if these app pages are used across multiple Nintex Apps tenants, their redirect URLs will only work in www.example.nintex.app ; they will not work in the other tenants, because the absolute URL references only the www.example.nintex.app domain.

Be sure to structure your navigation with this in mind.

So, want to see all this in action? Let's build a small app and navigation bar.

Assumptions

Note: 

This tutorial guides you through the creation of a 4-page app to see how app navigation works. The app consists of the following pages:

  • dashboard—a marketing dashboard (the home page)
  • calendar—the calendar of marketing events and deadlines
  • swag—a list orders for marketing products
  • data—collections of collateral and customer data

Though while the tutorial directs you in creating the necessary pages, you are free to determine what models and components to put in them. The focus of this example is app navigation.

First, create the master page containing the navigation.

  1. In the Nintex Apps navigation bar, click Pages.

  2. In the Pages list, click Create and configure the new page:

    • Name: Give the page a logical name, and indicate that it is a master page. (For example, marketing_master .)
    • Page API version: Select the API version.

  3. Click Create.

  4. In the newly opened page's Properties pane, edit

    • In the Basic tab, check Available as a Master Page.
    • In the Layout tab, check Show Custom Header. A header space appears on the page canvas.

  5. Drag and drop the Navigation component into the header area at the top of the canvas.

  6. Drag and drop a Page Region into the bottom of the canvas, below the navigation.

  7. Click Save and Preview.

Nothing much to see here ... Time to build the actual app!

  1. In the Nintex Apps navigation bar, click Apps.

  2. In the Apps list, click Create and configure the new app:

    • Name: Give the app a logical name, in this case, marketing .

  3. Nintex Apps generates the app's base URL slug: /marketing .

  4. Click Create.

After this, create several child pages based on this master page, one each for the Dashboard, Event Calendar, Product Ordering, and Customer Data pages.

Note:  Nintex Apps designates the first page you create as the Home page for the app, so start with the Dashboard.

  1. In the Nintex Apps navigation bar, click Apps.

  2. Click the app you just created, or click Details from the app's kabob menu.

  3. Click Create New Page and configure:

    • Name: Give the page a logical name, in this case, dashboard
    • Apply master page: Check this. Select the correct master page ( marketing_master ) from the dropdown.
    • Page API version: Select the API version.

    Important:  Be sure to use the same API version as you used for the master page.

  4. Nintex Apps generates the app's Home page URL: https://example.nintex.app/marketing .

  5. Click Create.

Complete the page by creating models and adding components to the page's Page Region.

  1. Click Save.

Now navigate back to the Apps list from the Nintex Apps navigation bar. It's time to create the remaining three pages, using the following names and Page URL slugs:

  • calendar—the calendar of marketing events and deadlines (slug: /calendar )
  • swag—orders for marketing products (slug: /swag )
  • data—collateral and customer data (slug: /data )

  1. Click Create Page.

    • Name: Give the page a logical name.

    • Apply master page: Check this. Select the correct master page ( marketing_master ) from the dropdown.

    • Page API version: Select the API version.

      Important:  Be sure to use the same API version as you used for the master page.

  2. Nintex Apps generates the Page URL slug using the name. For the Calendar page, it's https://example.nintex.app/marketing/calendar .

Note:  If desired, you can modify the Page URL slug text at this point.

  1. Click Create.
  2. Add models and components to each page. (Add the components to the Page Region.)
  3. Click Save.

Note:  If you preview any of these pages, they will have the content you add plus an empty navigation bar.

Remember:

  • The app has a base URL; in this case it is /marketing .* This is also the URL of the application's Home page.*
  • Each page has a Page URL slug, such as /calendar , This is appended to that Base URL to become the "address" of the page: /marketing/calendar .

In the master page, edit the navigation bar. Start by creating a navigation item that points back to the route's base URL:

  1. On the Navigation bar, click the first Navigation item to set it's properties in the Basic tab:

    • Label: Home
    • Icon: Add an appropriate icon, if desired.

  2. Click the Actions tab.

  3. Click the Go to URL action and configure to point to the Base URL for the app (which is also the Page URL slug for the app's home page ).

    • Action Type: Go to URL:
    • URL: /marketing

    Note:  This is the app's Base URL.

    • Open URL in: Current window

  4. Click Save and Preview.

Assuming you set a marketing app with a base URL of /marketing, the Home navigation item should open the correct Nintex Apps page: the marketing dashboard.

Next, create the navigation items that point to the rest of the app's routes.

  1. Add three additional navigation items with the following labels:

    • Label: Calendar
    • Label: Product Orders
    • Label: Customer Data

Add icons if desired.

  1. Click the Calendar navigation item, and select its Actions tab.

    • Click the Go to URL action and configure to point to the Page URL slug for the dashboard.

      • Action Type: Go to URL:
      • URL: /marketing/calendar
Note: 

This is the page's specific Page URL slug. It provides directions to the app (/marketing) as well as to the page within the app assigned to that Page URL (/calendar).

  • Open URL in: Current window

  1. Click the Product Orders navigation item, and select its Actions tab.

    • Click the Go to URL action and configure to point to the Page URL slug for the dashboard.

      • Action Type: Go to URL:
      • URL: /marketing/swag
      • Open URL in: Current window

  2. Click the Customer Data navigation item, and select its Actions tab.

    • Click the Go to URL action and configure to point to the Page URL slug for the dashboard.

      • Action Type: Go to URL:
      • URL: /marketing/data
      • Open URL in: Current window

  3. Click Save.

The Result

From the Apps page, click into the app and select apps home page (the Dashboard). Click Preview. Using the navigation bar, navigate among the four pages of the app.

Because of this master page's navigation header, each page within the app has a functional navigation bar which points to every other page—ensuring end users always have a way to maneuver through the app.