一、背景、概述与价值
在搭建表单的过程中,通常会需要按品牌风格、或使用场景,对表单样式进行美化处理。表单设计器提供了完整全面的样式调整工具,从一键套用的样式模板,到线条、元素维度的精细设置,兼顾用户易用快速、和全面灵活的样式设计需要。本文将对如何设置表单的自定义样式操作进行详细说明。
配置层级 | 作用范围 | 主要功能 |
布局样式 | 全局生效 | 统一设置布局中所有表单字段样式 |
组件样式 | 单个组件 | 针对选中组件进行个性化样式配置 |
单元格样式 | 表格式布局 | 通过工具栏快速设置单元格格式 |
模块样式 | 模块级全局 | 配置模块下所有表单的初始样式 |
二、内容目录
3.1 布局样式
设置后针对布局中所有表单字段生效样式。
功能入口:流式布局、表格式布局
启用表头区域:开启后设计器实时显示表头配置区域;
表头标题样式:配置表头高度、背景图片背景色、表头间距、边框圆角等样式
设计器表头配置:
富文本组件:区域可直接输入表头内容,可对内容设置对齐、字体字号、间距等样式;
系统参数:可插入组织、日期、字段、系统字段相关参数
2.布局
1)排版
列数:设置布局一行几列字段,可设置1-4列;
标题位置:设置布局中字段在PC端、移动端字段标题和内容的排列方式,支持上下、左右排列;
只读显示:设置单选框/复选框在只读状态下,选项值的显示方式:显示全部选项或者显示已选选项;
编辑时/只读时显示提示语:开启标识显示字段对应提示语,关闭则不显示;
只读时显示灰色背景:开启后,字段只读时默认显示灰色背景色;
自动获焦字段:设置后新建数据时,自动定位并聚焦到设置的字段输入框,仅支持设置文本类型字段;
2)大小
宽度:设置布局左右宽度,仅运行时生效。
3)主体区域
背景颜色:设置字段区域背景色;
透明度:设置字段区域背景色透明度;
边框/圆角:设置字段区域边框圆角样式;
图片和渐变色/阴影:设置字段区域背景图片以及边框阴影样式;
4)布局区域
背景颜色:设置整个布局区域的背景色;
透明度:设置布局区域背景色透明度;
边框/圆角:设置布局区域边框圆角样式;
图片和渐变色/阴影:设置布局区域背景图片以及边框阴影样式;
5)间距
设置布局上下左右的间距样式。
3.字段
字段:统一设置布局中所有表单字段的标题、描述、内容等配置样式
标题/描述/内容/提示语:设置布局中所有字段标题/描述/内容/提示语的样式
标题-行高:设置标题区域所在行的高度;
标题-宽度:设置标题区域所在行的宽度,字段标题较长换行时,可调整宽度配置;
1)组件区域
设置字段区域整体样式
组件区域-高度:设置的是字段区域的最小高度,不同字段类型有不同的最小高度,设置数值小于字段默认最小高度时,此设置不生效;
组件区域-垂直对齐:设置字段整体区域的对齐方式
2)文本框/浏览框
设置文本类型输入框、浏览按钮类型浏览框样式
文本框-高度:设置文本字段类型的输入框高度;
文本框/浏览框-宽度:设置文本/浏览类型的输入框宽度,支持固定宽度px和百分比%,百分比按照字段所属容器宽度进行自适应生效;
文本框-边框:设置文本字段类型的输入框边框样式,可单独设置下边框,示例:
浏览框-宽度:设置浏览字段类型的浏览框宽度,需要在后台设置浏览框内容为框内显示,浏览框宽度才会生效
注:字段【人员范围选择】【人力资源条件】不生效浏览框宽度
3)选项
设置选项类型组件选项值/选项框的显示、排列样式
选项-横向填充:选项值与选框横向间距;
选项-选项间距:每个选项值之间的间距;
选框位置:选框与选项值的显示位置,选框可以设置显示在选项值左边或者右边;
排列方式:选项值的排列方式,可以横向排列或者纵向排列
4)图片
设置图片单选、图片多选字段的图片尺寸
图片高度
图片宽度
5)间距
设置布局中各表单字段之间的上下间距
6)分割线
设置布局中各表单字段之间是否显示分割线
表单需要开启分割线显示之后,分割线样式配置才会生效
后台统一配置入口
设计器中不会显示分割线,仅运行时生效
4.明细表
分为明细整表和明细表内全部字段两个维度的设置。
1)明细表整表
标题/描述/内容/组件区域:配置明细表整表的标题、描述、内容以及组件整体区域的样式
①表头
设置表格视图的明细表字段标题样式(仅针对表格视图明细表生效,平铺视图明细表中字段标题设置见下方配置:明细表内全部字段-标题)
内边线/间距:设置明细表整表的内部边框线样式以及明细表整体上下左右的间距样式
2)明细表内全部字段
标题:此配置仅针对平铺视图中明细表字段标题生效
内容/提示语/组件区域/文本框/浏览框/选项/图片/间距:针对明细表中字段生效,配置操作同布局中字段设置一致
5.分组
排版:设置分组内字段一行几列显示;
标题:设置分组组件的标题样式;
分组图标:设置分组组件是否显示图标,及图标样式配置。图标可以配置系统图库中图表,也可以自定义上传图标图片;
描述:设置分组组件描述样式;
内容:设置分组组件本身的内容样式;
组件区域:设置分组组件本身整体的组件区域背景色、边框等样式;
间距:设置分组组件整体上下左右的间距。
6.重置布局/重置组件
重置布局:点击后整个布局中表单字段样式恢复默认设置;
重置组件:点击后整个布局中单独开启过组件样式的表单字段,样式恢复默认设置;
功能入口:选中组件,右侧属性面板切换开启【组件样式】
组件样式配置同布局样式配置一致,此处不再重复介绍
标题位置:组件属性中的标题位置配置;
占比:布局样式中排版列数配置,组件单独配置显示在组件属性-占比;
只读显示:布局样式中选项类型的只读显示配置,组件单独配置显示在组件属性-只读显示;
选项类型:布局样式中选项排列方式配置,组件单独配置显示在组件属性;
格式刷:将当前单元格的格式直接复制到其他单元格上;
字体:设置“手输文字“、组件标题、组件内容的字体;
字体大小:设置“手输文字“、组件标题、组件内容的字体大小;
字体颜色:设置“手输文字“、组件标题、组件内容的字体颜色;
字体加粗:设置“手输文字“、组件标题、组件内容的字体加粗;
字体加斜:设置“手输文字“、组件标题、组件内容的字体加斜;
单元格边框:设置选中单元格的边框色、边框类型;
单元格背景色:设置单元格的背景颜色;
缩进:增加缩进量、减少缩进量,对“手输文字“、组件标题、组件整体都能生效;
上下左右居中:设置“手输文字”、组件标题、组件内容的位置;
字体换行:仅对“手输文字”生效;
合并/拆分单元格:当多个单元格都有内容时,只保留最靠近左上角区域的内容。当多个单元格只有一个单元格有内容时,保留内容。拆分单元格时将内容保留在最左上角的单元格内;
清除内容:清除单元格上内容,包括“手输文字”、组件标题、组件;
清除格式:清除设置在单元格上的所有样式,包括字体大小、颜色、单元格边框、背景色等;
全部清除:清除内容和清除格式;
清除背景:插入背景图后,点击此按钮可以将背景图清除掉;
上传图片:支持本地上传/网络/服务器,可设置单元格、背景图、浮动图,显示方式都为原图大小。
单元格、背景图上传后不允许调整尺寸,可预先调整好图片尺寸再上传;
浮动图上传后支持调整图片尺寸
支持一个单元格内容插入多个内容,包括字段标题/字段/固定内容。
方式1:点击顶部工具栏的多内容图标;
方式2:从组件区拖入多个到同一个单元内;
换行,点击换行按钮,则两个区域的内容前台渲染时换行展示;
设置多内容时,屏蔽掉了部分的格式工具;
插入页面块指将一个eb页面内容插入到单元格展示。
点击顶部工具栏的插入页面块图标;
双击“页面块”,进入页面编辑;
保存后,在表单中可以查看到页面设置过的内容;
可以将已有的样式模板直接应用到布局中,也可以新建样式。详细介绍 2.3模板使用
3.7 模块样式
功能入口:后台管理中心-表单引擎-基础设置-对应模块-基础设置-样式设置
模块样式启用后,该模块布局的初始化样式按照此处配置生效,该模块的布局样式、组件样式的初始值都以这里设置为准。
PC端、移动端支持单独启用或者关闭;
支持设置表头、布局、组件,具体配置同布局设计器中布局样式一致;
设置完成后,右侧点击【实时预览】,可实时更新显示样式配置;
点击【保存】后按照配置存储生效;
点击更多中【操作日志】,可查看具体配置操作记录,PC端、移动端分开记录;
四、关联功能点
五、常见问题
表格式布局-布局类型切换:支持将表格式布局切换为流式布局
切换规则:
布局中所有组件,切换后字段属性、布局属性正确保留;
多内容不保留,切换后流式布局平铺显示;
布局组件切换后保留;
布局设置/布局样式,切换后保留;
单元格样式,切换后不保留;
显示联动、数据联动、函数公式,切换后保留;
隐藏行列、隐藏单元格,切换后按照读写属性【不显示】保留;
其他表格式布局特特有的设置及属性,切换后不保留;
以下配置项仅流式布局显示,表格式布局不显示,单独使用单元格样式进行配置:
字段/明细表/明细表内全部字段的标题;
明细表的内容、组件区域、表头、内边线;