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

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.
  1. 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.

  1. if(img != null)
  2. {
  3. //Replacing the masked parameters with valid application specific parameters
  4. img = img.replaceAll("/sharedBy/appLinkName/",zoho.appuri);
  5. img = img.replaceAll("viewLinkName","All_Products");
  6. img = img.replaceAll("fieldName","Product_Image");
  7. img = img.replaceAll("<img ","<img height=200px width=200px ");
  8. 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.