RE: Carousel in Appian

SHKEXL288968 — Wed, 07 May 2025 12:29:24 GMT

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

RE: Carousel in Appian

vinays024987 — Mon, 23 Jan 2023 10:28:22 GMT

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.