Tip 23: How to create a custom page using HTML

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.

  1. <%
  2. {
  3. fet = User_detail[Email == zoho.loginuserid];
  4. for each  i in fet
  5. {
  6. imagelnk = i.profile_pic.getSuffix("image/");
  7. imagelnk = imagelnk.getPrefix("\"");
  8. var = "https://creator.zoho.com/owner_name/sample-app/All_User_Details/" + i.ID + "/profile_pic/image-download/" + imagelnk;
  9. image = "<img src =\"" + var + "\"></img>";
  10. %>
  11.  <div class="card">
  12.                 <%=image%>
  13.                 <h1><%=i.Name%></h1>
  14.                 <p class="titlee">
  15.                 <%=i.Address.address_line_1%><br>
  16.                 <%=i.Address.district_city%><br>
  17.                 <%=i.Address.state_province%><br>
  18.                 <%=i.Address.postal_Code%><br>
  19.                 <%=i.Address.country%><br>
  20.                </p>
  21.                <div style="margin: 24px 0; ">
  22.                <a href="#"><i class="fa fa-dribbble"></i></a> 
  23.               <a href="#"><i class="fa fa-twitter"></i></a>  
  24.               <a href="#"><i class="fa fa-linkedin"></i></a>  
  25.                <a href="#"><i class="fa fa-facebook"></i></a>
  26.                </div>
  27.                <p class="email"> <%=i.Email%></p>
  28.  </div></br>
  29. <style>
  30. .card {
  31.            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  32.            text-align: center;
  33.           font-family: arial;
  34.         }
  35. .titlee {
  36.  color: blue;
  37.  font-size: 10px;
  38. }
  39. a {
  40.   text-decoration: none;
  41.   font-size: 22px;
  42.   color: black;
  43. }
  44. .email
  45. {
  46.   border: none;
  47.   outline: 0;
  48.   display: inline-block;
  49.   padding: 8px;
  50.   color: white;
  51.   background-color: black;
  52.   text-align: center;
  53.   width: 280px;
  54.   font-size: 18px;
  55. }
  56. </style>
  57. <%
  58. }
  59. }
  60. %>

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.