技巧23：如何使用HTML创建自定义页面

技巧23：如何使用HTML创建自定义页面

原文链接：https://help.zoho.com/portal/en/community/topic/tip-23-how-to-create-a-custom-page-using-html



嗨伙计，

报告和仪表板可帮助您更好地分析数据并做出有意义的决策。尽管Creator可以开箱即用地处理大多数报告，但对于企业而言，拥有自己特定的报告需求并不少见。这是自定义报告或页面派上用场的时候。因此，本月我们将介绍一个简单的用例，向您展示如何使用Zoho Creator中的HTML代码片段创建自定义页面。

用例：
使用“员工详细信息”表单收集员工详细信息，然后根据登录的用户以卡格式提取信息并将其显示在仪表板上。

申请流程：
1.用户使用“用户详细信息”表单输入其信息。
2.每当用户访问您的应用程序时，其数据将自动显示在仪表板中，如下所示。



步骤1：创建“用户详细信息”表单

要在仪表板上显示用户的数据，首先需要创建表单以收集详细信息，例如其姓名，年龄，电子邮件地址，电话号码，地址和个人资料图片。



用户详细信息表单上的字段：
  • 名称（单行字段）
  • 年龄（数字字段）
  • DOB（日期字段）
  • 电子邮件（电子邮件字段）
  • 电话（电话号码字段）
  • 地址（地址字段）
  • 个人资料图片（图片字段）
创建此表单后，系统将自动创建其默认列表报告，如下所示：



步骤2：使用HTML代码段创建仪表板

请按照以下步骤在Zoho Creator上创建仪表板。

1.编辑您的应用程序。
2.单击顶部显示的添加新（+）按钮。
3.选择页面。
4.选择空白。
5.将页面命名为“仪表板”，然后单击“创建页面”。然后，您将被带到页面构建器。
6.单击左侧的代码段，然后将HTML代码段拖放到您的页面上。HTML代码段编辑器将打开。
7.复制以下代码片段并将其粘贴到编辑器中。
8.单击右下角的“保存”，然后关闭HTML代码段编辑器。

该代码段的逻辑是使用每个任务的用户详细信息表单从“用户详细信息”表单中获取已登录用户的详细信息，然后使用HTML和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. %>

现在，每次用户登录时，他或她都可以在应用程序的主屏幕上找到其个人详细信息。

我们希望本技巧对您有所帮助，并且今后您将创建更多自定义的报告和页面，以帮助您更好地可视化数据。如果您遇到任何障碍，请随时与我们联系，我们将竭诚为您服务。

    • Related Articles

    • 技巧20：如何在子表单中自动填充值

      原文链接：https://help.zoho.com/portal/en/community/topic/tip-20-how-to-autopopulate-values-in-a-subform 嘿伙计， 我们知道许多人在您的应用程序中广泛使用子表单，因为它有助于您更有效地完成工作。在本技巧中，我们将向您展示如何使用称为“行”的特殊语法在子表单中自动填充值。 让我们来看一个例子。 考虑您有一个应用程序，您需要根据该应用程序在用户单击子表单中的“ ...

    • 技巧16：如何隐藏客户数据以确保隐私。

      原文链接：https://help.zoho.com/portal/en/community/topic/tip-16-how-to-mask-customer-data-to-ensure-privacy 嗨伙计，  作为用户，我们经常不愿透露我们的联系电话或电子邮件地址，因为我们不想被通讯，促销信息或销售电话所困扰。在本技巧中，我们将讨论如何只需单击几下即可屏蔽在Zoho Creator应用程序中输入的数据！ 什么是数据屏蔽？ ...

    • 技巧14：如何迭代一组Deluge代码特定次数。

      原文链接：https://help.zoho.com/portal/en/community/topic/tip-14-how-to-iterate-a-set-of-deluge-code-a-specific-number-of-times 大家好， 您可能已经知道，递归函数用于  执行特定操作特定次数。我们已经在技巧2中对此进行了详细说明。同样，还有另一种方法可以迭代一组Deluge代码“ n”次。您需要做的就是创建一个列表，并使用“对于每个索引”任务对其进行特定次数的迭代。    ...

    • 技巧4：如何以实时形式动态显示图像。

      原文链接：https://help.zoho.com/portal/en/community/topic/tip-04-how-to-dynamically-display-images-in-a-live-form 嗨，大家好， 我们希望前面的技巧对您在这里的许多人有用。我们回来了一个新的提示，它将有助于改善您的应用程序的用户体验。 是的，这是对的。今天，我们将研究如何以实时形式显示已使用其他Zoho ...

    • 技巧3：如何使用URL参数动态过滤报告

      原文链接：https://help.zoho.com/portal/en/community/topic/tip-02-how-to-dynamically-filter-reports-using-url-parameters-22-3-2018 嗨伙计， 每两个星期，作为Zoho Creator-提示和技巧系列的一部分，我们今天回来了有关如何使用URL参数过滤报告的新提示。 ...