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.

Access your files securely from anywhere

Zoho Developer Community

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

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

Tout forum

France ZUGs

Zoho SalesIQ Resources

Sticky Posts
Introducing Creator Simplified: An exclusive learning series to enhance your app development skills
Hey Creators! Welcome to Zoho Creator's new learning series, Creator Simplified. In this series, we'll dive into real-world business use cases and explore how to translate your requirements into solutions in your Creator application. You can also expect
ANZ In-Person Zoho User Group Meetups: Focusing on Zoho Creator & Zoho Flow (September 2024)
Hello, Zoho Community! Calling all Zoho users in Australia! We're thrilled to announce the next series of Zoho User Group (ZUG) Meetups, continuing the success of our previous sessions. These meetups are a great opportunity to learn, network, and engage
[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