Add a Page to the Navigation Menu

White Label Data makes it easy to add pages to the left-hand navigation. This allows users to move between pages and see different visualizations on each page. Navigation is configured in the appconfig.json under app_page_sets as a collection of pages and categories. For configuring multiple page sets, see Personas.

Let’s say we wanted to add two pages to the navigation. One is called “Sightings” and the other is called “State Info”. Each page is associated with an HTML source file, which must also be specified. Each page must also have a name that is used as part of the URL. To make the navigation more interesting, we will add multiple categories that organize groups of pages (although in this example we have only one page per category). The resulting JSON would look like this:

"app_page_sets": [
        {
            "app_page_set_name": "default",
            "app_categories" : [
                {
                    "category_name" : "Sightings",
                    "icon_classes" : "icon fas fa-shoe-prints"
                },
                {
                    "category_name" : "State Info",
                    "icon_classes" : "icon fas fa-map-marker-alt"
                }
            ],
            "app_pages": [
                {
                    "page_type": "html",
                    "nav_category" : "Sightings",
                    "page_name": "overview",
                    "page_title": "Overview",
                    "page_src" : "overview.html"
                },
                {
                    "page_type": "html",
                    "nav_category" : "State Info",
                    "page_name": "bystate",
                    "page_title": "By State",
                    "page_src" : "bystate.html"
                }
            ]
	}
]

This would create the following menus your White Label Data application:

Here are the main navigation options:

Option Req’d Example Description
app_page_set_name Y “default” The name of the page set. If using the name “default”, the user profile is not required to be configured with a persona and will default to this page set. If using a different name, the page set must be configured in the Auth0 app_metadata using the app_name setting. Read more about Personas and configuring Auth0 metadata here.
app_pages Y Array of pages A JSON-formatted array of pages with properties specified below.
app_categories N Array of categories A JSON-formatted array of categories with properties specified below. A category is a grouping of pages in the navigation. Each category can have a different icon.

Each page in app_pages has the following options:

Option Req’d Example Description
page_type Y "html" Specifies that this is an HTML page.
nav_category” N "Sightings" The name of the category under which to place the page. Must match a category_name specified in the app_categories list.
page_name Y "overview" This is the name that will be used to form the URL for the page. For example overview becomes https://myapp.com/overview
page_title Y "Overview" The title of the page that appears at the top of the browser window and also available as {{ page_title }} in your HTML files
page_src Y "overview.html" The name of the HTML source file for the page located in the /pages folder of your repository.

Each category in app_categories has the following options:

Option Req’d Example Description
category_name Y "Sightings" Specifies the name of the category that appears in the navigation menu. This name is also referenced as the nav_category in the page config.
icon_classes N "icon fas fa-show-prints" A list of CSS classes separated by spaces that indicate which classes are used for the icon associated with the category. These classes can be in your custom CSS file or refer to icon classes from Ionicon or Font Awesome, for example.

Note: In the above example, we are using Font Awesome classes to configure which icons are displayed for a category.