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 header, image header, or sidebar template. 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 hex color including transparency, or `"ACCENT"` (default), `"WHITE"`, `"CHARCOAL_SCHEME"`, `"NAVY_SCHEME"`, `"PLUM_SCHEME"`. To add transparency to the hex color, add two additional digits between 00 (more transparent) and FF (less transparent).
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 the example 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 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 Full Header Template.

Upload Multiple Documents and Edit Document Properties (Document Management, Records):
Build a form that allows users to create a record and upload related documents. Users can edit the document name and add a document description before submitting the form.
Upload Multiple Documents in an Editable Grid (Document Management, Records):
Build a form that allows users to create a record and upload related documents in an editable grid.
Upload and rename a file (Document Management, Records):
Allow users to upload and rename a file.

Feedback

Was this page helpful?