RE: Appian display interface

daviddm-01 — Thu, 23 Apr 2026 08:45:58 GMT
Thx!! I will try
RE: Appian display interface

Shubham Aware — Wed, 22 Apr 2026 12:58:17 GMT
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"
        )
      }
    )
  )
)
RE: Appian display interface

Stefan Helzle — Wed, 22 Apr 2026 07:57:33 GMT
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."