Carousel in Appian

Question

Is is possible to create an interface where there is a carousel list for images, cards, etc. ? 
 Refer to the image above.

VinaySharma · Accepted Answer

a!localVariables(
 local!data:{
 a!map(id:1),
 a!map(id:2),
 a!map(id:3),
 a!map(id:4),
 a!map(id:5),
 a!map(id:6),
 a!map(id:7),
 a!map(id:8),
 a!map(id:9),
 },
 local!startIndex:1,
 local!paging:a!pagingInfo(
 startIndex: local!startIndex,
 batchSize: 3
 ),
 local!dataSubset: a!refreshVariable(
 value: todatasubset(
 arrayToPage: local!data,
 pagingConfiguration: local!paging
 ),
 refreshOnVarChange: local!startIndex
),
{
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: a!richTextDisplayField(
 value: a!richTextIcon(
 icon: "arrow-circle-left",
 link: a!dynamicLink(
 saveInto: if(local!startIndex=1,
 {},
 a!save(local!startIndex,local!startIndex-3)
 )
 )
 )
 )
 ),
 a!forEach(
 items: local!dataSubset.data,
 expression: a!columnLayout(
 contents: {
 a!cardLayout(
 contents: a!richTextDisplayField(
 value: a!richTextItem(
 text: index(fv!item,"id",{}),
 style: "STRONG"
 ),
 align: "CENTER"
 )
 ),
 
 }
 )
 ),
 a!columnLayout(
 a!richTextDisplayField(
 value: a!richTextIcon(
 icon: "arrow-circle-right",
 link: a!dynamicLink(
 saveInto: {
 if(local!startIndex=7,{},a!save(local!startIndex,local!startIndex+3))
 
 }
 )
 ),
 align: "RIGHT"
 )
 ),
 }
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 value: a!richTextIcon(
 icon: a!match(
 value: local!startIndex,
 equals: 1,
 then: "circle",
 default: "circle-o"
 ),
 size: "SMALL"
 ),
 align: "CENTER"
 )
 }
 ),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 value: a!richTextIcon(
 icon: a!match(
 value: local!startIndex,
 equals: 4,
 then: "circle",
 default: "circle-o"
 ),
 size: "SMALL"
 ),
 align: "CENTER"
 )
 }
 ),
 a!columnLayout(
 contents: {
 a!richTextDisplayField(
 value: a!richTextIcon(
 icon: a!match(
 value: local!startIndex,
 equals: 7,
 then: "circle",
 default: "circle-o"
 ),
 size: "SMALL"
 ),
 align: "CENTER"
 )
 }
 ),
 a!columnLayout(),
 }
 )
 }
) 
 You can try this.

Carousel in Appian

Top Replies