3.3.1.1 简介
交互页面提供给开发者快速构建页面的能力。通过新建自定义页面,将一个或多个组件拖进画布,进行低代码甚至无代码的配置,帮助开发者快速完成实现业务功能的前端页面。
页面提供了丰富的组件,组件包含了预置的样式,并封装了基础事件代码,搭建者可以根据个性化需求,通过页面预置的组件自由编辑页面,并修改组件的样式。通过局部代码编辑,修改整个页面的属性和页面构建规则,实现了开箱即用,避免重复写样式和事件代码,陷入代码细节,使开发人员更好的专注于业务场景的挖掘。
企业常见业务场景(简单):例如绩效管理、请假电子流、出差报销、在线投票等,其功能主要是针对业务数据的增、删、改、查等。
3.3.1.2 新建自定义页面
(1)进入应用编辑器,单击左侧导航栏的“页面 ”,显示页面的资源目录树。
(2)单击“+”,弹出新建页面窗口。
(3)根据下表中的参数说明进行配置。

(4)单击“确定”,进入自定义页面编辑器。开发页面及编辑页面参见“编辑页面”。
3.3.1.3 自定义页面编辑器介绍
自定义页面编辑器由四部分组成,分别是:左侧组件区域、上方按钮区域、中间工作区域和右侧可配置页面区域。

页面介绍如下表所示:



3.3.1.4 预置组件说明
组件库包括平台预置组件和自定义组件,预置组件分为布局,基本,表单和高级四类。
组件通用属性说明
通用样式参考:

高级事件
组件的响应时间可以添加动作。动作分成两种类型:内置动作和自定义动作。
1.内置动作,平台封装好的动作,仅需要通过简单配置,就可以完成业务逻辑。


2.高级动作分为函数动作和自定义动作,需要对编程有一定的了解才能完成此操作。

3.场景示例
系统预置了多种常用的事件交互动作,例如打开页面、打开弹窗以及重置表单。您可在页面设计中直接使用预置动作完成页面相关的常见操作。
示例一:实现页面跳转
场景描述:单击按钮,跳转到详情页面。
操作步骤:
(1)拖入按钮组件,在右侧“事件”页签下,单击“点击触发”后的加号,进入“添加动作”页面。
(2)单击“打开页面”,配置动作名称、目标页面,打开方式等参数,单击“确定”。

(3)“打开页面”参数说明

(4)单击页面右上角保存按钮,保存页面。
(5)单击预览页面,单击“立即体验”按钮,可预览按钮的事件效果。
示例二:实现弹出窗口
场景描述:单击按钮,弹出“提交成功”的提示窗口。
操作步骤
(1)拖入按钮组件,在右侧“
”事件图标下,单击“点击触发”后的加号,进入“添加动作”页面。
(2)单击“弹框设置”,配置动作名称,目标组件、弹窗状态,单击“确定”。
(3)“弹框设置”参数说明

(4)单击页面右上角保存按钮,保存页面。
(5)单击预览,可预览弹框的事件效果。
布局
(1)容器
• 概述:主要用于布局,常用于承载其他组件,并进行渲染。
• 属性


• 样式
参考通用样式设置
• 高级

(2)栅格
• 一种容器组件。通过行(row)与列(column)的组合来创建页面布局容器。主要用于解决大量的信息收纳问题。
(3)标签页
• 选项卡切换组件。 提供平级的区域将大块内容进行收纳和展现,保持界面整洁。
(4)分割线
• 用来分割页面内容。
(5)表单
• 作为一个容器,用于数据的收集和展示。
(6)折叠面板
• 概述
一种容器,用于将内容区域折叠/展开。
基本
(1)文本
• 概述
展示文本信息。
(2)按钮
• 概述
开启即时操作,触发业务逻辑。
(3)图片
• 概述
展示图片。
(4)图标
• 概述
展示图标。
(5)进度指示器
• 概述
展示进度的组件,可以设置进度条、进度圈等样式。
(6)倒计时
• 概述
展示倒计时。
(7)链接
• 概述
展示链接,并可以打开链接内容。
(8)地图
• 概述
展示地图
(9)音频
• 概述
展示音频文件。
(10)视频
• 概述
展示视频文件。
表单
(1)输入框
• 概述
展示单行文本,可录入文字、数字等。
(2)多行输入框
• 概述
展示多行文本,用于录入较长、较为复杂的内容,比如工作报告。
(3)数字输入框
• 概述
展示数字。用于录入数字,比如年龄、身高等。
(4)富文本
• 概述
一种可内嵌于浏览器,所见即所得的文本编辑器。用于展示复杂的文本场景。
(5)日期
• 概述
日期选择器。
(6)日期时间
• 概述
日期时间选择器。
(7)时间
• 概述
时间选择器。
(8)单选框
• 概述
在有限的可选项中,选择一个。
(9)多选框
• 概述
在有限的可选项中,选择多个。
(10)下拉框
• 概述
下拉框选择。适用于选项内容较多时的单选或者多选操作。
(11)开关
• 概述
开关选择器。适用于两种状态间的切换。
(12)选择部门
• 概述
部门选择器。可用于审批过程的选部门操作。
(13)选择人员
• 概述
人员选择器。可用于审批过程中的选人操作。
(14)级联
• 概述
级联选择器。常用于从一组相关联的数据集合进行选择,例如省市区等。
(15)上传
• 概述
上传文件或者上传文件。常用于表单中的图片和文件上传。
高级
(1)导航菜单
• 概述
导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。
(2)选项树
• 概述
使用树控件可以完整展现树形结构数据的层级关系,并具有展开收起选择等交互功能。
(3)下拉菜单
• 概述
向下弹出的列表,当页面上的操作命令过多时,常用此组件来收纳操作元素。
(4)穿梭框
• 概述
双栏穿梭选择框。可更加直观的在两栏中移动元素,进行选择。
(5)面包屑
• 概述
页面导航。显示当前页面在系统层级结构中的位置,并能向上返回。
(6)弹窗
• 概述
弹出的窗口,可自定义窗口的大小及内容。
(7)分页
• 概述
常用于列表数据较长时,采用分页的形式,对列表做分页处理。
(8)表格
• 概述
主要用于展示大量结构化数据。
(9)矩阵量表
• 概述
常用于相同的选项内容来回答多个不同的题目,比如满意度调查场景。
(10)操作列
• 概述
常用于列表数据的增删改。
(11)顶部栏
• 概述
公用的自定义区块组件。展示企业logo、用户头像和头像点击事件等。
(12)步骤条
• 概述
引导用户按照流程完成任务的导航条。
(13)轮播图
• 概述
用一块区域收纳图片,进行一组图片的轮播。
(14)时间轴
• 概述
垂直展示的时间流信息。
3.3.1.5 自定义页面管理
修改页面属性
1.限制与指导
修改页面属性时,仅可修改数据和样式。
2.操作步骤
(1)进入应用编辑器,点击左侧导航栏“页面”,显示页面的资源目录树。
(2)单击“页面名称”,进入编辑页面进行相应修改。
(3)点击页面空白处,选择数据图标
,可修改页面的基础设置,包括页面名称,是否为登录页等。

(4)选择样式图标
,可修改页面样式,包括边距,高度,背景,不透明度,边框,阴影,字体。

复制页面
1.场景描述
复制原页面中所有已保存的对页面的编辑,包括所添加的预置组件及自定义的组件的数据,样式和事件中的设置。
2.操作步骤
(1)进入应用编辑器,点击左侧导航栏“页面”,显示页面的资源目录树。
(2)单击操作列图标中的“复制”,弹出页面复制窗口。
(3)自定义所复制页面名称,页面ID,根据需要选择是否设置为登录页及添加描述。
(4)填写完成后,单击“确定”。
删除页面
(1)进入应用编辑器,点击左侧导航栏“页面”,显示页面的资源目录树。
(2)单击需要删除页面名称后操作图标的“删除”,弹出确认删除窗口,单击“确定”。
3.3.1.6 自定义页面场景化示例
1.场景描述
用账号密码登入新员工录入系统,实现:
新增入职员工的信息到员工入职详情表。
删除离职员工的信息。
修改编辑在职员工信息。
查看在职员工信息详情。
2.前提条件
新建实体模型用户及信息,操作步骤见“新建实体模型”。
(2)新建实体模型“用户”的业务字段,操作步骤见“新建业务字段”。


(3)新建自定义页面2个,页面名称分别为新员工信息录入系统页,新员工入职详情页。设置新员工信息录入系统页为唯一登录页。详见新建自定义页面。

3.操作步骤
新增入职员工的信息到员工入职详情表
(1)点击页面名称中新员工信息录入系统,进入编辑。
(2)向工作区域拖入表单,在右侧点击“
”数据图标,找到数据绑定,绑定数据模型“用户”,单击“确定”。

(3)选中记录id,在右侧“
”数据图标下找到权限设置,关掉“显示”开关。

(4)选中“用户名”,在右侧“
”数据图标下找到校验设置,打开“必填”开关,打开必填标识。密码也是同样的操作,左上角出现红色必填标识。

(5)单击“提交”按钮,在右侧“ ”事件图标下,单击“点击触发”后的加号,进入“添加动作”页面。单击“打开页面”,填写动作名称,选择目标页面,如图所示。完成后单击确定。单击右上角“保存”。

(6)进入新员工入职详情页编辑,向工作区域拖入一个表格组件,选中表格组件,注意不要选成表格容器,在右侧数据图标下绑定数据模型“新员工信息”。注意去掉记录id,单击确定。

(7)选中使用操作列,启用搜索栏,根据需要选择搜索字段,这里只留下姓名和电话,其余搜索字段删除。打开显示新增按钮。

(8)选中表格组件,在右侧“
”事件图标下,单击“加载完成时触发”后的加号,进入“添加动作”页面。如图设置“接口配置”,完成后单击“确定”。

(9)向工作区域拖入一个弹窗组件,在弹窗组件中拖入表单,选中表单,绑定数据模型“新员工信息”,点击确定。
(10)选中提交按钮,在右侧“
”事件图标下,单击“点击触发”后的加号,进入“添加动作”页面。
(11)
(12)创建四个事件,动作名称分别为创建,重置,关闭,刷新。配置参数如下表,配置完成后点击确定。
(13)创建:

(14)重置

(15)关闭弹窗

(16)刷新

(17)选中表格中的“新增”按钮,在右侧“
”事件图标下,单击“单击触发”后的加号,进入“添加动作”页面。

(18)单击右上角保存,发布及部署访问操作参见应用发布及应用部署,应用访问,测试成功添加新用户信息,如图所示。

删除离职员工的信息
(1)在工作区域表格组件中,选中删除按钮,在右侧“
”事件图标下,单击“单击触发”后的加号,进入“添加动作”页面。
增加两个事件:删除,刷新。配置如下:

刷新:

(2)单击右上角保存,发布及部署访问操作参见应用发布及应用部署,应用访问,测试删除离职用户信息,如图所示。
修改编辑在职员工信息
(1)在工作区域中,拖入弹窗组件,将表单组件拖入弹窗组件中,选中表单,绑定数据模型“新员工信息”。
(2)选中弹窗的“提交”按钮,在右侧“
”事件图标下,单击“点击触发”后的加号,进入“添加动作”页面。添加三个事件:更新,关闭,刷新。配置如下:
更新:

关闭:
刷新:

(3)在工作区域表格组件中,选中“编辑”按钮,在右侧“
”事件图标下,单击“点击触发”后的加号,进入“添加动作”页面。
增加两个事件:打开,刷新。配置如下:
打开

查询

(4)单击“确定”,单击右上角保存。
查看在职员工信息详情
(1)在工作区域中,拖入弹窗组件,修改名称为“弹窗_详情”,将预置组件汇总的表单组件拖入弹窗组件中,选中表单,绑定数据模型“新员工信息”。将表单按钮容器删除。
(2)在表格组件中,选中“查看详情”按钮,在右侧“”事件图标下,单击“点击触发”后的加号,进入“添加动作”页面。
增加两个事件:打开,查询。配置如下:
打开
查询

(3)单击“确定”。单击右上角“保存”。
前端效果展示
(1)登录页点击提交,跳转到详情页

(2)点击新增,弹出“新增窗口”,填写完成后,单击“提交”。

(3)如下图所示,新增新员工“李春春”的入职信息。

(4)找到“张三”,单击右侧操作列中的删除,即可删除张三的信息。

(5)修改“李春春”为“李春”,单击右侧操作列“编辑”,修改后单击“提交,可以看到修改成功。

(6)找到李春春,单击右侧操作列“查看详情”,弹出“详情”窗口。单击右上角关闭。
