How to display images dynamically on a subform row based on the lookup field selection
The images stored in a form can be retrieved and displayed dynamically within subforms. When users select a record from a lookup field in a subform row, relevant images associated with that record can appear in a designated rich text field within the same row. This functionality enhances the user experience by providing a visual reference for each selection, ensuring that users can quickly identify items without needing to navigate to separate views or records.
This can be useful in the cases of order management where the user can place an order by selecting the preferred product from the lookup field. The relevant image will be shown in the rich text field of the same row.
In this tutorial, we'll focus on creating two forms, Store Images and Display Images. The Store Images form will include an image field to store images and a single-line field to record a reference name for each image. The Display Images form will have a subform containing a lookup field to select a reference name from the Store Images form. Based on this lookup selection, the corresponding image will be displayed dynamically within the subform.
Note: The report from the Store Images form will be published to obtain an encrypted key. This key will be used within a function to facilitate image previewing.
- Create forms with the following details to display image dynamically on a subform row based on the lookup field selection.
Form
Form Link Name
Field Type
Field Name
Field Link Name
Store Image
Store_Image
Single Line
Reference Name
Reference_Name
Image
Image
Image
Display Images
Display_Images
Subform
Lookup(Store Image)
Rich Text
Subform
Image Reference Name
Image Preview
Subform
Image_Reference_Name
Image_Preview
- Publish the report of the Store Images form. In our case, it will be Store Images Report.
- Create a workflow to execute on the user input of the Image Reference Name field in the subform of the Display Images form. Select the Record Event as created or edited. This workflow will fetch the image from the Store Images form and previews it in the Rich Text field based on the Image Reference Name selected in the subform of the Display Images form.
- Click Add New Action and add the following script in the Deluge editor.
Note: Uncheck all toolbar options in the field properties of the rich text field to hide its toolbar when accessed by the user.if(row.Reference_Name != null)
- {
- //Fetch the image record from the Store Images form by matching the ID in the Reference Name Lookup selection.
- fetch_Record = Store_Images[ID == row.Image_Reference_Name];
- //Fetch the Image URL
- fetch_imageUrl = fetch_Record.Image;
- //Constrct the Public URl for the image.
- subStringStart = fetch_imageUrl.lastIndexOf("image/") + 6;
- subStringEnd = fetch_imageUrl.lastIndexOf("\" border");
- imagePath = fetch_imageUrl.subString(subStringStart,subStringEnd);
- Public_image = "https://creator.zohopublic.com"+zoho.appuri+"Store_Images_Report/" + row.Image_Reference_Name + "/Image/image-download/<encryptedKey>/" + imagePath;
- // Populate the image in the rich text field.
- row.Rich_Text="<img src=" + img + " width='100' height='100'>";
- }
Where,
<encryptedKey> | is the unique key that is generated while publishing the report. It can be located within the URL of the published report. For example, in the following publish URL: https://creatorapp.zohopublic.com/zylker/it-asset-tracker/report-perma/All_Store_Images/nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt the encrypted key is as follows: nDm8eJMv4TTKMd1qOZnqA0Je8dj90rW0CbQZBBPZxZd6fM02GmuUnPa962bDKWPXmnJ8vEMdF7rpWgM3jhRb6SR8kd213G2b4nbt |