Tip 23: How to create a custom page using HTML

Hi folks,

Reports and dashboards help you analyze your data better and make meaningful decisions. And while Creator handles most reporting right out of the box, it's not uncommon for a business to have its own particular reporting needs. That's when custom reports or pages come in handy. So this month, we wanted to cover a simple use case to show you how you can create a customized page using HTML snippets in Zoho Creator.

Use case:

Employee details are collected using the Employee Details form, and then the information is fetched and displayed on the dashboard in a card format, based on the user who's logged in.

Application flow:

1. Users enter their information using the User Details form.

2. Whenever users access your application, their data will automatically be displayed in the dashboard, as shown below.

Step 1: Creating the User Detail form

To display your user's data in the dashboard, you'll first need to create the form to collect details like their name, age, email address, phone number, address, and profile picture.

Fields on the User Details form:

Name (Single line field)
Age (Number field)
DOB (Date field)
Email (Email field)
Phone (Phone number field)
Address (Address field)
Profile pic(Image field)

Once you create this form, the system will automatically create its default list report as shown below:

Steps 2: Create the dashboard using an HTML snippet

Follow the below-given steps to create dashboard on Zoho Creator.

1. Edit your app.

2. Click the Add New (+) button displayed at the top.

3. Select Page.

4. Select Blank.

5. Name the page "Dashboard," then click Create Page. You'll be then taken to the page builder.

6. Click Snippets on the left, then drag and drop the HTML snippet on to your page. The HTML snippet editor will open.

7. Copy the below code snippet and paste it in the editor.

8. Click Save at the bottom-right corner, then close the HTML snippet editor.

The logic behind this code snippet is to fetch the details of the logged-in user from the User Details form using the for each task, then display it in the required format using HTML and CSS.

<%
{
fet = User_detail[Email == zoho.loginuserid];
for each i in fet
{
imagelnk = i.profile_pic.getSuffix("image/");
imagelnk = imagelnk.getPrefix("\"");
var = "https://creator.zoho.com/owner_name/sample-app/All_User_Details/" + i.ID + "/profile_pic/image-download/" + imagelnk;
image = "<img src =\"" + var + "\"></img>";
%>
<div class="card">
<%=image%>
<h1><%=i.Name%></h1>
<p class="titlee">
<%=i.Address.address_line_1%><br>
<%=i.Address.district_city%><br>
<%=i.Address.state_province%><br>
<%=i.Address.postal_Code%><br>
<%=i.Address.country%><br>
</p>
<div style="margin: 24px 0; ">
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</div>
<p class="email"> <%=i.Email%></p>
</div></br>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
text-align: center;
font-family: arial;
}
.titlee {
color: blue;
font-size: 10px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
.email
{
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: black;
text-align: center;
width: 280px;
font-size: 18px;
}
</style>
<%
}
}
%>

Now, everytime a user logs in, he or she can find their personal details on the home screen of the application.

We hope this tip was useful and going forward you will create more customized reports and pages that will help you visualize your data better. If you hit any roadblocks, feel free to reach out to us and we would be most happy to assist you.

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Sticky Posts
Introducing Creator Simplified: An exclusive learning series to enhance your app development skills
Hey Creators! Welcome to Zoho Creator's new learning series, Creator Simplified. In this series, we'll dive into real-world business use cases and explore how to translate your requirements into solutions in your Creator application. You can also expect
ANZ In-Person Zoho User Group Meetups: Focusing on Zoho Creator & Zoho Flow (September 2024)
Hello, Zoho Community! Calling all Zoho users in Australia! We're thrilled to announce the next series of Zoho User Group (ZUG) Meetups, continuing the success of our previous sessions. These meetups are a great opportunity to learn, network, and engage
[SESSION ENDED] Ask the Experts #07| Live Q&A: Building workflows with Blueprint in Zoho Creator |
Hello, Post the release of Zoho Creator Blueprint last month, we're happy to tell you that we'll be launching a new 'Ask the Experts' session on 16th September (Thursday) this month focussing on creating blueprints in Zoho Creator. The session will be
Zoho Creator Community Webinars | October - November 2020 [Completed]
Hello everyone, I’m happy to announce that Zoho Creator is hosting a new Community Webinar Series starting this October. This series is a learning initiative aimed at our developer community, where every session will take spotlight use cases focused on
Community Learning Webinar - Zoho Creator Blueprint & other release updates | July 29, 2021
Dear developers, This June, the Creator team unveiled a slew of updates including UI enhancements to the Detail View of reports, an new capabilities in Data Import and Connections, and most important of all, the release of Blueprint in Creator. Customize