Tip 4: How to dynamically display images in a live form.

Hi everyone,

We hope our previous tip was useful to many of you here. We are back with a new tip that would help enhance the user experience of your app.

Yes, that's right. Today, we will look at how to display an image in a live form that is already uploaded using another Zoho Creator form. That is, we will auto-populate the image within the Add Notes field based on input in another field. The logic behind this is pretty simple — just store, fetch, and display.

To get a better understanding, let's consider a sample application that has two forms Add Products and New Orders.

The Add Products form will contain two fields, a Single line field to store the product's name and an Image type field to store the image of the product. You may submit a couple of sample values and images using the Add Products form.

In the New Orders form, we'll have two fields —an Add Notes field and also a Lookup field(Products) which will display product names fetched from the Add Product form.

Our objective here is, once a Product name is selected using the Lookup field, we need to fetch the corresponding image from the Add Products form and auto-populate it within the notes field.

The application structure can be broken down as given below: (The Deluge name of respective forms and its fields are mentioned within the brackets).

Now, let's see how to dynamically display images in the New Order form.

For that, we need to add the below given code snippet to the On User Input workflow of the Lookup field(Product) in the New Orders form. First, let's fetch the image data based on the Product selected in the Lookup field.

img = Products[ID == input.Product].Product_Image;

Next, let's do a quick a Null check to prevent the script from executing unnecessarily when the Lookup field is cleared.

if(img != null)
{
//Replacing the masked parameters with valid application specific parameters
img = img.replaceAll("/sharedBy/appLinkName/",zoho.appuri);
img = img.replaceAll("viewLinkName","All_Products");
img = img.replaceAll("fieldName","Product_Image");
img = img.replaceAll("<img ","<img height=200px width=200px ");
input.plain = img;

Here, All_Products is the Deluge link name of the list report of the Add Products form.

Now, let's add sample data to the app and see what happens when a particular product is chosen from the Lookup field (Product) in the New Order form. A corresponding image will be automatically displayed as shown in the below given screenshot.

Note: The replaceAll function replaces all the occurrence of the string that matches the given <searchString> expression with the given <replacementString>. Click here to learn more.

Hope you got a fair idea on how to dynamically display images in a live form. Keep watching this space for more such tips.

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Sticky Posts
[SESSION ENDED] Ask the Experts #07| Live Q&A: Building workflows with Blueprint in Zoho Creator |
Hello, Post the release of Zoho Creator Blueprint last month, we're happy to tell you that we'll be launching a new 'Ask the Experts' session on 16th September (Thursday) this month focussing on creating blueprints in Zoho Creator. The session will be
Zoho Creator Community Webinars | October - November 2020 [Completed]
Hello everyone, I’m happy to announce that Zoho Creator is hosting a new Community Webinar Series starting this October. This series is a learning initiative aimed at our developer community, where every session will take spotlight use cases focused on
Community Learning Webinar - Zoho Creator Blueprint & other release updates | July 29, 2021
Dear developers, This June, the Creator team unveiled a slew of updates including UI enhancements to the Detail View of reports, an new capabilities in Data Import and Connections, and most important of all, the release of Blueprint in Creator. Customize
Community Learning Webinar: Delve deep into the core concepts of Zoho Creator | 17th June, 2021
Dear developers, Every customer has unique business needs and unique problems to solve. To be able to give solutions to these problems, to get over any stumbling blocks and to be able to build applications expeditiously that tailor to specific needs,
[RECORDING: Community Webinar] | Build complex reports and documents with a Zoho Creator & Zoho Writer integration | March 23, 2021
Dear developers, Report generation is an essential activity to ensure decision makers have the best information available to be able to monitor and improve performance. Enterprises may need to generate and distribute stakeholder specific documents in