Card Layout, Limitation as a grid

RE: Card Layout, Limitation as a grid

Mike Schmitt — Tue, 15 Mar 2022 14:05:37 GMT

BTW, and this is totally tangential, but you really really shouldn't use load() unless you're still on an Appian version before 19.2 for some awful reason...

RE: Card Layout, Limitation as a grid

madankg — Tue, 15 Mar 2022 12:21:05 GMT

Thanks, its working as expected now.

RE: Card Layout, Limitation as a grid

ajhick — Fri, 11 Mar 2022 11:30:27 GMT

Ok, I have no idea why this works but adding a!formLayout() solves your problem! I changed none of your code other than adding the a!formLayout().

load(
  local!counter: 40,
  a!formLayout(
    contents: {
      a!cardLayout(
        contents: {
          a!forEach(
            items: enumerate(local!counter) + 1,
            expression: {
              a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextHeader(text: "Counter" & fv!item)
                  )
                },
                shape: "ROUNDED",
                padding: "STANDARD",
                marginBelow: "STANDARD"
              )
            }
          ),
          a!cardLayout(
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextIcon(icon: "repeat", size: "MEDIUM"),
                  a!richTextItem(text: " Load More", style: "STRONG")
                },
                align: "CENTER"
              )
            },
            link: a!dynamicLink(
              saveInto: { a!save(local!counter, local!counter + 20) }
            ),
            height: "AUTO",
            style: "ACCENT",
            marginBelow: "NONE"
          )
        },
        showBorder: false()
      )
    }
  )
)

RE: Card Layout, Limitation as a grid

madankg — Fri, 11 Mar 2022 09:43:10 GMT

load(
  local!counter: 40,
  a!cardLayout(
    contents: {
      a!forEach(
        items: enumerate(local!counter)+1,
        expression: {
          a!cardLayout(
            contents: {
              a!richTextDisplayField(
                value: a!richTextHeader(text: "Counter" & fv!item)
              )
            },
            shape: "ROUNDED",
            padding: "STANDARD",
            marginBelow: "STANDARD"
          )
        }
      ),
      a!cardLayout(
        contents: {
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            value: {
              a!richTextIcon(icon: "repeat", size: "MEDIUM"),
              a!richTextItem(text: " Load More", style:"STRONG" )
            },
            align: "CENTER"
          )
        },
        link: a!dynamicLink(
          saveInto: {a!save(local!counter, local!counter+20)}
        ),
        height: "AUTO",
        style: "ACCENT",
        marginBelow: "NONE"
      )
    },
    showBorder: false()
  )
)

call the Interface in the PM and the Pm in Site,

When testing in Interface it works as Expected, but when you check in Site, the problem occurs

RE: Card Layout, Limitation as a grid

ajhick — Fri, 11 Mar 2022 09:12:21 GMT

It's always useful to supply your code, it makes it a lot easier to see what's going on. I've mocked up below and I'm not returned to the top.

Let me know how you go with this code and if it helps. If it doesn't please provide the code that you're using and maybe then I can see what's causing the return to the top.

a!localVariables(
  local!numberOfActivitiesToShowEachLoad: 20,
  local!totalNumberOfActivities: 79,
  local!activities: a!forEach(
    items: 1 + enumerate(local!totalNumberOfActivities),
    expression: concat(
      "Counter ",
      fv!index
    )
  ),
  local!batchesToShow: 1,
  local!activitiesToShow: index(
    local!activities,
    1 + enumerate(product(local!batchesToShow, local!numberOfActivitiesToShowEachLoad)),
    {}
  ),
  a!formLayout(
    label: "Load Activities",
    contents: {
      a!forEach(
        items: local!activitiesToShow,
        expression: a!cardLayout(
          contents: {
            a!textField(
              label: fv!item,
              labelPosition: "COLLAPSED",
              value: fv!item,
              readOnly: true
            )
          },
          marginBelow: "EVEN_LESS",
          padding: "EVEN_LESS"
        )
      ),
      a!cardLayout(
        contents: {
          a!textField(
            label: "Load More",
            labelPosition: "COLLAPSED",
            value: "Load More",
            readOnly: true
          )
        },
        style: "ACCENT",
        link: a!dynamicLink(
          value: local!batchesToShow + 1,
          saveInto: local!batchesToShow
        )
      )
    }
  )
)