How to swap images using a button event

1

In my table I created 3 fields for 3 types of images. I then created a placeholder field for the “active” image I want to show in the APP.

In the APP I then created 3 buttons and the idea is when you click the button, it replaces the image on the page with one of the 3 fields from the table. My approach is that when they click the button, it updates a field in the table/row in the DB and refreshes the page.

The problem is when I tell use the event field (as shown in the image below) I get the error:

Invalid form
The “Update a row” action failed: One or more fields contain invalid values.
Value error for field “Active Image”: The user file name is invalid.

Question: What do I need to put in the “Active Image” field to get it to replace the image from one of my other fields? (img_case, img_pack, img_silhouette)

app screen
app screen3130×1412 305 KB

2

@frederikdc could you please help with this request?

3

I’m basically looking for the ability to swap images on an app based on some value in a cell passed from a button event or something similar. If there is a better way than my initial thought I am all ears!

4

Hi,

My first thought is to pass a querystring with id of the image. Clicking a button (or in this case a link) reloads the same page with a new id for the image.

5

@frederikdc Thank you…now if I only knew how to do that :slight_smile:

Any basic instructions/examples out there?

6

I first created a simple table Products that has 3 File fields for an image

image

Next, I create an application and a Page with the following page settings

image
image971×491 28.7 KB

The product_id is required and contains the unique id of the product

image is an optional parameter (querystring parameter) that contains the url of an image once a button is clicked

After adding 3 link elements (a button is not really required here), I set the image parameter to the corresponding image.

image
image1512×333 28.9 KB

So, I navigate to the same page, with the same product_id, but the image parameter gets the url of the first (and only) image in the Case field

Clicking a different link will set the image parameter to the image of a different field. For example the Pack field

image
image1488×308 20.5 KB

Test this in preview and clicking the link will each time reload the page with a different image

7

@frederikdc Brilliant! I got it working on my test page! Thank you so much!

Is there a way to default the image on page load?

8

Yes, if you pass the image url when opening the page. For example: if you have an overview page with a table element that contains all the instructions (or in my case products)

In the example below: the Case image will be shown by default

image
image692×938 37.9 KB

1 Like