从百数教学看产品设计:掌握显隐规则,打造极致用户体验

字段显隐规则允许通过一个控件(如复选框、单选按钮或下拉菜单)来控制其他控件(如文本框、日期选择器等)和标签页(如表单的不同部分)的显示或隐藏。

这种规则通常基于用户的选择或满足特定条件来触发,使得表单或界面更加动态和个性化。通过精心设计的显隐规则,可以提高用户体验,减少不必要的复杂性,并帮助用户更有效地完成所需的任务。

简介

字段显隐规则可以通过一个控件来控制其他控件和标签页是否显示以及在什么条件下显示。

使用场景:如果你想实现选择某个选项后,自动显示其他字段;又或者,在输入某个值之后,自动显示其他字段。那么,就可以为表单设置「字段显隐规则」。

设置方法

01位置

普通字段:表单设计-表单属性-字段显隐规则

02添加字段显隐规则

在字段显隐规则面板,点击【添加显隐规则】。

03显隐规则条件设置

一个字段显隐规则可添加多个条件。多个条件间的逻辑关系可以是满足所有或者满足任意一个。

条件间的逻辑关系

  • 所有:所有条件必须同时满足才能显示后续字段。
  • 任意一个:满足其中任意一个条件即可显示后续字段。

条件设置

  • 确定了多个条件间的逻辑关系后,可以为该显隐规则设置条件。

条件设置分为三部分内容:

1.选择字段:设置条件字段,仅支持添加主字段,不支持子表单。

2.设置筛选关系:不同字段支持的筛选关系不一样。

3.设置筛选值:不同字段的筛选值设置不一样,可能是输入也可能是直接选择已有数据。

04显示字段设置

设置好条件以后,需要设置显示字段。即满足上述条件后需要显示的字段,也就是不满足条件不显示的字段。

如,商品调研中:

  • 当【喜欢哪种分类的零食】选择[辣条]时,显示【辣条荤素】、【辣度】字段。

  • 当【喜欢哪种分类的零食】选择[饮料]时,显示【饮料类型】、【瓶装 or 罐装】字段。

  • 当【喜欢哪种分类的零食】选择[饼干]时,显示【饼干类型】字段。

05效果预览

动图封面

其他规则

01联动得来的选项支持显隐规则

通过数据联动 或 关联其他表单数 得来的字段选项也可以作为显隐规则的条件。

如下图中,【购买商品名称】字段关联【商品信息】表 的【商品名称】字段,在设置显隐规则时,可以直接联动出【商品信息】表中的数据进行条件设置。

02多级显隐关系设置

  • 如学校假期期间行程调查的表单中,学生身份填写:【姓名】、【学号】、【是否离省】等字段;老师身份填写:【姓名】、【工号】、【是否离省】、【是否是班主任】等字段,当是班主任时,还需要填写【班级内的学生是否已全部通知】,如果未全部通知,还需要填写【未通知原因】。

  • 设置方法如下

  • 效果:

动图封面

03支持标签页的显示与隐藏

设置方法:在设置显隐规则面板,显示字段中勾选满足条件时需要显示的标签页。

注意:当标签页被隐藏时,该标签页内所有字段均不展示。

04显隐规则在查看数据时也生效

在数据管理、权限组、数据提醒等界面处查看单条数据详情时,将按照数据显隐规则进行数据展示,更便于数据的查看。

如【商品赠送】中,购买百事才能赠送商品,购买其他不会赠送商品(不会展示【赠送商品名称】、【赠送数量】字段),填写表单和查看数据详情页,隐藏的字段不会展示。

注意事项

  • 原单选按钮组和下拉框的选项关联设置不再支持,已设置的系统将自动兼容为字段显隐规则配置。
  • 新建表单的显隐规则设置以及已建表单的显隐规则修改均需要在表单属性中设置。
  • 可以对子表单整体设置为显示或隐藏。
  • 一个表单可以添加多个显隐规则:一个字段可以是多个显隐规则中的条件字段,但不能是多个显隐规则中的显示字段。
  • 设置的显隐规则在查看数据时也生效。
  • 显示字段仅显示排在条件字段后面的字段,如果有多个条件字段,则以排在最后面的条件字段作为判断依据。
  • 显示字段位置变动的影响:如果将显示字段移动到条件字段上方,则在保存表单时,系统自动将显隐规则中的显示字段删除。
  • 管理员数据管理中,显隐规则不生效。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/767244.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3实现echarts——小demo

版本&#xff1a; 效果&#xff1a; 代码&#xff1a; <template><div class"middle-box"><div class"box-title">检验排名TOP10</div><div class"box-echart" id"chart1" :loading"loading1"&…

【Portswigger 学院】路径遍历

路径遍历&#xff08;Path traversal&#xff09;又称目录遍历&#xff08;Directory traversal&#xff09;&#xff0c;允许攻击者通过应用程序读取或写入服务器上的任意文件&#xff0c;例如读取应用程序源代码和数据、凭证和操作系统文件&#xff0c;或写入应用程序所访问或…

API Object设计模式

API测试面临的问题 API测试由于编写简单&#xff0c;以及较高的稳定性&#xff0c;许多公司都以不同工具和框架维护API自动化测试。我们基于seldom框架也积累了几千条自动化用例。 •简单的用例 import seldomclass TestRequest(seldom.TestCase):def test_post_method(self…

GDB 远程调试简介

文章目录 1. 前言2. GDB 远程调试2.1 准备工作2.1.1 准备 客户端 gdb 程序2.1.2 准备 服务端 gdbserver2.1.3 准备 被调试程序 2.2 调试2.2.1 通过网络远程调试2.2.1.1 通过 gdbserver 直接启动程序调试2.2.1.2 通过 gdbserver 挂接到已运行程序调试 2.2.2 通过串口远程调试2.2…

紫鸟浏览器搭配IPXProxy代理IP的高效使用指南

​紫鸟指纹浏览器一款专门为跨境电商而生的防关联浏览器&#xff0c;能够帮助跨境电商卖家解决多店铺管理问题。紫鸟指纹浏览器为跨境电商卖家提供稳定的登录环境&#xff0c;并且搭配IP代理&#xff0c;能够解决浏览器指纹记录问题&#xff0c;提高操作的安全性。那如何利用紫…

广州AI绘图模型训练外包定制公司

&#x1f680;设计公司如何借助AI人工智能降本增效&#xff0c;广州这家AI公司值得借鉴— 触站AI&#xff0c;智能图像的创新引擎 &#x1f31f; &#x1f3a8; 触站AI&#xff0c;绘制设计界的未来蓝图 &#x1f3a8;在AI技术的浪潮中&#xff0c;触站AI以其前沿的AI图像技术…

RK3568驱动指南|第十六篇 SPI-第188章 mcp2515驱动编写:复位函数

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

Redux 使用及基本原理

什么是Redux Redux 是用于js应用的状态管理库&#xff0c;通常和React一起用。帮助开发者管理应用中各个组件之间的状态&#xff0c;使得状态的变化变得更加可预测和易于调试。 Redu也可以不和React组合使用。&#xff08;通常一起使用&#xff09; Redux 三大原则 单一数据源…

在uni-app使用vue3使用vuex

在uni-app使用vue3使用vuex 1.在项目目录中新建一个store目录&#xff0c;并且新建一个index.js文件 import { createStore } from vuex;export default createStore({//数据&#xff0c;相当于datastate: {count:1,list: [{name: 测试1, value: test1},{name: 测试2, value: …

从hugging face 下模型

支持国内下载hugging face 的东西 下模型权重 model_id 是红色圈复制的 代码 记得设置下载的存储位置 import os from pathlib import Path from huggingface_hub import hf_hub_download from huggingface_hub import snapshot_downloadmodel_id"llava-hf/llava-v1…

Swift 中强大的 Key Paths(键路径)机制趣谈(下)

概览 在上一篇博文 Swift 中强大的 Key Paths(键路径)机制趣谈(上)中,我们介绍了 Swift 语言中键路径机制的基础知识,并举了若干例子讨论了它的一些用武之地。 而在本文中我们将再接再厉,继续有趣的键路径大冒险,为 KeyPaths 画上一个圆满的句号。 在本篇博文中,您将…

C++:二维数组的遍历

方式一&#xff1a; #include <vector> #include <iostream> int main() { // 初始化一个2x3的二维向量&#xff08;矩阵&#xff09; std::vector<std::vector<float>> matrix { {1.0, 2.0, 3.0}, // 第一行 {4.0, 5.0, 6.0} // 第二行 };…

企业备份NAS存储一体机

企业文件服务器上的数据、员工电脑里的数据以及NAS存储内数据&#xff0c;需要及时备份&#xff0c;Inforternd存储设备内置了强大的备份服务器功能&#xff0c;无需额外费用&#xff0c;就能轻松将重要数据备份至安全可靠的存储空间中。 无论是GS或GSe 统一存储产品&#xff0…

开放式耳机怎么选?五大2024年口碑销量爆棚机型力荐!

在选购开放式耳机的时候&#xff0c;我们总会因为有太多的选择而陷入两难&#xff0c;又想要一个颜值比较高的&#xff0c;又想要同时兼顾性能还不错的&#xff0c;所以作为测评博主&#xff0c;今天我们就给大家带来自己的一些选购技巧和自己觉得还不错开放式耳机&#xff0c;…

不同行业如何选择适合自己行业的项目管理工具?

在当今的信息化时代&#xff0c;项目管理软件已成为各行各业不可或缺的工具。然而&#xff0c;由于各行业具有不同的特点和需求&#xff0c;因此选择合适的项目管理软件成为了一个重要问题。本文将探讨不同行业在选择项目管理软件时需要考虑的因素&#xff0c;希望能帮助大家更…

python-图像模糊处理(赛氪OJ)

[题目描述] 给定 n 行 m 列的图像各像素点的灰度值&#xff0c;要求用如下方法对其进行模糊化处理&#xff1a; 1. 四周最外侧的像素点灰度值不变。 2. 中间各像素点新灰度值为该像素点及其上下左右相邻四个像素点原灰度值的平均&#xff08;四舍五入&#xff09;输入&#xff…

安卓微商大师V3.4.0/高级版一键群发僵尸粉检测

一款高效获取客源&#xff0c;备受好评的微商工具&#xff0c;资源丰富&#xff0c;秒速获得客源&#xff0c;大量群客源&#xff0c;都是散客&#xff0c;携手创业&#xff0c;是做微商生意的首选工具。打开即是黑钻高级会员 赶快体验吧 很强大 链接&#xff1a;https://pan.…

针对 Windows 10 的功能更新,版本 22H2 - 错误 0xc1900204

最近想帮女朋友生win11发现她电脑安装更新总是卡到安装%10这里失败 原来是安装路径被修改过了&#xff0c;改回c盘 win R → 输入regedit 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion

分布式日志采集 Loki 配置及部署详细

分布式日志采集 Loki 配置及部署详细 Loki 部署模式Loki 读写分离部署配置Loki 配置大全 Loki 部署模式 &#xff08;1&#xff09;可扩展部署模式 Loki 的简单可扩展部署模式是最简单的部署方式、首选方式。可扩展到每天几TB的日志&#xff0c;但是如果超出这个范围&#xff…

线下生鲜蔬果店做小程序有什么方法

生鲜蔬果是生活所需&#xff0c;大小商家众多&#xff0c;零售批发各种经营模式&#xff0c;小摊贩或是超市门店都有着目标客户或准属性群体。竞争和获客转化也促进着商家寻找客源和加快线上进程。 尤其是以微信社交为主的私域场景&#xff0c;普客/会员都需要精细化管理营收和…