Hi Community, I’m working on a UI inspired by the attached mockup. I’m aware that Appian doesn’t natively support a fixed/sticky footer within an Overlay, nor a perfect 2x2 grid inside a standard buttonLayout. However, I’m determined to get as close to this look as possible. Has anyone tried: Using a columnsLayout with Cards as buttons to simulate the 2x2 grid? Using a Header Content Layout inside the overlay to force the bottom bar to stay visible? I'd love to hear any 'outside the box' ideas to bypass the standard layout constraints and achieve this specific action-bar aesthetic.

Question

Appian display interface

Forum|Forum|3 months ago
April 22, 2026
3 replies
0 views

Hi Community,

I’m working on a UI inspired by the attached mockup. I’m aware that Appian doesn’t natively support a fixed/sticky footer within an Overlay, nor a perfect 2x2 grid inside a standard buttonLayout.

However, I’m determined to get as close to this look as possible. Has anyone tried:

Using a columnsLayout with Cards as buttons to simulate the 2x2 grid?
Using a Header Content Layout inside the overlay to force the bottom bar to stay visible?

I'd love to hear any 'outside the box' ideas to bypass the standard layout constraints and achieve this specific action-bar aesthetic.

stefanhelzle0001

What is the user interaction you try to implement?

The UI-answer is: "I do not know of a way to directly implement this exact UI pattern."

shubhama926776

If you want something similar to this, you can try it and let us know if you are looking for something similar.

a!localVariables(
  local!selectedAction: null,

  a!formLayout(
    titleBar: "Test 1",
    contents: {
      a!cardLayout(
        contents: {
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            value: {
              a!richTextItem(
                text: "Value 1",
                color: "#842029",
                style: "STRONG"
              ),
              "  ",
              a!richTextItem(
                text: "Value 2",
                color: "#7F6000",
                style: "STRONG"
              )
            }
          ),

          a!sectionLayout(
            label: "SECTION 1",
            contents: {
              a!textField(
                labelPosition: "JUSTIFIED",
                label: "Label 1",
                value: "Value 1",
                readOnly: true
              ),
              a!textField(
                labelPosition: "JUSTIFIED",
                label: "Label 2",
                value: "Value 2",
                readOnly: true
              ),
              a!textField(
                labelPosition: "JUSTIFIED",
                label: "Label 3",
                value: "Value 3",
                readOnly: true
              ),
              a!textField(
                labelPosition: "JUSTIFIED",
                label: "Label 4",
                value: "Value 4",
                readOnly: true
              )
            }
          ),

          a!sectionLayout(
            label: "SECTION 2",
            contents: {
              a!textField(
                labelPosition: "JUSTIFIED",
                label: "Label 5",
                value: "Value 5",
                readOnly: true
              ),
              a!textField(
                labelPosition: "JUSTIFIED",
                label: "Label 6",
                value: "Value 6",
                readOnly: true
              ),
              a!textField(
                labelPosition: "JUSTIFIED",
                label: "Label 7",
                value: "Value 7",
                readOnly: true
              ),
              a!textField(
                labelPosition: "JUSTIFIED",
                label: "Label 8",
                value: "Value 8",
                readOnly: true
              )
            }
          ),

          a!sectionLayout(
            label: "SECTION 3",
            contents: {
              a!textField(
                labelPosition: "JUSTIFIED",
                label: "Label 9",
                value: "Value 9",
                readOnly: true
              )
            }
          ),

          a!sectionLayout(
            label: "SECTION 4",
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: "â`¢ Value 10",
                    color: "SECONDARY"
                  ),
                  char(10),
                  a!richTextItem(
                    text: "â`¢ Value 11",
                    color: "SECONDARY"
                  )
                }
              )
            }
          ),

          a!richTextDisplayField(
            label: "Label 10",
            value: if(
              isnull(local!selectedAction),
              a!richTextItem(
                text: "Value 12",
                color: "SECONDARY"
              ),
              a!richTextItem(
                text: "Selected: " & local!selectedAction,
                style: "STRONG"
              )
            )
          ),

          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextItem(
                          text: "Value 13",
                          style: "STRONG"
                        ),
                        align: "CENTER"
                      )
                    },
                    link: a!dynamicLink(
                      value: "Value 13",
                      saveInto: local!selectedAction
                    ),
                    style: "NONE",
                    showBorder: true,
                    shape: "SEMI_ROUNDED",
                    padding: "STANDARD",
                    marginBelow: "STANDARD"
                  ),

                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextItem(
                          text: "Value 14",
                          style: "STRONG"
                        ),
                        align: "CENTER"
                      )
                    },
                    link: a!dynamicLink(
                      value: "Value 14",
                      saveInto: local!selectedAction
                    ),
                    style: "NONE",
                    showBorder: true,
                    shape: "SEMI_ROUNDED",
                    padding: "STANDARD"
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextItem(
                          text: "Value 15",
                          style: "STRONG"
                        ),
                        align: "CENTER"
                      )
                    },
                    link: a!dynamicLink(
                      value: "Value 15",
                      saveInto: local!selectedAction
                    ),
                    style: "NONE",
                    showBorder: true,
                    shape: "SEMI_ROUNDED",
                    padding: "STANDARD",
                    marginBelow: "STANDARD"
                  ),

                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextItem(
                          text: "Value 16",
                          style: "STRONG"
                        ),
                        align: "CENTER"
                      )
                    },
                    link: a!dynamicLink(
                      value: "Value 16",
                      saveInto: local!selectedAction
                    ),
                    style: "NONE",
                    showBorder: true,
                    shape: "SEMI_ROUNDED",
                    padding: "STANDARD"
                  )
                }
              )
            },
            spacing: "STANDARD"
          )
        },
        showBorder: false,
        padding: "STANDARD"
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Value 17",
          submit: true,
          style: "SOLID"
        )
      }
    )
  )
)

D

davidd132326Author

Thx!! I will try

Sign up

Login with SSO

Login to the community

Login with SSO