How to dynamically display images in Zoho Creator HTML Pages

we will look at how to display an image in a page using HTML snippet that is already uploaded using another Zoho Creator form.

Now, let's see how to dynamically display images in the HTML Page.

Create a custom button in the report.

Add deluge openurl task to the custom button action (report workflow). Please note that we are passing the record id as an argument to the parameter name product_id in the url, which can be accessed in the html page.

openUrl("#page:Product_Details?product_id="+input.ID,"popup window");

Create a Page, add HTML snippet to the page. Add the parameter to page in order to access the argument passed in the url. In this case the argument passed is (record ID).

In the HTML Snippet First, let's fetch the product data based on the Product id argument passed to the page.

Next, let's do a quick a Null check to prevent the script from executing unnecessarily when the image is not available for the product.

Here, Products_Report is the Deluge link name of the list report of the Products form.

In the below snippet we are trying to fetch the image url and make it dynamic using the replaceAll function.

<%{
	fet = Products&#91;ID == input.product_id.toLong()&#93;;
	ImageURL = fet.Image.getPrefix(" lowqual");
	Imagename = fet.Image.getsuffix("/image/").getPrefix("\"");
	ImageURL = ImageURL.replaceAll("/sharedBy/appLinkName/","/file" + zoho.appuri);
	ImageURL = ImageURL.replaceAll("viewLinkName/","Products_Report/" + input.product_id.toLong() + "/");
	ImageURL = ImageURL.replaceAll("fieldName/image/","Image/image-download?filepath=");
	ImageURL = ImageURL.replaceAll("<img ","<img width=200 ");
	%>
	

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

   		 <div style="text-align:center;"> <%=ImageURL%> </div>
	
		 <table style="text-align:center;width:50%;margin-left:auto;margin-right:auto;">
  		<tr>
    	<td style="text-align:center;color:Tomato;"><b>Product Name:</td>
   	 	<td style="text-align:left"><%=fet.Product%></td>
 		</tr>
		</table>
<%

}%>

Now, upon clicking "View product" button against each product in the list report it will display the dynamic page with details corresponding to every record.

Leave a Reply Cancel reply