如何为您的 Corteza 低代码应用程序创建用户界面

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

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

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

记录页面

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

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

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

有多种块类型可用。

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

记录块

记录块是记录页面最重要的块。您可以选择块的布局以及要显示的字段。联系人记录页面需要显示：姓名、电子邮件、电话和地址。选择这些字段并点击 保存并关闭，块将被添加。

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

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

记录列表块

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

将捐赠作为标题，并在模块字段中选择 联系人捐赠 模块。选择模块后，可用列会自动填充，您可以选择要在记录列表中显示的列：捐赠、项目和系统字段创建于。

如果您现在保存 记录列表 块，您将看到来自所有联系人的所有捐赠。因为您想显示与单个联系人记录相关的捐赠，所以您需要添加预过滤器。

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

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

您还可以选择隐藏或显示 新建记录 按钮和搜索框，并且可以定义显示的记录数。最佳实践是将此数字调整为块的大小。

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

其他块类型

其他块类型包括

• 内容： 此块允许您添加固定文本，您可以使用富文本编辑器创建该文本。这非常适合“帮助”文本或资源链接，例如 intranet 上的销售手册。
• 图表： 插入已使用图表构建器创建的图表。这在创建仪表板时非常有用。
• 社交媒体源： 您可以在此处显示来自 Twitter 的实时内容——可以是固定的 Twitter 源（在所有记录中显示），也可以是来自模块字段的 Twitter 链接（使每个记录都有自己的源）。
• 自动化： 在此块中，您可以添加具有手动触发器且可用于模块的自动化规则，以及没有主模块的自动化规则。它们作为按钮向最终用户显示。您可以通过插入自定义文本并选择样式来格式化自动化规则按钮，并且可以使用拖放来更改它们的顺序（当您有多个按钮时）。
• 日历： 此块插入日历，可以以下列格式显示
  • 月
  • 月议程
  • 周议程
  • 日议程
  • 月列表
  • 周列表
  • 日列表

  日历的来源是一个或多个模块的记录列表。对于每个来源，您可以选择哪个字段表示事件的标题、开始日期和结束日期。

• 文件： 您可以上传文件并在页面上显示它。就像 内容 块一样，此块的内容对于所有记录都是相同的。要拥有与记录相关的文件，您需要在模块中创建字段时使用 文件 字段类型。

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

更改页面布局

将块添加到页面后，例如 联系人 模块的记录页面中的 联系人详细信息 和 捐赠 块，您可以调整它们的大小和位置以创建您想要的布局。

最终结果是

Corteza 低代码默认是响应式的，因此这些块将在小屏幕设备上自动调整大小和重新定位。

列表页面

列表页面与任何单个记录无关；相反，它们显示记录列表。此页面类型用于创建主页、联系人列表、项目列表、仪表板等。列表页面很重要，因为如果您不查看列表就无法输入新记录，因为 添加新记录 按钮显示在列表上。

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

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

您的页面列表现在将如下所示

您可以拖放以重新排列为

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

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

创建菜单

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

要重新排序菜单，只需在页面树中将页面拖放到所需的顺序即可。

添加图表

每个人都喜欢图表和图形。如果图片胜过千言万语，那么您可以在 Corteza 中创建一个无价的应用程序。

Corteza 低代码附带一个图表构建器，允许您构建折线图、条形图、饼图和甜甜圈图

例如，添加一个图表，显示每个项目收到的捐赠数量。首先，进入管理菜单中的 图表 页面。

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

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

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

此示例图表使用 联系人捐赠 模块，并显示每天的总捐赠额。

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

• 进入管理菜单中的 页面。
• 单击 主页 的 页面构建器 链接。
• 添加类型为 图表 的页面块，添加块标题，然后选择图表。
• 调整块（或多个块）的大小和位置，使布局看起来美观。

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

图片来源

opensource.com

添加自动化

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

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

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

• 帐户：创建新案例
• 帐户：创建新商机
• 案例：插入案例编号
• 合同：将合同发送到自定义电子邮件
• 潜在客户：将潜在客户转换为帐户和商机
• 商机：应用价格手册
• 商机：生成新报价
• 报价：提交报价以供批准

关于如何使用自动化模块的完整手册以及代码示例正在开发中。

部署应用程序

部署 Corteza 低代码应用程序非常简单。一旦启用，它就会被部署并在 Corteza 低代码命名空间菜单中可用。部署后，您就可以开始使用您的应用程序了！

更多信息

正如我在本系列第 1 部分和第 2 部分中提到的，本系列中创建的完整捐赠应用程序可在 Corteza 社区服务器 上找到。您需要登录或创建一个免费的 Corteza 社区服务器帐户才能查看它。

此外，请查看 Corteza 网站 上的文档，以获取其他最新的用户和管理员教程。

如果您有任何问题 - 或想贡献 - 请加入 Corteza 社区。登录后，请在 #Welcome 频道中介绍自己。