除了在YonBuilder中搭建PC端应用,我们还可以搭建配套的移动端页面。对于同一个数据实体,可以在PC端和移动端实现数据同步修改,让数据的录入、修改、审批等更加便捷。本文通过构建员工信息实体移动端页面,介绍YonBuilder移动端配置的基本流程。1、创建页面首先,创建页面的前提是要有一个发布的实体。在应用构建的数据建模界面选择一个新的实体,进行配置,点击保存并发布。这里调用的是之前创建并发布的员工信息实体,包括员工姓名、性别、年龄等信息字段,具体配置信息如下。其次,根据创建的实体生成PC和移动页面。这里需要注意的是,移动端目前只支持单卡(表格)、主副卡(表格)和空页三种页面模板,需要勾选同时生成的页面选项移动端,移动端列表页文档卡片的布局格式设置可以在移动端页面旁边的配置选项中实现。这里我们在页面建模界面选择新建页面,选择单张卡片模板创建移动端页面。点击配置选项,进入手机列表页布局格式设置页面。可以看到分为模板类型和卡片设置两部分。在模板类型中,我们可以设置模板的显示类型。选择选项后,左侧是对应的预览页面。其中,纯文本卡片适用于由纯文本组成的物理数据;图形卡适用于有图片内容的文档;小图卡常用于资料较少的文件或分表卡。在卡片设置中,扩展字段提供实体字段以外的额外扩展选项。如果需要卡片显示更多的字段,可以勾选“扩展字段”,输入需要扩展的字段数。三种模板类型中只有缩略图卡片字段不支持扩展字段;如果点击项目快速预览,点击卡片信息时会快速弹出预览详情页,而不是跳转到详情页。在移动端完成页面布局格式的设置后,点击确定,返回页面创建流程,需要绑定选中的员工信息实体。至此,我们就完成了PC端页面和移动端页面的创建。点击完成后,可以看到同时生成了列表页和详情页两个页面。这里的区别在于它不同于简单的生成PC端页面。点击一个页面可以看到此时的编辑分为PC端和移动端两部分。点击移动端部分,配置移动端页面。2.移动端页面配置进入移动端页面配置后,可以看到此时页面已经根据实体配置系统自动生成,包括列表页、查询计划、多选计划、项目详情页。对于系统自动生成的页面,页面之间的跳转关系也已经同步生成。与PC页面一致,设计器左侧是组件库和层级列表,右侧是选中组件的属性、样式和操作面板。至此,我们就可以根据自己的需要对页面进行配置了。左侧的组件可以通过拖放的方式添加到画布中。选择组件后,您可以配置其具体信息。交互方式等,几乎所有的CSS样式都可以在样式面板中设计。在属性中可以设置组件的基本属性、字段权限、条件等,这里我们通过拖拽的方式添加一个排序组件,并在右侧的属性面板中选择字段设置,添加合约期和条目日期作为排序字段。3、预览至此,我们已经完成了YonBuilder移动端页面的基本配置过程,接下来使用数据来测试移动端页面的效果。首先,我们通过PC端的新选项添加??了两条数据。切换到移动端页面,可以看到同步显示了两条新数据。单击卡片以查看预览信息。同时,可以通过移动端新增的排序组件,实现两条数据的排序。在手机端点击添加,添加一条数据,可以看到手机端和PC端同步实现了新增。综上所述,我们已经介绍了YonBuilder移动端页面的基本配置流程。如有任何问题,欢迎在评论区交流讨论!
