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 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: "WHITE" (default), "TRANSPARENT".

Usage considerations

  • 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 Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page

FEEDBACK