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

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