Basic Q: how to update and pull new image on same page

New to Appgyver and programming here.

End goal:
Create a page where center image on page changes when you click different buttons on the page. Clicking button A shows image A, clicking button C will show image C, etc. The image should update on the same page and not open up a new page.

I am looking for step by step instructions on how through the Appgyver cloud storage (hobby) to set up the database for a set of image URLs and how do you call each image to show in the same region.

I am going to guess you can call stuff through referencing an index and making some sort of array??? I’ve only seen video tutorials dealing with repeating groups and taking images or passing on an image through a page parameter.

Hi Alina, welcome to the community!

You’re right, an array of objects with the image URLs and corresponding image IDs as properties is a good way to do this. You can use AppGyver cloud storage to do this (best solution if users eventually need to be able to change the images or upload new ones or if there is a lot of images), but if the list is fairly short and doesn’t change much, you can even create it as a page variable and use “Initial values” in the right sidebar to populate it when the app opens.

In addition to the list, you will also need a page variable that reflects the chosen image ID, let’s call it currentId.

In the button components, use the “Set page variable” flow funtion after “Component Tap” on the logic canvas to change the value of currentId.

To find the right image URL as the value of currentId changes on button click, you can use the FIND formula function, something like FIND(data.imageData, item.id === pageVars.currentId).imageUrl

Bind this formula to the “Source” property of your image container to make it change as the value of the page variable changes.

Hope this helps!

1 Like