Table of Contents

Using a header bar

This tutorial explains how you can add a header bar to your pages and panels.

The content and screenshots for this tutorial were created in DataMiner version 10.3.11.

Expected duration: 5 minutes

Tip

See also: Kata #7: Pages, panels and headers in a low-code app on DataMiner Dojo Video

Overview

Step 1: Add a page header bar

  1. Make sure you are editing the app.

  2. In the gray side panel on the left, next to Header bar, toggle the switch to the right.

    This will add a header bar to your page.

    Enable a header bar

Step 2: Create a header button

  1. Click the "+" icon on the right side of the header bar.

    This will add a header bar button on the right. There is also a "+" icon on the left, which can be used to add a button on the left.

    Header bar button

  2. Click the button you have added.

    This will activate additional configuration options in the gray side panel, within the "Header bar" section.

    Header bar button config

    1. Give the button a suitable icon.

      You can search for "Dashboard" to find applicable icons for a "Metrics" panel.

    2. Configure the button to open a side panel, similar to the way this was done in Creating and showing a panel.

  3. Publish the app and check if clicking the button in the header bar opens the panel.

Step 3: (Optional) Create a panel header bar

  1. Follow the same steps as outlined in the previous instructions to add a header bar to the "Metrics" panel.

    • Include a button on the right side of the panel header bar.

    • Use a "Close" icon for the button.

    • Do not specify a name for the button.

    Header bar close button

  2. Configure the Close a panel action, so that the panel closes when a user clicks the header bar button.

    Close a panel action

  3. Publish the app and check if clicking the new button in the panel header closes the panel.

Next tutorial

Now that you know how to create navigational controls, take a look at how you can execute actions:

Learning paths

This tutorial is part of the following learning path:

Propose changes