技巧19：如何使用ZML代码段在Pages中显示图像

技巧19：如何使用ZML代码段在Pages中显示图像

原文链接：https://help.zoho.com/portal/en/community/topic/tip-19-how-to-display-images-in-pages-using-zml-snippets



嗨伙计，

关于如何使用Zoho标记语言（ZML）在Zoho Creator中创建交互式页面的另一个提示，我们回来了。您可以使用ZML代码片段向页面添加各种组件，并以有意义的方式构造它们。但是，这还不是全部-使用ZML，您可以确保您的应用程序自动与各种设备兼容，而不会出现任何不一致之处。

我们经常从用户那里获得有关如何在ZML代码中调用Deluge脚本的问题。这是一个向页面添加图像的简单用例：

第1步

首先，我们需要创建一个函数来帮助我们检索存储在应用程序中的图像。我们需要做的就是获取包含图像的记录的RECORD ID，生成图像的下载URL，并在ZML代码段中使用它。


  1. string getImage(int id)
  2. {
  3. fet = images[ID == id];
  4. var = fet.Image.getSuffix("downqual = \"").getSuffix("image/").getPrefix("\"");
  5. img = "https://creatorexport.zoho.com/file/<app_owner>/<app_name>/<report_linkname>/" + fet.ID +       "/<image_field_linkname>/image-download?filepath=/" + var;
  6. return img;
  7. }




第2步

接下来，您可以转到页面构建器，拖放ZML面板，并调用上面的函数（getImage），在其中将ID传递给该函数以检索图像的URL。


  1. <%
  2. {
  3. x = thisapp.getImage(id); //page param with ID is "id"
  4. %>
  5. <panel>
  6. <pr height='fill' width='fill'>
  7. <pc width='100%' bgColor='#FFFFFF' padding='20px' hAlign='center' vAlign='middle'>
  8. <pr height='auto' width='auto'>
  9. <pc>
  10. <pr>
  11. <pc>
  12. <image color='#FFFFFF' bgColor='#0ABB51' width='1000px' height='1250px' imageType='weburl' value='<%=x%>' /> </pc>
  13. </pr>
  14. <pr>
  15. <pc>
  16. <text type='Text' value='120' size='8' color='#0ABB51' bold='true' marginTop='3px' textAlign='center'> </text>
  17. </pc>
  18. </pr>
  19. <pr>
  20. <pc>
  21. <text type='Text' value='Open tickets today' size='3' color='#333333' marginTop='3px' textAlign='center'> </text>
  22. </pc>
  23. </pr>
  24. </pc>
  25. </pr>
  26. </pc>
  27. </pr>
  28. </panel>
  29. <% 
  30. }
  31. %>



如果您想了解有关ZML的更多信息，请查看我们的ZML  指南，其中涵盖了您的所有基础知识。

我们希望这篇文章有用！如果您有任何疑问，请随时在下面的评论中提问，我们很乐意尽快解决！

下次再见，还有更多有趣的创作者提示！



    • 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参数过滤报告的新提示。 ...