Skip to main content

Add a header to a page and create a menu

You can add a header to the top of your page to represent a page's content. For example, a profile page may have a header containing a photograph and job information about a person and a sub-menu to link to related content. See our knowledge base article, About page headers.

Prerequisite

Procedure

You can only add a page to one menu.

  1. At the top of your page, if you want to add your page to a new menu, select ADD HEADER.
    Add_header.png
  2. In the Add page header dialog box, from the Menu list, either select Create a new menu or an existing menu.
  3. If you selected to create a new menu, in the Name of New Menu box, type in the name of your menu item so that you know what this is. This name is not shown to users. It's only for your reference. You can't change this once you have saved your settings.
  4. In the Label box, type the label for your page in the menu.
  5. From the Icon list, choose an icon representing your menu item and the color for your icon.
  6. Optionally, from the Restrict devices list, select which devices to hide this menu on.
  7. Under the Page header section, from the Model name list, select the model to which this page relates.

    If you have not set up access control for any users on your model, you can't view this page. See our knowledge base article, Configure your model's access control policies.

  8. From the Header options, choose to either Create a new header or Choose from an existing one:
    • Create a new header
      1. In the Header name box, type in a meaningful name for your header.
      2. Under the Text section, from the Title list and the Subtitle list, select a property.
      3. Under the Avatar section, from the Style options, choose if you want to display the avatar or an image:
        • Avatar / Image
          1. From the Image property list, select the model's property to use as the avatar. You might have multiple ones defined in your model. You can only choose one.
          2. From the Placeholder text list, select the model's property to use when there is no image to display.
          3. If you want a little colored circle in the bottom left of the avatar to indicate a person's availability, select the Use a badge option. To use this option, you must set up the Badge color property in your model.
        • Icon
          1. From the Icon property list, select the model's property to use as the icon. You might have multiple ones defined in your model. You can only choose one.
          2. From the Icon color property list, select the model's property to use for the.
          3. If you want a little colored circle in the bottom left of the icon to indicate a person's availability, select the Use a badge option. To use this option, you must set up the Badge color property in your model.
      4. Under the Actions section, add any action buttons you want to include. For example, you can create multiple buttons within your header that can redirect to another page, either internally or externally.
        1. Title
        2. Type of action
        3. Target
        4. Icon
      5. Under the Chips section, if you want to add colored tags that sit within your item to illustrate an action. For example, a chip on leave requests to indicate "Paid" or "Unpaid" leave. It's good practice to use chips to highlight exceptions rather than norms, so you would use only the "Unpaid" chip because, usually, leave would be paid leave.
        1. From the Property list, select the model's property to use.
        2. From the Condition options, select either is true or is false.
        3. In the Text box, type in what you want to appear on the chip.
        4. Choose the Color of your chip.
        5. From the Icon list, choose the one that you want to use.
    • Choose an existing header
      • From the Header to use list, select the header you want to use.
  9. When you're happy with your settings, select SAVE.

See more:

Reference:

Sections in this article