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.

vinays024987 · 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.

Shukur Shaik · Answer

a!localVariables(
 local!map: {
 a!map(style: "#7b83e3"),
 a!map(style: "#87e37b"),
 a!map(style: "#e37bdc"),
 a!map(style: "#e3cc7b")
 },
 local!carouselCount: 1,
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: a!richTextDisplayField(
 value: {
 char(10),
 a!richTextIcon(
 icon: "angle-left-bold",
 size: "EXTRA_LARGE",
 link: a!dynamicLink(
 value: local!carouselCount - 1,
 saveInto: local!carouselCount
 ),
 linkStyle: "STANDALONE",
 color: "SECONDARY",
 showWhen: local!carouselCount>1
 )
 },
 align: "CENTER",
 marginAbove: "EVEN_MORE"
 )
 ),
 a!columnLayout(
 contents: a!cardLayout(
 contents: {},
 height: "MEDIUM",
 style: index(
 local!map.style,
 local!carouselCount,
 null
 ),
 showBorder: true,
 padding: "STANDARD",
 shape: "ROUNDED",
 decorativeBarColor: "ACCENT",
 decorativeBarPosition: "BOTTOM",
 borderColor: "WARN"
 ),
 width: "5X"
 ),
 a!columnLayout(
 contents: a!richTextDisplayField(
 value: {
 char(10),
 a!richTextIcon(
 icon: "angle-right-bold",
 size: "EXTRA_LARGE",
 link: a!dynamicLink(
 value: local!carouselCount + 1,
 saveInto: local!carouselCount
 ),
 linkStyle: "STANDALONE",
 color: "SECONDARY",
 showWhen: not(length(local!map)=local!carouselCount)
 )
 },
 align: "CENTER",
 marginAbove: "EVEN_MORE"
 )
 )
 }
 )
)