How to preview images from the sub-form entries

How to preview images from the sub-form entries

If you have an image field in your application, the uploaded image can be previewed instantly in a pop-up. This allows users to verify their uploads quickly and ensures that they have selected the correct image before finalizing the submission.
In this tutorial, we'll focus on a main form that includes a sub-form with an image field. We'll refer to this sub-form as Upload Images. Additionally, we'll utilize an extra form named Store Images to store the uploaded images temporarily. These temporarily stored images will be presented for previewing through a page, and will be automatically cleared once the form is submitted.
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.
  1. Create forms with the following fields to upload images and temporarily store the uploaded images for previewing.

    Form

    Form Link Name

    Field Type

    Field Name

    Field Link Name

    Store Image

    Store_Image

    Image

    Temp Image

    Temp_Image

    Upload Images

    Upload_Images

    Subform

    • Image

    • Decision Box

    • Lookup(Store_Image)

    Subform

    • Image

    • View

    • ID

    Subform

    • Image

    • View

    • ID

  2. Publish the report of the Store Images form. In our case, it will be All_Store_Images.

  3. Create a function to download the image for preview with the following details.
  4. Add the following script to the Deluge editor. This will get the URL of the image to preview it dynamically.
    1. string getimage(int id)
    2. {
    3.  imageRecord = Store_Images[ID = id];
    4.  if(imageRecord.count() > 0)
    5.  {
    6.   //Fetch the image record ID and path.
    7.   imageRecordId = imageRecord.ID;
    8.   imageRecordPath = imageRecord.Temp_Image;
    9.   subStringStart = imageRecordPath.lastIndexOf("image/") + 6;
    10.   subStringEnd = imageRecordPath.lastIndexOf("\" border");
    11.   imagePath = imageRecordPath.subString(subStringStart,subStringEnd);
    12.   img = "https://creator.zohopublic.com/<adminUserName>/<appLinkName>/<reportLinkName>/" + imageRecordId + "/<fieldLinkName>/image-download/<encryptedKey>/" + imagePath;
    13.  }
    14. return img;
    15.     }
      1. Substitute the variables in the preceding script with pertinent data, as indicated in the table provided below.

        <adminUserName>

        is the username of the person who owns the application.

        <appLinkName>

        is the link name of the application.

        <reportLinkName>

        is the link name of the published report.

        <fieldLinkName>

        is the link name of the field that stores the uploaded images temporarily.

        <encryptedKey>

        is the unique key that is generated while publishing the page. 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

  5. Create a page with a name Image Preview and add the following page variable. 
    1. Variable Name

      Data Type

      image_preview

      string

  6. Drag and drop the ZML snippet element into your page.
  7. Add the following script to the Deluge editor. This script will retrieve the record ID from the page variable input and then pass it to the getImage function for display.
    1. <%{
    2.    input.image = thisapp.getimage(input.image_preview.toNumber());
    3.     %>
    4. <panel elementName="Panel">
    5.      <pr width='fill' height='fill'>
    6.        <pc padding='20px' bgColor='#FFFFFF' width='100%' hAlign='center' vAlign='middle'>
    7.          <pr width='auto' height='auto'>
    8.            <pc>
    9.              <image color='#FFFFFF' bgColor='#2D2D2D' width='500px' height='400px' type='weburl' value='<%=input.image%>' size='38px' cornerRadius='0px' iconType='outline' /> </pc>
    10.          </pr>
    11.        </pc>
    12.     </pr>
    13.     </panel>
    14. <%
    15. }%>
  8. Create a workflow to execute on user input of the subform View field to preview the image.

  9. Add the following script to the Deluge editor.
    1. if(row.Image != null)
    2. {
    3.     //add your image to Store_Images
    4.     add_images = insert into Store_Images
    5.     [
    6.         Added_User=zoho.loginuser
    7.         Temp_Image=row.Image
    8.     ];
    9.     //Get last record from Temp_Images
    10.     last_added = Store_Images[ID != 0] sort by Added_Time desc;
    11.     //Populate the images new record ID into the rows look up field
    12.     row.LookupID=last_added.ID;
    13.     //Assigning the specific ID to a variable
    14.     img = Store_Images[ID == row.LookupID].ID;
    15.     if(img != null)
    16.     {
    17.         //opening the page with the record ID and page parameter
    18. openUrl("#Page:Image_Preview?image_preview=" + img,"popup window","height=auto,width=auto");
    19.     }
    20. }
  10. To hide the ID lookup field in the subform, create another workflow on load of the Upload Images form. Set the record event as Created or Edited and name the workflow as Hide field.

  11. Click Add New Action and enter the following script in the Deluge editor.
    1. hide SubForm.LookupID;
  12. To delete the temporarily stored images in the Store Images form, create a workflow on successful submission of the Upload_Images form. Set the record event as Created or Edited and name the workflow as Delete Temp Images.

  13. Click Add New Action and enter the following script in the Deluge editor.
    1. delete from Temp_Images[ID != 0];

See How It Works


  1. openUrl
  2. Add records

      Create. Review. Publish.

      Write, edit, collaborate on, and publish documents to different content management platforms.

      Get Started Now


        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 CRM Training
            Redefine the way you work
            with Zoho Workplace

              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 CRM Training

                Create, share, and deliver

                beautiful slides from anywhere.

                Get Started Now


                  Zoho Sign now offers specialized one-on-one training for both administrators and developers.

                  BOOK A SESSION







                              Quick LinksWorkflow AutomationData Collection
                              Web FormsEnterpriseOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceAccessible Forms
                              Digital FormsMarketingForms for Small Business
                              HTML FormsEducationForms for Enterprise
                              Contact FormsE-commerceForms for any business
                              Lead Generation FormsHealthcareForms for Startups
                              Wordpress FormsCustomer onboardingForms for Small Business
                              No Code FormsConstructionRSVP tool for holidays
                              Free FormsTravelFeatures for Order Forms
                              Prefill FormsNon-Profit
                              Intake FormsLegalMobile App
                              Form DesignerHRMobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic Forms
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsEncrypted Forms

                              Secure Forms

                              WCAG

                                      Create. Review. Publish.

                                      Write, edit, collaborate on, and publish documents to different content management platforms.

                                      Get Started Now






                                                        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.




                                                            Manage your brands on social media


                                                              • Desk Community Learning Series


                                                              • Digest


                                                              • Functions


                                                              • Meetups


                                                              • Kbase


                                                              • Resources


                                                              • Glossary


                                                              • Desk Marketplace


                                                              • MVP Corner


                                                              • Word of the Day


                                                              • Ask the Experts


                                                                Zoho Sheet Resources

                                                                 

                                                                    Zoho Forms Resources


                                                                      Secure your business
                                                                      communication with Zoho Mail


                                                                      Mail on the move with
                                                                      Zoho Mail mobile application

                                                                        Stay on top of your schedule
                                                                        at all times


                                                                        Carry your calendar with you
                                                                        Anytime, anywhere




                                                                              Zoho Sign Resources

                                                                                Sign, Paperless!

                                                                                Sign and send business documents on the go!

                                                                                Get Started Now




                                                                                        Zoho TeamInbox Resources





                                                                                                  Zoho DataPrep Demo

                                                                                                  Get a personalized demo or POC

                                                                                                  REGISTER NOW


                                                                                                    Design. Discuss. Deliver.

                                                                                                    Create visually engaging stories with Zoho Show.

                                                                                                    Get Started Now









                                                                                                                        • Related Articles

                                                                                                                        • FAQs: Restrict Form Entries

                                                                                                                          This page covers everything from customizing form messages to implementing Geo-fencing, empowering you with effective strategies for managing entries and enhancing security. Restrict Form Entries includes Enable Captcha, Allow one entry per user, ...
                                                                                                                        • FAQs: Form Drafts

                                                                                                                          This page covers everything you need to know about managing form drafts in Zoho Creator, from configuration and access to troubleshooting integration issues and ensuring data privacy. What are form drafts and how are they useful? Drafts allow users ...
                                                                                                                        • 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 ...
                                                                                                                        • Convert Base64 string to images

                                                                                                                          Requirement Store Base64 strings and their automatically converted corresponding images. Use Case A marketing team uses base64 strings to render images on their webpage instead of direct image files to reduce the webpage load time. So they store ...
                                                                                                                        • FAQs: Form Title - Appearance

                                                                                                                          This page covers the significance of customizing form titles, including their purpose, functionality during tasks, default behaviors, character limits, customization options for different forms, and methods for previewing user appearances. What is a ...
                                                                                                                          Wherever you are is as good as
                                                                                                                          your workplace

                                                                                                                            Resources

                                                                                                                            Videos

                                                                                                                            Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                            eBooks

                                                                                                                            Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                            Webinars

                                                                                                                            Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                            CRM Tips

                                                                                                                            Make the most of Zoho CRM with these useful tips.



                                                                                                                              Zoho Show Resources