Hi,
How to create a horizontally scrollable card list similar to what is shown in the image below.
Discussion posts and replies are publicly visible
Not directly supported, but easily built. Works similar to paging in a grid.
Please send me sample code / example.
That should get you started.
docs.appian.com/.../user-list-pattern.html
But this is vertical list, I am looking for horizontal list
To make it horizontal, you would add a columnsLayout at line 23 and columnLayouts inside the foreach.
Important here is that this snippet renders a list and also covers paging. This is what you will want. Now you need to adapt it to horizontal.
{ a!localVariables( local!userListPagingInfo: a!pagingInfo(startIndex: 1, batchSize: 3, sort: a!sortInfo(field: "user", ascending: true)), local!users: a!forEach( /* This directly references the ID of the Designers group. Instead of an ID, a constant * * should be used to reference the group you want to pull users from. */ items: getdistinctusers(togroup(21)), expression: {user: fv!item} ), /* Since we're retrieving users from an Appian group instead of a query, we make our own datasubset */ local!pagedUsers: todatasubset(local!users, local!userListPagingInfo), { { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextHeader( text: "Team Members", size: "MEDIUM" ) } ), a!columnsLayout( columns: a!forEach( items: local!pagedUsers, expression: a!columnLayout( contents: a!cardLayout( contents: a!sideBySideLayout( items: { a!sideBySideItem( item: a!imageField( images: { a!userImage(user: fv!item.user, link: a!userRecordLink(user: fv!item.user)) }, size: "SMALL", style: "AVATAR" ), width: "MINIMIZE" ), a!sideBySideItem( item: a!richTextDisplayField( labelPosition: "COLLAPSED", value: { a!richTextItem( /* This should be whatever you would use to display a user's name. */ text: user(fv!item.user, "firstName") & " " & user(fv!item.user, "lastName"), link: a!userRecordLink(user: fv!item.user), linkStyle: "STANDALONE", style: "STRONG" ), char(10), a!richTextItem( text: user(fv!item.user, "titleName"), color: "SECONDARY" ) } ) ) }, alignVertical: "MIDDLE" ) ) ) ) ), a!richTextDisplayField( value: { a!richTextIcon( icon: "angle-double-left", link: a!dynamicLink( saveInto: { a!save(local!userListPagingInfo.startIndex, 1), a!save( local!pagedUsers, /* Since we're retrieving users from an Appian group instead of a query, we make our own datasubset */ todatasubset(arrayToPage: local!users, pagingConfiguration: local!userListPagingInfo) ) }, showWhen: local!userListPagingInfo.startIndex <> 1 ), linkStyle: "STANDALONE", color: if( local!userListPagingInfo.startIndex <> 1, "STANDARD", "SECONDARY" ), size: "MEDIUM" ), a!richTextIcon( icon: "angle-left", link: a!dynamicLink( saveInto: { a!save( local!userListPagingInfo.startIndex, if( local!userListPagingInfo.startIndex - local!userListPagingInfo.batchSize < 1, 1, local!userListPagingInfo.startIndex - local!userListPagingInfo.batchSize ) ) }, showWhen: local!userListPagingInfo.startIndex <> 1 ), linkStyle: "STANDALONE", color: if( local!userListPagingInfo.startIndex <> 1, "STANDARD", "SECONDARY" ), size: "MEDIUM" ), " ", a!richTextItem( text: { local!userListPagingInfo.startIndex, " - ", if( local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 > local!pagedUsers.totalCount, local!pagedUsers.totalCount, local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 ) }, size: "MEDIUM", style: "STRONG" ), a!richTextItem( text: { " of ", fixed(local!pagedUsers.totalCount, 0) }, size: "MEDIUM" ), " ", a!richTextIcon( icon: "angle-right", link: a!dynamicLink( saveInto: { a!save( local!userListPagingInfo, a!pagingInfo( startIndex: local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize, batchSize: local!userListPagingInfo.batchSize ) ) }, showWhen: local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 < local!pagedUsers.totalCount ), linkStyle: "STANDALONE", color: if( local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 < local!pagedUsers.totalCount, "STANDARD", "SECONDARY" ), size: "MEDIUM" ), a!richTextIcon( icon: "angle-double-right", link: a!dynamicLink( saveInto: { a!save( local!userListPagingInfo.startIndex, /* When jumping to the last page, make sure that the startIndex is an even multiple of batch size. * * This ensures that you have the same last page as if you had gotten there one page at a time. */ if( mod(local!pagedUsers.totalCount, local!userListPagingInfo.batchSize) = 0, local!pagedUsers.totalCount - local!userListPagingInfo.batchSize + 1, local!pagedUsers.totalCount - mod(local!pagedUsers.totalCount, local!userListPagingInfo.batchSize) + 1 ) ) }, showWhen: local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 < local!pagedUsers.totalCount ), linkStyle: "STANDALONE", color: if( local!userListPagingInfo.startIndex + local!userListPagingInfo.batchSize - 1 < local!pagedUsers.totalCount, "STANDARD", "SECONDARY" ), size: "MEDIUM" ) } ) } } ) }
This is a great example of the paging functionality. I also like this pattern that is a nice UI for larger cards: https://docs.appian.com/suite/help/21.2/cards-as-list-items-pattern.html
One other thing to keep in mind is that you could also implement arrow links / buttons in the first and last columns that just increases / decreases your start index by 1 to simulate the carousel behavior you mentioned at the top.