Using a card as a background image

davidd0004 over 4 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

Parents

0 chandhinir over 4 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"
        )
      }
    )
  }
)

Reply

0 chandhinir over 4 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"
        )
      }
    )
  }
)

Children

No Data