Dynamically Display Images in Pages
Requirement
Dynamically display an image stored in the form in the Zoho Creator page.
Use Case
Imagine a Zoho Creator task management application employed to oversee tasks within an organization. Within the Dashboard page of this application, employees accessing the application will find their profile photo displayed based on their login email address. This provides a personalized and visually appealing user experience.
Steps to follow
- Create a form with the following details to record employee details.
Form Name
Form Link Name
Field Type
Field Name
Fied Link Name
Employee Details
Employee_Details
Name
Employee Name
Employee_Name
Email
Email
Email
Date
Date of Birth
Date_of_Birth
Phone
Phone
Phone
Address
Address
Address
Single Line
Employee ID
Employee_ID
Image
Photo
Photo
- Create a page named 'Dashboard' for the employees to view the tasks and its status upon accessing the application. Add required components according to your preferences. Refer to this link to view how to construct a dashboard for task management application as shown below.
- Drag and drop the HTML snippet into your Dashboard Page.
- Add the following script in the HTML snippet.
- <%{
- //Fetch the image URL of the employee photo uploaded in the Photo field of the Employee Details form with respect to the login user ID.
- image_link = Employee_Details[Email == zoho.loginuserid].Photo;
- //If the employee photo is fetched, replace the parameters in the fetched image URL.
- if(image_link!=null)
- {
- //Replace the parameters in the fetched image URL with the actual values using replaceAll() function.
- image_link = image_link.replaceAll("https://creatorexport.zoho.com/sharedBy/appLinkName/","https://creator.zoho.com" + zoho.appuri)
- image_link = image_link.replaceAll("viewLinkName","All_Employee_Details");
- image_link = image_link.replaceAll("fieldName","Photo");
- //Add the preferred HTML attributes at the end of the URL.
- image_link = image_link.replaceAll(">","width=\"140\" height=\"140\" style=\"display: flex; justify-content: center; align-items: center;\">");
- }
- //If the employee photo from the record is not fetched populate the snippet with default image.
- else
- {
- //Specify the public URL of the preferred image inside the <img> tag to display it as defauly when the record cannot be fetched.
- image_link = "<img src=\"https://desk.zoho.com/portal/api/kbCategory/4000000217879/logo/327583000026924010?orgId=4241905\" \"width=\"140\" height=\"140\" style=\"display: flex; justify-content: center; align-items: center;\">";
- }
- %>
- <%=image_link%>
- <%
- }%>