Header Content Layout Component

Function

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 and cannot be nested within other layouts. The header layout is ideal for landing pages and reports.

To add a header content layout to your interface from Design Mode, drag out either a CARD HEADER or BILLBOARD HEADER from the interface palette.

See also: Header Content Layout style guidance

Parameters

Name Keyword Types Description

Header

header

Any Type

Components and layouts to display in the body of the interface.

Contents

contents

Any Type Array

Components and layouts to display in the dashboard body.

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: Any valid hex color or "WHITE" (default), "TRANSPARENT", "CHARCOAL_SCHEME", "NAVY_SCHEME", "PLUM_SCHEME".

Contents Padding

contentsPadding

Text

Determines the space surrounding the contents. Valid values: "NONE", "EVEN_LESS", "LESS", "STANDARD" (default), "MORE", "EVEN_MORE".

Usage considerations

Designing reports and record views

  • 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.

Using the backgroundColor parameter

  • If you're using a predefined dark color scheme for your background, make sure that your header content layout and cards are using the same color scheme.
  • If you're using a dark custom background color for your header content layout, make your cards a lighter color. For more information on backgrounds, check out our header content layout design guidance.
  • When using predefined dark color schemes, cards are a lighter color than the background. If you're using a card header in combination with a predefined color scheme, you must manually set the card header's background color to use the same hex code as the header content layout's background. For more guidance on backgrounds, check out our design guidance for header content layouts.
  • If you're using a predefined dark color scheme in a site, use the same color scheme for your site's navigation bar.
  • Dark color schemes shouldn't be applied to interfaces used on Tempo or across multiple sites with different color schemes.
  • If you're using a dark color scheme, apply the same scheme to all of your site pages to ensure your site branding configurations work well with the selected background color.
    • Note that record lists, record related actions, the records News tab, and the records Related Actions tabs should not be used with dark color schemes. If your site requires these, we recommend using the default white background across all site pages.

Using transparent backgrounds

  • The header content layout's transparent background eliminates the page outline on an interface and shows the background color.
    • For Tempo, the background color is light blue.
    • For Sites, the background color is gray.
  • If you are using a billboard that contains an image with a transparent background, you'll be able to see the color specified in the billboard layout's backgroundColor parameter. For a clean look, make sure that the billboard's backgroundColor is the same hex code as the backgroundColor of the header content layout. See our header content layout design guidance for more information and examples.

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.

Header content layout with navy color scheme

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
a!localVariables(
  local!universityAdmissionsMetricsSpring: {
    a!map(name: "Applications", totalCount: 1753),
    a!map(name: "Admitted",     totalCount: 367),
    a!map(name: "Accepted",     totalCount: 200),
    a!map(name: "Enrolled",     totalCount: 150)
  },
  local!universityAdmissionsMetricsFall: {
    a!map(name: "Applications", totalCount: 3415),
    a!map(name: "Admitted",     totalCount: 429),
    a!map(name: "Accepted",     totalCount: 212),
    a!map(name: "Enrolled",     totalCount: 199)
  },
  local!universityAdmissionsYear: year(today()),
  a!headerContentLayout(
    header:{}, 
    contents:{
      a!richTextDisplayField(
        labelPosition: "COLLAPSED",
        value: 
        {
          a!richTextItem(
            text: {
              "2021 Admissions Dashboard"
            },
            size: "LARGE"
          ),
          char(10),
          char(10)
        }
      ),
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: "2021 Spring Semester",
                        size: "MEDIUM_PLUS"
                      ),
                      char(10),
                      char(10)
                    }
                  ),
                  a!columnsLayout(
                    columns: {
                      a!forEach(
                        items: local!universityAdmissionsMetricsSpring,
                        expression: a!columnLayout(
                          contents: {
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: {
                                a!richTextItem(
                                  text: fv!item.name,
                                  color: "STANDARD"
                                ),
                                char(10),
                                a!richTextItem(
                                  text: fv!item.totalCount,
                                  size: "LARGE",
                                  style: "STRONG"
                                )
                              }
                            )
                          }
                        )
                      )
                    },
                    showDividers: true
                  )
                },
                style: "NAVY_SCHEME",
                padding: "STANDARD",
                marginBelow: "STANDARD",
                showBorder: false
              )
            }
          ),
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: {
                      a!richTextItem(
                        text: "2021 Fall Semester",
                        size: "MEDIUM_PLUS"
                      ),
                      char(10),
                      char(10)
                    }
                  ),
                  a!columnsLayout(
                    columns: {
                      a!forEach(
                        items: local!universityAdmissionsMetricsFall,
                        expression: a!columnLayout(
                          contents: {
                            a!richTextDisplayField(
                              labelPosition: "COLLAPSED",
                              value: {
                                a!richTextItem(
                                  text: fv!item.name,
                                  color: "STANDARD"
                                ),
                                char(10),
                                a!richTextItem(
                                  text: fv!item.totalCount,
                                  size: "LARGE",
                                  style: "STRONG"
                                )
                              }
                            )
                          }
                        )
                      )
                    },
                    showDividers: true
                  )
                },
                style: "NAVY_SCHEME",
                padding: "STANDARD",
                marginBelow: "STANDARD",
                showBorder: false
              )
            }
          )
        }
      )
    }, 
    backgroundColor: "NAVY_SCHEME"  
  )
)

Displays the following:

screenshot of a Admissions dashboard with a navy background

Open in Github

On This Page

FEEDBACK