Simple Header Template

On This Page

Function

a!headerTemplateSimple( title, secondaryText, titleColor, secondaryTextColor, stampIcon, stampColor )

A title bar template that displays a simple text header at the top of the form or wizard. The header aligns with the width of the contents and can include an optional decorative stamp.

example simple header template with annotations

You can also choose a full header, image header, or sidebar template. See the SAIL Design System for guidelines about when to choose each template as well as using the simple header template.

full and image header

Parameters

Name	Keyword	Types	Description
Title	title	Text	Text to display as the header title.
Secondary Text	secondaryText	Text	Optional text to display below the title.
Title Color	titleColor	Text	Determines the title text color. Valid values: Any valid hex color or `"STANDARD"` (default), `"ACCENT"`, `"SECONDARY"`.
Secondary Text Color	secondaryTextColor	Text	Determines the secondary text color. Valid values: Any valid hex color or `"STANDARD"` (default), `"ACCENT"`, `"SECONDARY"`.
Stamp Icon	stampIcon	Text	Icon to display in a stamp next to the title. Valid values: Any icon key. See Appian Icons for available icons. In the component configuration pane, you can click SUGGEST ICON to use AI to suggest an icon based on the title and secondary text. If both the title and the secondary text aren't simple text strings, this option is disabled.
Stamp Color	stampColor	Text	Determines the stamp background color. Ignored if a stamp icon isn't specified. Valid values: any valid hex color or `"ACCENT"` (default), `"SECONDARY"`, `"POSITIVE"`, `"NEGATIVE"`, `"TRANSPARENT"`.

Usage considerations

Title bar width

For the simple header template, the title bar divider's width depends on the isTitleBarFixed parameter:

If isTitleBarFixed is false, the divider's width matches the content width.
If isTitleBarFixed is true, the divider extends to the full width of the screen or dialog.

header-template-simple-divider-compare

Additionally, if the title bar is displayed in a wizard layout, the title bar will take up the entire width of the screen, instead of being constrained to the width of the wizard contents.

header-template-simple-width-compare

Examples

Use the interactive editor below to test out the example code.

a!formLayout(
  titleBar: a!headerTemplateSimple(
    title: "License Application",
    secondaryText: "Complete this for to apply for a license, providing all required personal information.",
    titleColor: "STANDARD",
    secondaryTextColor: "STANDARD",
    stampIcon: "address-card",
    stampColor: "ACCENT"
  ),
  contents: {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!textField(
              label: "First Name",
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!textField(
              label: "Last Name",
            )
          }
        )
      }
    ),
    a!textField(
      label: "Email",
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidget(
        label: "Submit",
        submit: true,
        style: "SOLID",
        loadingIndicator: true
      )
    },
    secondaryButtons: {
      a!buttonWidget(
        label: "Cancel",
        value: true,
        submit: true,
        style: "OUTLINE",
        validate: false
      )
    }
  )
)

Feature compatibility

The table below lists this component's compatibility with various features in Appian.

Feature	Compatibility	Note
Portals	Compatible
Offline Interfaces	Compatible
Sync-Time Custom Record Fields	Incompatible
Real-Time Custom Record Fields	Incompatible	Custom record fields that evaluate in real time must be configured using one or more Custom Field functions.
Process Reports	Incompatible	Cannot be used to configure a process report.
Process Events	Incompatible	Cannot be used to configure a process event node, such as a start event or timer event.
Process Autoscaling	Incompatible	Cannot be used in autoscaled processes.
Event Consumer Filter Conditions	Compatible	Can be used in filter conditions.
Event Consumer Event Handlers	Compatible	Can be used in event handler expressions.

The following recipes include usage of the Simple Header Template.

Add Validations to an Inline Editable Grid (Validation, Grids, Looping):
Allows the user to change data directly in a grid, and validate a various entries.
Set the Default Value of CDT Fields Based on a User Input (Default Value):
Set the value of a CDT field based on a user input.

Feedback

Was this page helpful?