Change image dynamically

RE: Change image dynamically

Som — Wed, 03 Aug 2022 06:25:00 GMT

Thanks Mike

RE: Change image dynamically

Mike Schmitt — Tue, 02 Aug 2022 15:00:03 GMT

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

RE: Change image dynamically

Som — Fri, 29 Jul 2022 19:46:25 GMT

Thans mike..Can you please help me with code

RE: Change image dynamically

Mike Schmitt — Fri, 29 Jul 2022 16:13:35 GMT

[quote userid="84631" url="~/discussions/f/general/25356/change-image-dynamically/98656#98656"]Is it possible if user clicks on that card and then it will change[/quote]

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.

RE: Change image dynamically

Som — Fri, 29 Jul 2022 08:00:12 GMT

Thanks a lot buddy ..

RE: Change image dynamically

venkyuppala09 — Fri, 29 Jul 2022 06:54:31 GMT

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

RE: Change image dynamically

deepakg271869 — Fri, 29 Jul 2022 04:31:24 GMT

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.

RE: Change image dynamically

Peter Lewis — Thu, 28 Jul 2022 21:48:54 GMT

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.

RE: Change image dynamically

Som — Thu, 28 Jul 2022 21:43:43 GMT

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

RE: Change image dynamically

Mike Schmitt — Thu, 28 Jul 2022 19:53:36 GMT

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.

RE: Change image dynamically

Som — Thu, 28 Jul 2022 18:59:40 GMT

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

RE: Change image dynamically

Stefan Helzle — Thu, 28 Jul 2022 18:57:09 GMT

Should this happen automatically or triggered by a user interaction? If automatically, what is your use case?

RE: Change image dynamically

Som — Thu, 28 Jul 2022 18:55:55 GMT

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.

RE: Change image dynamically

Stefan Helzle — Thu, 28 Jul 2022 18:37:51 GMT

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