Dynamic Image Display on Selection in Detail View

[Islom]

Hi everyone,

In a custom verification dashboard, we’re displaying multiple product images in an inline gallery. I’d like to achieve the following behavior:

• When a user selects an image from the gallery, the large preview on the right (Detail view (image is in background)) should either update dynamically to show the selected image,

• Or, if the background image in the Detail view cannot be updated dynamically, then the image preview section should scale responsively, large enough to show full visual details.

Is there any recommended way to implement this behavior, either via dynamic image referencing or configurable image sizing for better visibility? Thanks in advance for any suggestions.

[Islom]

Can SVGs help?

[Denzil_Snyman]

I have not found way to use SVG and an column using Image URL.

But using a Detail View with a longtext set to HTML would work but still limited to width of detail block 

'<img src="Your_Image_URL" >'

Make sure that a full URL is used for image. Note portrait images show nice but landscape limited to design width of block. 

 

[Denzil_Snyman]

@Islom this is only way I know.

 

 

[Islom]

Great, I will test it out.

[a_aleinikov]

Hi @Islom ,

Good question!

– Yes, you can achieve dynamic image updates by binding the Detail View image column to a value that updates when a user selects an item in the inline gallery (for example, using a LINKTOFILTEREDVIEW or setting a selected row’s image column).

– If dynamic background updates aren’t possible, you can use a separate image preview section with a larger display, making sure it’s sized using AppSheet’s format rules or UX layout options to maximize clarity.

Check the gallery’s action settings to trigger updates or pass selected image data to the detail context.

[Islom]

Thanks, @a_aleinikov , for your response. However, the issue is with dynamic sizing, the built-in formatting in AppSheet does not maintain truly dynamic sizing. It adjusts the image to predefined sizes like Large, Medium, or Small, which doesn’t solve the problem. Also, thanks for the LINKTOFILTEREDVIEW tip, I’ll make use of it. Unfortunately, setting a selected row’s image column didn’t work.