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%>
- <%
- }%>
See How it Works
Related Links
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 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 Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
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.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
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 ...Understanding portal pages
This help page is for Creator 6 users with portals created before June 1, 2026. For portals created later, refer to this document to learn about the latest version of portal page customization. If you are on Creator 5, refer to this document. Know ...Customizing portal pages
This help page is for Creator 6 users with portals created after June 1, 2026. For portals created earlier, refer to this document to learn about the older version of portal page customization. If you are on Creator 5, refer to this document. Know ...Understanding panels
In a nutshell Panels are visual containers embedded in pages and are used to display key information, such as dynamic metrics, statuses, and KPIs in a structured and visually appealing format. They help users grasp critical insights from the ...Understanding portal pages
This help page is for Creator 6 users with portals created after June 1, 2026. For portals created earlier, refer to this document to learn about the older version of portal page customization. If you are on Creator 5, refer to this document. Know ...
New to Zoho LandingPage?
Zoho LandingPage Resources