Change image dynamically

You need to just change the assigned value. More details -> better answers.

So the requirement is in card layout i need to display image and text.

Eg: Image1 and text1 needs to be displayed first then it should change to Image2 and text2 then to Image3 and text3 then to Image4 and text4 and finally it should show image1 and text1 and the cycle continues.

Note text is short description about image eg: if the image is of Apple then text is Apple.

It should be Triggered by user interaction. Eg: if i hover my cursor on that card layout then it should change

There's currently no functionality that would allow you to perform a save action (or any other manual variable update) just via hover-over.  The user would need to click something.

ohk mike ..Is it possible if user clicks on that card and then it will change

It would also be helpful to get a lot more information about why you're hoping to do this, because there may be other similar functionality in Appian that could still achieve your goal in a different way.

you can create a constant which is of multiple type and in that you can add your image document and in interface you can refer this constant to change the image of icon click. on icon, you have to change the index to get the next and previous image.

Hope the below code works for your requirement. This code also changes the image randomly on every 30 seconds without user interaction.

a!localVariables(
  local!images: {
    "BOOK",
    "BUILDING",
    "BRIEFCASE",
    "AIRPLANE"
  },
  local!index: a!refreshVariable(
    value: charat(rand(1), 3),
    refreshInterval: 0.5
  ),
  local!selectedImage: local!images[if(local!index > 4, 1, local!index)],
  a!cardLayout(
    contents: {
      a!billboardLayout(
        backgroundMedia: a!documentImage(
          document: a!iconNewsEvent(icon: local!selectedImage)
        ),
        backgroundColor: "#f0f0f0",
        marginBelow: "NONE",
        overlay: a!barOverlay(
          contents: {
            a!imageField(
              align: "CENTER",
              images: {
                a!forEach(
                  items: local!images,
                  expression: a!documentImage(
                    document: if(
                      local!selectedImage = fv!item,
                      a!iconIndicator("HARVEY_100"),
                      a!iconIndicator("HARVEY_0")
                    ),
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!selectedImage,
                          local!images[fv!index]
                        )
                      }
                    )
                  )
                )
              },
              size: "ICON"
            )
          }
        )
      )
    }
  )
)

Thanks a lot buddy ..

Som said:

Is it possible if user clicks on that card and then it will change

This would be pretty simple just by setting up a link using dynamicLink() and having it save a new value into a variable storing an identifier for which image you want to be displayed (i.e. the index).  It could simply increment the index and, if it's currently already on the highest one, set it back to 1.

Thans mike..Can you please help me with code

a!localVariables(
  local!indexes: {1, 2, 3, 4},
  
  local!currentIndex: local!indexes[1],
  
  a!cardLayout(
    contents: {
      a!richTextDisplayField(
        value: "Value: " & local!currentIndex
      )
    },
    link: a!dynamicLink(
      saveInto: {
        a!save(
          local!currentIndex,
          index(
            local!indexes,
            if(
              local!currentIndex = local!indexes[length(local!indexes)],
              1,
              where(local!indexes = local!currentIndex)[1] + 1
            )
          )
        )
      }
    )
  )
)

a!localVariables(
  local!indexes: {1, 2, 3, 4},
  
  local!currentIndex: local!indexes[1],
  
  a!cardLayout(
    contents: {
      a!richTextDisplayField(
        value: "Value: " & local!currentIndex
      )
    },
    link: a!dynamicLink(
      saveInto: {
        a!save(
          local!currentIndex,
          index(
            local!indexes,
            if(
              local!currentIndex = local!indexes[length(local!indexes)],
              1,
              where(local!indexes = local!currentIndex)[1] + 1
            )
          )
        )
      }
    )
  )
)

Thanks Mike