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.

      Bootcamp
      Community
      Pricing
      Webinars
      What's New
      Integrations
      Contact Support
      Contact Sales



          Zoho Survey Resources
            Features
            Survey Templates
            Integrations
            Community
            iOS Mobile Surveys
            Pricing
            Android Mobile Surveys
            Insurvey Blogs
            Insight Blogs
            Tips & Tricks





                          Setup Zoho Bigin in 30 Minitues
                          Latest Feature Updates

                            Zoho Desk Resources

                            • Desk Community Learning Series


                            • Digest


                            • Functions


                            • Meetups


                            • Kbase


                            • Resources


                            • Glossary


                            • Desk Marketplace


                            • MVP Corner


                            • Word of the Day




                                Zoho Marketing Automation
                                  Zoho SalesIQ Resources


                                        Manage your brands on social media
                                        Access Zoho Social

                                          Zoho Pagesense Resources


                                                Zoho TeamInbox Resources

                                                  Zoho DataPrep Resources



                                                    Zoho CRM Plus Resources

                                                      Zoho Books Resources


                                                        Zoho Subscriptions Resources

                                                          Zoho Projects Resources


                                                            Zoho Sprints Resources


                                                              Qntrl Resources


                                                                Zoho Creator Resources


                                                                  Zoho WorkDrive Resources



                                                                    Zoho Campaigns Resources

                                                                      Zoho CRM Resources

                                                                      • CRM Community Learning Series

                                                                        CRM Community Learning Series


                                                                      • Tips

                                                                        Tips

                                                                      • Functions

                                                                        Functions

                                                                      • Meetups

                                                                        Meetups

                                                                      • Kbase

                                                                        Kbase

                                                                      • Resources

                                                                        Resources

                                                                      • Digest

                                                                        Digest

                                                                      • CRM Marketplace

                                                                        CRM Marketplace

                                                                      • MVP Corner

                                                                        MVP Corner

                                                                      





                                                                      




                                                                          Design. Discuss. Deliver.

                                                                          Create visually engaging stories with Zoho Show.

                                                                          Get Started Now