Image Header Template

On This Page

Function

a!headerTemplateImage( title, secondaryText, titleColor, secondaryTextColor, backgroundColor, image, imageSize )

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 a decorative image next to the title.

example image header template with annotations

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

simple and full 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).
Image	image	Any Type	Image to display next to the title and secondary text in the title bar. Configured using a!webImage(), a!userImage, or a!documentImage.
Image Size	imageSize	Text	Determines the image size. Valid values: `"SMALL_PLUS"` (default), `"MEDIUM"`, `"MEDIUM_PLUS"`.

Usage considerations

Responsiveness on smaller screen sizes

The image is hidden on smaller screens because it is automatically responsive.

Example

image-header-example

To experiment with examples, copy and paste the expression into an interface object.

a!formLayout(
  titleBar: a!headerTemplateImage(
    title: "License Application",
    secondaryText: "Complete this for to apply for a license, providing all required personal information.",
    titleColor: "STANDARD",
    secondaryTextColor: "STANDARD",
    backgroundColor: "ACCENT",
    image: a!documentImage(
      document: a!EXAMPLE_TITLE_BAR_IMAGE()
    ),
    imageSize: "MEDIUM"
  ),
  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.

Feedback

Was this page helpful?