Header Content Layout

Header Content

Function: a!headerContentLayout()

Displays any arrangement of layouts and components beneath a billboard or card header that is flush with the edge of the page. Similar to a form layout, this is a top-level layout which cannot be nested within other layouts. The header layout is ideal for landing pages and reports.

Parameters

Name Keyword Type Description
Header header Any Type Billboard, card, or list of billboards or cards to display at the top of the page. Configure using a!billboardLayout() or a!cardLayout().
Contents contents Any Type Components and layouts to display in the body of the interface.
Visibility showWhen Boolean Determines whether the layout is displayed on the interface. When set to false, the layout is hidden and is not evaluated. Default: true.
Background color backgroundColor Text Color to show behind the contents of the page. Valid values: "WHITE" (default), "TRANSPARENT".

Notes

  • This layout will not display the report title when viewed in Tempo and embedded interfaces.
  • For configuring record views with a flush header, consider using a record header.
  • The use of a transparent background color will eliminate the page outline on an interface and show the color that is underneath. On sites, this will show as gray.

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

Billboard Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
=a!headerContentLayout(
  header: {
    a!billboardLayout(
      backgroundMedia: a!documentImage(
        document: a!EXAMPLE_BILLBOARD_IMAGE()
      ),
      backgroundColor: "#f0f0f0",
      height: "SHORT",
      marginBelow: "NONE",
      overlay: a!barOverlay(
        position: "BOTTOM",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: {
                          "Finance Summary"
                        },
                        size: "LARGE"
                      )
                    }
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!columnsLayout(
                    columns: {
                      a!columnLayout(
                        contents: {
                          a!richTextDisplayField(
                            label: "Total Spending",
                            value: {
                              a!richTextItem(
                                text: {
                                  "$31,000.00"
                                },
                                size: "MEDIUM_PLUS"
                              )
                            }
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!richTextDisplayField(
                            label: "Remaining Budget",
                            value: {
                              a!richTextItem(
                                text: {
                                  "79%"
                                },
                                color: "POSITIVE",
                                size: "MEDIUM_PLUS"
                              )
                            }
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!richTextDisplayField(
                            label: "Open Requests",
                            value: {
                              a!richTextItem(
                                text: {
                                  "36"
                                },
                                size: "MEDIUM_PLUS"
                              )
                            }
                          )
                        }
                      )
                    },
                    alignVertical: "TOP"
                  )
                }
              )
            },
            alignVertical: "MIDDLE"
          )
        },
        style: "DARK"
      )
    )
  },
  contents: {
    a!sectionLayout(
      label: "Example Section",
      contents: {
        a!textField(
          label: "YOUR CONTENT HERE",
          readOnly: true()
        )
      }
    )
  }
)

Displays the following:

A billboard header with "Finance Summary" and details in a bar overlay, an example section layout is at the bottom

See the page on Billboard Layouts for more information on billboards and the UX Design Guide: Billboard Layout for guidance on when to use each overlay style.

Card Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
a!headerContentLayout(
  header: {
    a!cardLayout(
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      text: {
                        "Finance Summary"
                      },
                      size: "LARGE"
                    )
                  }
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!columnsLayout(
                  columns: {
                    a!columnLayout(
                      contents: {
                        a!richTextDisplayField(
                          label: "Total Spending",
                          value: {
                            a!richTextItem(
                              text: {
                                "$31,000.00"
                              },
                              size: "MEDIUM_PLUS"
                            )
                          }
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!richTextDisplayField(
                          label: "Remaining Budget",
                          value: {
                            a!richTextItem(
                              text: {
                                "79%"
                              },
                              color: "POSITIVE",
                              size: "MEDIUM_PLUS"
                            )
                          }
                        )
                      }
                    ),
                    a!columnLayout(
                      contents: {
                        a!richTextDisplayField(
                          label: "Open Requests",
                          value: {
                            a!richTextItem(
                              text: {
                                "36"
                              },
                              size: "MEDIUM_PLUS"
                            )
                          }
                        )
                      }
                    )
                  },
                  alignVertical: "TOP"
                )
              }
            )
          },
          alignVertical: "MIDDLE"
        )
      },
      style: "STANDARD"
    )
  },
  contents: {
    a!sectionLayout(
      label: "Example Section",
      contents: {
        a!textField(
          label: "YOUR CONTENT HERE",
          readOnly: true()
        )
      }
    )
  }
)

Displays the following:

A header with "Finance Summary" and details in a gray background, an example section layout is at the bottom

See the page on Card Layouts for more information on cards.

Open in Github

On This Page

FEEDBACK