Card Layout, Limitation as a grid

Question

load(
  local!counter: 20,
  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()
  )
)I have a list of activities, which are displayed in card layout as grid, im displaying 20 activities at a time.
when the user clicks on "Load more" button, 20 more activities should be displayed along with previous 20 activities and so on.

I'm able to display the above, but what the issue is "when a user click on the Load more option to view the remaining activities,
the user is routed to the very 1st activity ID and then the user has to scroll down again".

what was expected was: " the system should display more activities when clicked on load more. the load more should start from
the below the last activity before clicking on Load more".

andrewh0007 · Accepted Answer

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()
      )
    }
  )
)

andrewh0007 · Answer

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
        )
      )
    }
  )
)

Sign up

Login with SSO

Login to the community

Login with SSO