Using a card as a background image

davidd0004 over 5 years ago

Hi,

I was looking around the Appian best practices UX and I saw that they used a card with a background image that took up the whole page kind of like a modern webesite design.

Has anyone had any success accomplishing this? If so would you mind sharing some code snippets or some pseudo code? I'm interested to see how this works.

Discussion posts and replies are publicly visible

0 chandhinir over 5 years ago

Hi ,

You can use billboard layout. Please find the below code:

load(
  local!options: {
    {
      icon: "home",
      name: "House",
      desc: "A single family home, townhouse, or duplex"
    },
    {
      icon: "building",
      name: "Condo",
      desc: "A multi-family building in which you own a unit"
    }
  },
  local!selectedCard,
  {
    a!billboardLayout(
      overlayStyle: "NONE",
      height: "TALL",
      backgroundMedia: a!documentImage(
        document: 58221
      ),
      overlayContents: {
        a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            char(
              10
            ),
            char(
              10
            ),
            a!richTextItem(
              text: "Is your home a house or a condo?",
              color: "ACCENT",
              size: "LARGE"
            ),
            char(
              10
            ),
            char(
              10
            )
          },
          showWhen: isNull(
            local!selectedCard
          ),
          align: "CENTER"
        ),
        a!columnsLayout(
          columns: {
            a!columnLayout(),
            a!forEach(
              items: local!options,
              expression: a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          char(
                            10
                          ),
                          char(
                            10
                          ),
                          a!richTextIcon(
                            icon: fv!item.icon,
                            color: "#8CA1D0",
                            size: "LARGE"
                          ),
                          char(
                            10
                          ),
                          char(
                            10
                          ),
                          a!richTextItem(
                            text: fv!item.name,
                            color: "ACCENT",
                            size: "LARGE",
                            style: "STRONG"
                          ),
                          char(
                            10
                          ),
                          char(
                            10
                          ),
                          a!richTextItem(
                            text: fv!item.desc,
                            size: "SMALL"
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    link: a!dynamicLink(
                      saveInto: a!save(
                        local!selectedCard,
                        fv!item.name
                      )
                    ),
                    height: "MEDIUM"
                  )
                },
                width: "MEDIUM"
              )
            ),
            a!columnLayout()
          },
          showWhen: isNull(
            local!selectedCard
          ),
          marginBelow: "STANDARD"
        ),
        a!richTextDisplayField(
          value: local!selectedCard & " next steps would appear here",
          showWhen: not(
            isNull(
              local!selectedCard
            )
          ),
          align: "CENTER"
        ),
        a!richTextDisplayField(
          labelPosition: "COLLAPSED",
          value: {
            char(
              10
            ),
            char(
              10
            ),
            a!richTextIcon(
              icon: "arrow-left",
              link: a!dynamicLink(
                saveInto: a!save(
                  local!selectedCard,
                  null
                )
              ),
              linkStyle: "STANDALONE",
              color: "ACCENT"
            ),
            a!richTextItem(
              text: " Go back",
              link: a!dynamicLink(
                saveInto: a!save(
                  local!selectedCard,
                  null
                )
              ),
              linkStyle: "STANDALONE"
            )
          },
          showWhen: not(
            isNull(
              local!selectedCard
            )
          ),
          align: "CENTER"
        )
      }
    )
  }
)