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() ) )
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".
Discussion posts and replies are publicly visible
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 ) ) } ) )
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
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() ) } ) )
Thanks, its working as expected now.
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...