Note: Nintex Apps data centers are located in West US and Australia (AUS). In-region processing of Nintex Apps data is only available in these regions.

Header

The Header component displays a title or subtitle, allowing you to provide context for the page, or for individual sections on the page. You can also add buttons that use the Action Framework to the header.

Note:  While it's possible to create buttons using the Header component, for maximum flexibility, Nintex recommends using Ink's Button Set component.

Using the Header Component

Note:  The content below assumes you have a Nintex Apps page and at least one working model.

To use the Header component, add a one to the page. Next, set properties:

  • Set Title and Subtitle properties by adding a specific string of text, by using the field picker to select and add merge variables for specific fields, or via a combination of the two. You may also leave either of these properties blank.

Note:  To ensure the desired field is available for Titles and Subtitles, include that field in the model.

  • In the Header properties pane, decide whether you want a border separating the header from the next component, and adjust the component margins in the Styles tab.

Note:  By default, margins are set to None, so title content will sit immediately adjacent to the left margin. Adjust this in the Styles tab, using the Left margin property.

  • If desired, add buttons to trigger actions on the model.

Note:  Nintex recommends using Ink's Button Set component.

Nintex Apps for Salesforce

Important:  You can add a custom Salesforce button type to the Button Set component. However, if you deploy a Nintex Apps page with that Button Set within the Salesforce Support Service Cloud, unexpected functionality may result.

Properties

Component properties

  • Model: The model the Header is connected to, providing fields and context to any merge variables used in the Title and Subtitle properties.

  • Allow HTML: Determines HTML rendering behavior for Title and Subtitle contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:

    Enabled:

    This text is important

    Disabled:

    <strong>This text is important</strong>

  • Title: The text to be displayed as a top-level heading within the component. This property can be a specific string of text, the merge variables of one or more fields chosen with the field picker, or a combination of the two. Can also contain rendered HTML if Allow HTML is enabled.

  • Subtitle: The text to be displayed as a second-level heading above the title. This property can be a specific string of text, the merge variables of one or more fields chosen with the field picker, or a combination of the two. Can also contain rendered HTML if Allow HTML is enabled.
  • Add border separator: Adds a thin rule at the bottom of the component to visually separate it from the component that follows.
  • Heading level: Indicates the hierarchical position for this Header component relative to others on the page, with 1 being the highest level. In effect, this wraps the Header's title in HTML tags. Heading Level 1 = <h1> tags; Heading Level 2 = <h2> tags, and so on. This helps assistive technologies correctly navigate the page using the Header components as outline levels.

Note:  Changing this property does not change the visual appearance of the component. Visual styles are set in the Design System.

  • Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Global styles for this component are set in the Design System Studio. The following style properties can be adjusted within an individual page.

  • Style variant: The font sizing for Titles and Subtitles is set in the theme using the Design System Studio. To adjust sizes in a specific instance, use the Style Variant. Options are:

    • Default
    • Small
    • Medium
    • Large
    • Extra Large
    • Huge
    • Gigantic

    Note:  These sizes are relative to the baseline determined by the Design System settings.

  • Margin: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click border-all All.
    • To set margins for each side individually, click border-separate Separate.

    Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Standard display logic options are available to display or hide the component or feature.

Nested elements

When you add buttons to the Header component, these buttons have their own properties. All Header button properties are the same as those for Ink Button Set buttons.