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
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:
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?
Zoho DataPrep Resources
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
Having Images as choices for a question
Requirement A form containing questions must have multiple choices in image format as answers for each question. Use Case A brain-teaser application is built that has a Questions form, which lists all kinds of questions. A question has multiple ...Understand Pages
1. What Does This Page Cover? Learn about pages and how they are used to create user-friendly, customized dashboards for your applications. Via these dashboards, you can display dynamic elements and visually represent the data stored in Creator. 2. ...Understand Portal Pages
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. What Does This Page Cover? Learn about the Sign Up, Sign In, and Reset Password pages of your portal. They act as the input ...Customized search component for report data, using pages
Requirement Provide a search component for users to search for the required data. Data is fetched from reports based on the search keyword. Use Case A library or a book management system wants to allow for searching. Any customer who ...Limitations: Pages
General An HTML snippet can only contain up to approximately 500 KB code or 450,000 characters. When you download a page as PDF and if the resulting PDF it has reports embedded in the page, the PDF will show only the records visible within the ...
New to Zoho LandingPage?
Zoho LandingPage Resources