跳转到主要内容
步骤条控件

步骤条控件提供了一种直观的方法来显示用户在流程中的当前位置,通过可视化的步骤展示让用户清晰地了解整个流程的进度和即将到来的步骤。

超过 3 个月前更新

步骤条控件是一个非常实用的工具,用于在表单或应用程序界面中可视化地显示进程或步骤。它帮助用户了解当前的进度,理解还需完成哪些步骤。

步骤条控件业务场景

  1. 项目管理

    • 场景描述:在项目管理中,通常会有多个阶段,如计划、执行、审核和交付等。

    • 使用步骤条控件:使用步骤条控件可以帮助团队跟踪项目的进展,清晰展示当前处于哪个阶段,确保项目按计划推进。

  2. 销售流程跟踪

    • 场景描述:销售流程通常分为多个阶段,如潜在客户跟进、销售机会开发、合同签署和售后服务。

    • 使用步骤条控件:步骤条可以直观显示客户在销售流程中的位置,帮助销售人员管理和跟踪每个客户的进展。

  3. 表单填写跟踪:在表单填写过程中,尤其是涉及多个步骤或页面的复杂表单,使用步骤条控件可以极大地提升用户体验和表单填写效率。

如何添加步骤条控件

首先,在控件添加面板中找到步骤条控件。

拖放:点击看板控件并将其拖动到您的表单或自定义页面上的期望位置。

此控件可以用于审批表单、数据列表的列表表单和自定义页面、外部表单,为您在应用的不同领域提供灵活的管理选项。


内容设置

步骤条设置

选择步骤条控件后,转到设置面板并导航至内容 > 步骤条。

  1. 选择步骤条来源

  • 固定:在表单中直接在控件中添加和命名每一个步骤。

    1. 已选选项:步骤条控件初始默认提供四个步骤,在文本框中输入步骤名称。可通过点击删除按钮来移除不需要的步骤,拖动步骤的顺序块来重新排序步骤。

    2. 添加步骤:点击“添加步骤”按钮,可增加新的步骤。

    3. 当前步骤:步骤文本可以设置为静态或动态内容,显示当前默认步骤的名称。

  • 数据集记录:当在表单中使用数据集控件并将步骤条控件拖入其中时,步骤条的来源选项中会多出一个“数据集记录”选项。此时,用户可以选择数据集中的单选或多选字段,来动态生成步骤条的步骤。这一功能特别适合在表单中根据数据集内容动态调整步骤的场景。

  1. 列表字段:数据集中已有的单选或多选字段,作为步骤条的列表字段。

  2. 当前步骤:可以设置为数据集中的字段或静态文本。

  • 当前列表项:在列表表单中使用步骤条控件时,除了固定来源选项外,用户还可以选择“当前列表项”作为来源。这允许用户选择当前列表中的单选或多选字段,自动生成步骤条。此功能适用于需要根据列表项动态生成步骤条的场景,例如任务管理或流程跟踪。

  1. 列表字段:选择列表中已有的单选或多选字段,作为步骤条的列表字段。

  2. 当前步骤:可以设置为数据列表中的字段或静态文本。

注意:

步骤条控件的来源设置中,“固定”选项在审批表单、自定义页面和列表表单中都可用;“数据集记录”选项仅在表单中看板、数据集、水平时间轴、垂直时间轴等数据集合控件中的步骤条可用;“当前列表项”选项则仅在列表表单中的步骤条中可用。

2.布局

  • 圈点状:步骤以圆点标记展示,适用于简洁的步骤指示。

    步骤指示器:可选数字或图标来表示各步骤。

    已完成步骤/当前步骤/后续步骤:设置步骤图标

  • 基础楔状闭合楔形:步骤以连续楔形或封闭楔形展示,这些布局选项提供了更连贯的视觉流。

3.显示步骤文本:选择步骤文本显示的位置,如无、内部、顶部或底部。

4.动态显示规则:设置条件,根据特定规则动态显示或隐藏步骤条。


步骤条与按钮联动操作:

如果希望将步骤条控件与其他控件进行联动操作,例如通过点击按钮从步骤1跳转到步骤2,请按照以下步骤进行设置:

  1. 新增变量:在表单页面的右上角,点击“变量”按钮,新增一个变量。这一变量将用来控制步骤条的跳转。

  2. 关联变量与步骤条

    • 选中步骤条控件,点击“当前步骤”的表达式按钮,打开表达式编辑器。

    • 在表达式编辑器中,插入刚刚新增的变量,并将此变量与步骤条控件关联起来。

  3. 设置按钮动作

    • 为按钮新增一个动作,步骤类型选择“设置变量”。

    • 在步骤类型的设置面板中,将变量设置为刚才新增的与步骤条控件关联的变量。

    • 设置新值,例如“step bar = 步骤2”,表示跳转到步骤2。

    • 保存设置,并将此动作绑定到按钮上。

完成设置后,点击按钮即可实现步骤条的跳转效果。您还可以进一步探索,将步骤条控件与其他控件进行更多的交互功能。

样式设置

步骤条

步骤

  1. 边框半径:调整步骤条的边框圆角大小。

  2. 箭头角度:调整每个步骤块末端的尖角部分的倾斜角度。

  3. 项目间隙:设置步骤之间的空间距离,有助于清晰区分各个步骤。

  4. 颜色设置

    • 已完成步骤颜色:设置已完成步骤的颜色,来表示完成状态。

    • 当前步骤颜色:为当前活跃步骤设置醒目的颜色,以突出显示当前进度。

    • 后续步骤颜色:为尚未开始的步骤设置颜色。

  5. 高度设置:调整步骤条的高度,可以根据内容的多少和视觉需求进行设置。

注意:

当步骤类型为基础楔状闭合楔形时才需设置箭头角度和项目间隙,圈点状类型则不需要。

圈点状步骤条连线样式

  1. 颜色:设置连接各步骤的连线颜色,或用以区分不同状态的步骤。

  2. 背景颜色:连线部分特定的背景色设置。

  3. 高度:定制连线的高度,这影响视觉上的连线粗细。

步骤文本样式

  1. 颜色:设定步骤文本的颜色。

  2. 排版:调整步骤文本的字体、大小、字体风格等排版属性。

  3. 间距:设置文本与步骤图标或边框之间的间距。


高级设置

设置适用于此控件的高级设置选项卡。

这是否解答了您的问题?