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.






            Zoho Pagesense Resources

              Zoho SalesIQ Resources



                    Zoho TeamInbox Resources

                      Zoho DataPrep Resources



                        Zoho CRM Plus Resources

                          Zoho Books Resources


                            Zoho Subscriptions Resources

                              Zoho Desk Resources

                                Zoho Projects Resources


                                  Zoho Sprints Resources


                                    Qntrl Resources


                                      Zoho Creator Resources


                                        Zoho WorkDrive Resources




                                            Zoho Campaigns Resources

                                              Zoho CRM Resources

                                                      Design. Discuss. Deliver.

                                                      Create visually engaging stories with Zoho Show.

                                                      Get Started Now


                                                        Zoho Show Resources