The layout components in Appian are pretty powerful for what Appian is made for. Just a few years ago, there were no colors available, and layouts could only be one or two columns. A lot has changed since then, and the challenge to create a rich UI turned from tech-limited into designer-limited.

In one of my recents posts, I described how to implement model dialogs. Now, I want to share one more UI design trick to simulate overlapping components, like in the following screenshot.

Let’s first take a look at the basic design pattern. You can find the example code when scrolling down.

Design Pattern

Using a header content layout, I define the page background color to light blue and shrink the padding to zero. The header stays empty, and I add a dark color card layout with no border to the contents list. To prevent any gap in the following columns layout, I set the margin below to NONE.

In the columns layout, I define the spacing as NONE to avoid any gaps. I set the middle column to a fixed width and add two more card layouts to the outer columns. Both have no border, no shadow, dark color and a fixed height. Then I complete the layout by adding a white card layout to the middle column, toggling borders to off and shadow to on.

Check the sketch below to get a better understanding.

Pretty simple, once you know the trick ….

Example Code

a!headerContentLayout(
  contents: {
    a!cardLayout(
      contents: {
        a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            a!richTextItem(
              text: {
                "Overlapping Card Layouts"
              },
              size: "MEDIUM_PLUS"
            )
          },
          marginBelow: "MORE"
        )
      },
      height: "AUTO",
      style: "#333333",
      marginBelow: "NONE",
      showBorder: false
    ),
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "#333333",
              marginBelow: "STANDARD",
              showBorder: false
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!richTextItem(
                      text: {
                        "Header"
                      },
                      size: "LARGE"
                    )
                  },
                  marginBelow: "MORE"
                ),
                a!textField(
                  label: "Text"
                ),
                a!paragraphField(
                  label: "Paragraph"
                ),
                a!buttonArrayLayout(
                  buttons: {
                    a!buttonWidget(
                      label: "Submit",
                      icon: "check",
                      iconPosition: "START",
                      style: "PRIMARY"
                    )
                  },
                  align: "END"
                )
              },
              height: "AUTO",
              style: "NONE",
              marginBelow: "EVEN_MORE",
              showBorder: false,
              showShadow: true
            )
          },
          width: "MEDIUM_PLUS"
        ),
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {},
              height: "EXTRA_SHORT",
              style: "#333333",
              marginBelow: "STANDARD",
              showBorder: false
            )
          }
        )
      },
      spacing: "NONE"
    )
  },
  backgroundColor: "#EDF4FF",
  contentsPadding: "NONE"
)

Summary

What a great layout trick! Just a simple arrangement of cards creates the illusion of overlapping UI components.

What do you have in your magic box? Let me know!

Keep on rocking!