low==dfn 为割点_如何为您的Corteza Low Code应用程序创建用户界面-CSDN博客

low==dfn 为割点

在本系列的前两篇文章中，我解释了如何使用Corteza Low Code 创建一个应用程序来跟踪捐赠并使用模块和字段设置其数据结构。在第三篇文章中，我将解释如何创建“捐赠”应用程序的图形部分。

Pages是Corteza低代码的HTTP Web层。为了使设计更舒适，并确保您的应用程序默认情况下具有响应能力和移动就绪性，Pages是内置块。每个块都可以调整大小并拖动到所需位置。在所有块中，您可以定义标题，描述和布局。

页面有两种类型：记录页面（显示单个记录或与之相关的数据）和列表页面（显示多个记录的可搜索列表）。每种类型如下所述。

记录页面

没有“记录”页面的模块无法执行任何操作。要将数据存储在模块内部，您需要创建一个“记录”页面并将其添加到模块中，方法是选择“ 模块”页面上的相应“ 页面构建器”按钮。这将打开拖放页面编辑器。

“捐赠”应用程序具有四个模块，每个模块都有“ 页面”构建器链接：

首先，为“ 联系人”模块创建记录页面。当您单击“ 页面”构建器链接时，将打开一个空白记录页面。使用+添加块按钮添加块 。

有多种可用的块类型。

“捐款”应用程序中的“联系”记录页面使用两种块类型：记录和记录列表 。

记录块

记录块是“记录”页面上最重要的块。您可以选择块的布局以及要显示的字段。 联系人记录页面需要显示：姓名， 电子邮件 ，电话和地址。选择这些字段并点击Save and close ，将添加该块。

查看记录时，这些字段的值显示为字符串，添加或编辑记录时，这些字段变为表单输入字段。

提示：您可以拖放字段并将其以您喜欢的任何顺序放置。

记录列表块

联系人页面将显示每个联系人已提供的捐赠列表。通过选择“ 记录列表”块来创建记录列表 。

以捐赠为标题，然后在模块字段中选择ContactDonation模块。选择模块后，将自动填充可用的列，并且您可以选择要在“ 记录”列表中显示的列： Donation ， Project和Created at的系统字段。

如果您现在保存了“ 记录”列表块，您将看到所有联系人的所有捐款。因为要显示与单个联系人记录相关的捐赠，所以需要添加prefilter 。

Prefilter records字段允许简化SQL“ Where”条件，并评估$ {recordID} ， $ {ownerID}和$ {userID}之类的变量（如果可用）。对于“ 记录”列表 ，您想按联系人过滤ContactDonation记录，因此需要填写： $ {recordID} = contactId 。注意： contactId是模块ContactDonation中的Record字段。请回顾本系列的第二篇文章，以获取有关链接模块的更多信息。

您还希望能够按日期对联系人的捐款进行排序。可以在Presort records字段中通过插入createdAt DESC来完成 。该字段支持按条件语法简化SQL Order 。

您也可以选择隐藏或显示“ 新记录”按钮和“搜索”框，还可以定义显示的记录数。最佳做法是将此数字调整为块的大小。

要保存该块并将其添加到页面，请单击“ 保存并关闭” 。现在，第二个块已添加到页面。

其他块类型

其他块类型为：

内容：此块允许您添加固定文本，您可以使用富文本编辑器创建该文本。这是“帮助”文本或资源链接（例如Intranet上的销售手册）的理想选择。
图表：插入使用图表构建器创建的图表。在创建仪表盘时，这非常有用。
社交媒体供稿：您可以在此处显示来自Twitter的实时内容-固定的Twitter供稿（显示在所有记录中）或来自表示Twitter链接的Module字段（使每个记录都有自己的供稿）。
自动化：在此块中，您可以添加具有手动触发器且可用于该模块的自动化规则，以及不具有主模块的自动化规则。它们以按钮的形式显示给最终用户。您可以通过插入自定义文本并选择样式来设置自动化规则按钮的格式，并可以通过拖放操作更改它们的顺序（当您具有多个按钮时）。
日历：此块插入一个日历，该日历可以以下格式显示：
- 月
- 月议程
- 周日程
- 日程
- 月份清单
- 周清单
- 天清单
日历的来源是来自一个或多个模块的记录列表。对于每个来源，您可以选择哪个字段代表事件的标题，开始日期和结束日期。
文件：您可以上传文件并将其显示在页面上。就像Content块一样，该块的内容对于所有记录都是相同的。要具有与记录相关的文件，在模块中创建字段时需要使用“ 文件”字段类型。

接下来，在“捐赠”应用程序中添加其他模块的“记录”页面。完成此操作后，您将在Pages下看到以下列表：

更改页面布局

在将页面添加到页面（例如，“ 联系人”模块的“记录”页面中的“ 联系人详细信息”和“ 捐赠 ”页面）之后，您可以调整其大小和位置，以创建所需的布局。

最终结果是：

默认情况下，Corteza Low-Code是响应式的，因此这些块将在具有小屏幕的设备上自动调整大小和位置。

列出页面

列表页面与任何单个记录都不相关；而是显示记录列表。此页面类型用于创建主页，联系人列表，项目列表，仪表板等。列表页面很重要，因为您不能在不查看列表的情况下输入新记录，因为“ 添加新记录”按钮显示在列表上。

对于“捐赠”应用程序，创建以下列表页面：主页， 联系人和项目。

要创建列表页面，您需要转到页面管理页面，并在顶部的创建新页面框中输入标题。提交此表单时，它将打开“ 编辑页面”表单，该表单允许您添加页面说明（供内部使用；最终用户将看不到它），并且可以将页面设置为“ 启用”以便可以访问它。

您的页面列表现在看起来像：

您可以拖放以将其重新排列为：

重新排列页面使维护应用程序更加容易。它还允许您生成应用程序菜单结构，因为列表页面（而不是记录页面）显示为菜单项。

向每个“列表”页面添加内容与向“记录”页面添加块完全相同。唯一的区别是您无法选择“ 记录”块类型（因为它与单个记录有关）。

Corteza低码应用程序中的菜单由管理页面Pages上的页面树自动生成。它仅显示列表页面，而忽略记录页面。

要对菜单重新排序，只需按所需顺序将页面拖放到页面树中。

添加图表

每个人都喜欢图表。如果图片价值1000字，那么您可以在Corteza中创建一个无价的应用程序。

Corteza Low-Code附带有一个图表构建器，可让您构建折线图，条形图，饼图和甜甜圈图：

Chart types available in Corteza Low Code

例如，添加一个图表，显示每个项目已收到多少捐款。首先，在管理菜单中进入“ 图表”页面。

要创建新图表，请使用创建新图表字段。

在图表构建器内，您将找到以下字段：

名称：输入图表名称；例如，捐赠。
模块：这是向图表提供数据的模块。
过滤器：您可以选择一种预定义的过滤器，例如今年创建的记录 ，也可以添加任何自定义过滤器（例如status =“ Active” ）。
维度：这些可以是“ 日期时间”和“ 选择”字段。日期时间字段允许分组（例如，按天，按周，按月）。 “ 跳过缺少的值”选项非常方便，可以删除将返回空值的值（例如，数据不完整的记录），并且“ 计算可以显示多少标签可以避免标签重叠”（这对于在X轴上具有多个日期的图表很有用）。
指标：指标是数字字段，具有预定义的计数选项。您可以添加多个度量单位，并为每个度量单位赋予不同的标签，字段（源），函数（COUNTD，SUM，MAX，MIN，AVG或STD，如果可能），输出（线条或条形）和颜色。

此示例图表使用ContactDonation模块并显示每天的总捐款。

最后一步是将图表添加到页面。将此图表添加到主页：

在管理菜单中输入页面。
单击主页上的页面构建器链接。
添加图表类型的页面块，添加块标题，然后选择图表。
调整大小并重新定位一个或多个块，以使布局看起来不错。

保存页面并输入捐赠应用程序（通过右上方的“ 公共页面”链接）时，您将看到带有图表的主页。

添加自动化

自动化可以使您的Corteza Low Code应用程序更高效。使用自动化工具，您可以创建业务逻辑，以便在创建，更新或删除记录时自动评估记录，也可以手动执行规则。

触发器用JavaScript编写，JavaScript是世界上最常用的编程语言之一，使您能够编写简单的代码来评估，计算和转换数据（例如数字，字符串或日期）。 Corteza Low Code带有额外的功能，使您可以访问，创建，保存或删除记录。寻找用户；通过电子邮件发送通知；使用Corteza消息传递；和更多。

Corteza CRM具有广泛的自动化规则集，可以用作示例。他们之中有一些是：