Full Header Template

On This Page

Function

a!headerTemplateFull( title, secondaryText, titleColor, secondaryTextColor, backgroundColor, stampIcon, stampColor )

A title bar template that displays a prominent header with a background color at the top of the form or wizard. The header spans the full width of the page and can include an optional decorative stamp.

example full header template with annotations

You can also choose a simple or image header. See the SAIL Design System for guidelines about when to choose each template.

simple 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"`.
Background Color	backgroundColor	Text	Determines the title bar background color. Valid values: Any valid hex color or, `"ACCENT"` (default), `"WHITE"`, `"CHARCOAL_SCHEME"`, `"NAVY_SCHEME"`, `"PLUM_SCHEME"`.
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 either the icon color or the stamp background color, depending on contrast. Ignored if a stamp icon isn't specified. Valid values: any valid hex color or `"ACCENT"` (default), `"SECONDARY"`, `"POSITIVE"`, `"NEGATIVE"`, `"TRANSPARENT"`.

Usage considerations

Stamp icon colors

When you use "ACCENT" for the title bar backgroundColor and stampColor, the stamp icon color will be the accent color defined in the site or portal object. The stamp background color will be either black or white, depending on contrast.

Full header with icon on dark and light accent colors

If you use a custom hex code for stampColor, the stamp icon color will be black or white, depending on contrast.

Full header with icon on dark and light custom stamp colors

Examples

Use the interactive editor below to test out your code:

a!formLayout(
  titleBar: a!headerTemplateFull(
    title: "License Application",
    secondaryText: "Complete this for to apply for a license, providing all required personal information.",
    titleColor: "STANDARD",
    secondaryTextColor: "STANDARD",
    backgroundColor: "ACCENT",
    stampIcon: "address-card",
    stampColor: "TRANSPARENT"
  ),
  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 Mobile	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.

Feedback

Was this page helpful?