Carousel in Appian

Certified Associate Developer

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

Refer to the image above.

  Discussion posts and replies are publicly visible

  • +1
    Certified Associate Developer

    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.