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

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

原文链接：https://help.zoho.com/portal/en/community/topic/tip-04-how-to-dynamically-display-images-in-a-live-form




嗨，大家好，

我们希望前面的技巧对您在这里的许多人有用。我们回来了一个新的提示，它将有助于改善您的应用程序的用户体验。

是的，这是对的。今天，我们将研究如何以实时形式显示已使用其他Zoho Creator表单上传的图像。也就是说，我们将根据另一个字段中的输入自动填充“添加注释”字段中的图像。其背后的逻辑非常简单-只需存储，获取和显示。

为了更好地理解，让我们考虑一个示例应用程序，它具有两种形式：  Add Products和  New Orders。 

 




“  添加产品”表单将包含两个字段，“单行”字段用于存储产品名称，而“图像类型”字段用于存储产品图像。您可以使用“添加产品”表单提交几个示例值和图像。 

在“ 新订单” 表单中，我们将有两个字段-“添加注释”字段和“  查找”字段（产品），它们将显示从“添加产品”表单中获取的产品名称。

我们的目标是，一旦使用“查找”字段选择了产品名称，我们就需要从“添加产品”表单中获取相应的图片，并在“备注”字段中自动填充该图片。

可以按以下方式细分应用程序结构：（括号中提到了各个表格的Deluge名称及其字段）。



现在，让我们看看如何在“新订单”表单中动态显示图像。 

为此，我们需要将以下给定的代码段添加到“新订单”表单中“查找”字段（产品）的“按用户输入”工作流程中。首先，让我们根据在“查找”字段中选择的“产品”获取图像数据。
  1. img = Products[ID == input.Product].Product_Image;
接下来，让我们快速执行Null检查，以防止清除Lookup字段时不必要地执行脚本。

  1. if(img != null)
  2. {
  3. //Replacing the masked parameters with valid application specific parameters
  4. img = img.replaceAll("/sharedBy/appLinkName/",zoho.appuri);
  5. img = img.replaceAll("viewLinkName","All_Products");
  6. img = img.replaceAll("fieldName","Product_Image");
  7. img = img.replaceAll("<img ","<img height=200px width=200px ");
  8. input.plain = img;

在这里，All_Products是“添加产品”表单的列表报告的Deluge链接名称。

现在，让我们将示例数据添加到应用程序，看看从“新订单”表单的“查找”字段（产品）中选择特定产品时会发生什么。相应的图像将自动显示，如下面的屏幕快照所示。

​

注意： replaceAll函数用给定的<replacementString>替换所有与给定的<searchString>表达式匹配的字符串。单击此处了解更多信息。

希望您对如何以实时形式动态显示图像有一个不错的想法。请继续关注此空间，以获取更多此类提示。






    • 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”次。您需要做的就是创建一个列表，并使用“对于每个索引”任务对其进行特定次数的迭代。    ...

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

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

      原文链接：https://help.zoho.com/portal/en/community/topic/tip-23-how-to-create-a-custom-page-using-html 嗨伙计， 报告和仪表板可帮助您更好地分析数据并做出有意义的决策。尽管Creator可以开箱即用地处理大多数报告，但对于企业而言，拥有自己特定的报告需求并不少见。这是自定义报告或页面派上用场的时候。因此，本月我们将介绍一个简单的用例，向您展示如何使用Zoho ...