Preview product image based on selection form choice component

Is there a way to view image based on the selection form choice component, the idea is to populate a row with the product, qty, and name to a project, however, to let the user know they have selected the correct item for the choice component I would like the user to preview the product using the image before submitting their selection.

Yes. You’ll need a relation column from the choice component column to the list of items. Then create a lookup column of the image. Then display the image in an image or title component on the same screen as the choice component.

1 Like

Thank you…

I did so, that but my image is pulling an image carousel instead of one image related to the selected choice. failing to understand what I did wrong.

Meanwhile…I was hoping that when a user selects the choice, it won’t be written in any of the sheets until the user is satisfied with his previewed products and hits submits his selection together with its respective details (quantity)

Below is screenshot of the page…its a details screen

Screenshot 2021-09-04 220350|259x500

Is your lookup using the entire sheet or the relation as it’s source? If it’s using the relation, is the relation relating to multiple rows? If so, you may want to reconsider how you are building that relation from the choice component, so it’s not such a broad category and more specific to one item.

You can have the the choice write to a user specific column. It will only hold the choice temporarily. Once you click submit, you can write the relative info to whichever sheet you want and then clear the user specific choice, so it’s ready for the next search.


This worked perfectly…many thanks, Jeff. You are a star!
Just this one question, how do I clear the user-specific columns for the next search?

You can clear it by adding another action when you press a button, like your “add to project” button, or if you are clicking a button or some other component to enter that screen, you can do the clear there, or you could add another button to clear the the user always column. You have a few options for when to clear it depending on when you want it to happen.

Ok thank you. I tried using the delete row action but that only deletes the row in the sheet till I cant add anything more to the project…lol.

I’ll keep searching for what can work

No, you don’t want to delete the row. Just use a Set Column action to clear the column.

1 Like

Ook…I have tried that but not working. I suppose it’s the way I configured my action.

I would probably move the Set Column action before the Go to Tab action. You want to add the row, clear the values, then continue on to the other tab. That tab is a different screen from the one with the button, correct?

Also, can you show your settings for the Set column action, just to make sure it’s configured correctly?

1 Like

Okay, let me try that…
Actually using the set columns for the first time. I often wondered what it does thanks,

Here is what it looks like now

Initially, I hadn’t seen the Clear value option, there were all set as custom like the bottom 3 in the pic but they are now all set to clear value and working.

The other tab is the same screen from which I browse for the desired product, set quantity, and submit to the project list.

Many thanks, you’re the best!

It probably doesn’t matter, but if you are going back to the same screen you were on when you pressed the button, then you probably don’t need the Go to Tab action, since you are already on that tab.

Looking at your Clear Values, I’m not sure why you are clearing email, category, and project. Wouldn’t you want to clear component selection and qty instead, since those are your search values??? Maybe I’m misunderstand your app flow. I guess what I’m assuming is that you want to select a product and quantity, then add the row, then clear those search values so you can add another product.

1 Like

I get you now.
I’m learning a lot from all your responses, I actually did think the go back option was necessary and yes I want to return to the page with the button.

For clear values yes I now also think its best to leave those other details as they are and clear the variables.

Jeff, you have been most helpful.
Many thanks!

1 Like

We don’t call him Chuck for nothing :wink:


Hie Jeff,

One more thing…the products I’m adding have to fall under the same project name from which I got the button that got me to the add product page in the first place.

How can I ensure that the project name is carried to make sure that on submission of each product, the project name is submitted as well in its own respective column like what would happen if it was in a form.

Thanks in advance

Sounds like you need to add a user-specific column to house the temporary project name for your submission.

You can use a set column at the start of your flow to set the project name to that user-specific column, and in your last button, add that info alongside other things to the destination Sheet.

1 Like

How do I get the 1st button to carry that information forward? If I try to configure the 1st button to set column the value, it can only set values for the sheet relevant to the tab i.e the Projects tab but I want to set the value in the different column linked to the components tabe

You’d need to build a relation single from your projects tab to the components tab. Then in your set column values action choose the newly created relation instead of “this item”

I suppose the challenge is that there is nothing to relate both tabs with since the components tabs is primarily blank until the user selects the component to add…

Many thanks though

Your can build a relation out of anything. It can be as simple as a template column in each table with the letter ‘X’. That’s enough to build a relation to link one table to another.

But…aren’t you already viewing a details screen for the project? I would think it should be available to you in your add row, but I also don’t completely understand your app and data layout, so I’m just guessing.

1 Like