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 |
See how it works
Related links
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Auto populate a field based on the selection from a lookup dropdown
Requirement When a value is chosen from a lookup dropdown, related values are populated in the other fields of the same form. Use Case An order management app contains a form to store order details. When the admin chooses the customer name from ...Auto-populate subform data from a form based on lookup selection
Requirements Streamline the process of retrieving and displaying relevant data by auto-populating a subform based on the value selected in a lookup field. Use Case Consider an IT asset management application used by organizations to conduct asset ...Auto-calculating values on a subform's field
Requirement Perform statistical operations on the numerical fields in subforms for analysis. Use Case In an order management application, there are two forms, Order and Product. The Product form lists all the products in the inventory and the Order ...Dynamically Display Images in Pages
Requirement Dynamically display an image stored in the form in the Zoho Creator page. Use Case Imagine a Zoho Creator task management application employed to oversee tasks within an organization. Within the Dashboard page of this application, ...Dynamically Filter Lookup Options Based on Another Lookup Field's Selection
Requirement Automate the creation of portal user accounts based on the email entered in the Zoho Creator form. Use Case Consider an IT asset management application on which an organization relies to register and monitor assets assigned to employees. ...
New to Zoho LandingPage?
Zoho LandingPage Resources