# 流程编辑页面概述
#### 什么是流程编辑
流程编辑页面是一种将流程工具拖拽到在线编辑区进行低代码甚至无代码配置，即可快速完成业务流程设计的前端页面。通过在流程编辑页面绘制业务流程，企业可以更清晰地理解流程的各个步骤和关系，方便与团队成员/相关方进行沟通、交流。
#### 初识流程编辑页面
创建流程元模板后，自动进入流程编辑页面，您可以阅读以下内容初步了解流程编辑页面。
图1初识流程编辑页面   
![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266267018.jpg "点击放大")
流程编辑页面由左侧**工具栏+工具面板** 、上方**顶部导航栏** 、中间**快捷菜单栏+** **在线编辑区** 和右侧**工具信息设置面板** 组成。具体功能介绍，请参见[表1]。
 表1流程编辑页面功能介绍 
| 区域       | 功能说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
|:---|:---|
| 顶部导航栏    | 顶部导航栏从左到右包括： - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300916977.png)：退出流程元模板编排页面，返回流程引擎。  - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300843897.png)：流程元模板编排模式切换，可切换至流程编辑、数据编辑和UI编辑，进行相应的配置。  - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266163960.png)：保存当前页面数据。                                           |
| 左侧工具栏    | - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266267022.png)：流程工具，提供业务流程设计所需组件，拖拽组件至在线编辑区中进行流程设计，具体操作请参见[在流程编辑页面添加流程工具](https://support.huaweicloud.com/devg-craftartsipdcenter/idme_base_0018.html)。  - ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300916981.png)：导航树配置，可直观且全局的了解业务流程的执行过程。                                                                                                                                                                                                                |
| 工具面板     | 在左侧工具栏单击对应工具图标，会在右侧展示对应工具的工具面板。例如，单击![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300843901.png)，展示流程工具的工具面板。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| 快捷菜单栏    | 包含另存为其他格式文件、查看XML、管理流程编辑视图等操作。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| 在线编辑区    | 位于流程编辑页面中央，是可视化设计流程的核心模块。在左侧工具栏的工具面板中，将所需的流程工具拖拽到在线编辑区内；然后根据已明确的业务流程，单击在线编辑区内的流程工具，设置流程工具间的连接、属性、样式等，具体操作请参见[在流程编辑页面添加流程工具](https://support.huaweicloud.com/devg-craftartsipdcenter/idme_base_0018.html)和[设置流程编辑页面的流程工具属性](https://support.huaweicloud.com/devg-craftartsipdcenter/idme_base_0019.html)。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| 工具信息设置面板 | 未选中在线编辑区中任何流程工具时，此模块显示内容为"Process"，即当前流程元模板的常规信息和导航树配置信息。您可以通过选择在线编辑区中的流程工具，切换到对应流程工具的"工具信息设置面板"，进行当前选中流程工具的常规设置、监听器设置和导航树配置设置。 - 常规：流程工具常规信息设置，具体操作请参见[设置流程编辑页面的流程工具属性](https://support.huaweicloud.com/devg-craftartsipdcenter/idme_base_0019.html)。  - 监听器：流程工具中的"用户任务"支持设置监听器，例如设置超时自动审批、设置超时自动转审等，具体操作请参见[为用户任务设置监听器](https://support.huaweicloud.com/devg-craftartsipdcenter/idme_base_0021.html)。  - 导航树配置：支持设置流程节点是否可跳过、节点初始化时是否点亮等操作。   |
   
#### 流程编辑页面常用操作入门
在进行流程编辑页面设计流程元模板之前，建议您先对流程编辑的常用操作进行简单的了解。
- 在使用流程工具之前，可以将鼠标悬浮在快捷菜单栏的"帮助"上，单击"工具栏说明"，即可查看流程工具的详细介绍。如需了解更多流程工具的使用及配置方法，请参见[设置流程编辑页面的流程工具属性](https://support.huaweicloud.com/devg-craftartsipdcenter/idme_base_0019.html)。
- 流程编辑页面中预置了多种流程工具，可以直接从左侧"工具面板"区域，将这些工具组件拖拽到中间的"在线编辑区"。
- 在"在线编辑区"中，选中某个工具组件，在右侧工具信息设置面板的"常规"页签，可设置该工具组件的中文名称、是否提交节点、任务描述等属性，如[图2]所示。
  图2工具信息设置面板-常规   
  ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266163964.png "点击放大")
  - 在"在线编辑区"中，选中某个"用户任务"工具组件，在右侧工具信息设置面板的"监听器"页签，可设置该工具组件的"超时处理：超时自动转审"、"超时处理：超时自动审批"等属性，如[图3]所示。
    图2工具信息设置面板-监听器   
    ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002266267030.png "点击放大") 
  
  - 在"在线编辑区"中，选中某个工具组件，在右侧工具信息设置面板的"导航树配置"页签，可设置该工具组件的节点初始化时是否点亮、节点是否跳过、导航树顺序等属性，如[图4]所示。
    图3工具信息设置面板-导航树配置   
    ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300916985.png "点击放大") 
  
  - 利用"导航树配置"工具，快速选中工具组件。 当流程工具组件数量比较多，位置较为紧密时，可以直接单击节点，快速选择工具组件。例如，单击[图5]"导航树配置"中的"节点"，可直接选中"在线编辑区"的工具组件，右侧工具信息设置面板切换至"导航树配置"页签。
    图4导航树配置-快速选中工具   
    ![](https://support.huaweicloud.com/devg-craftartsipdcenter/figure/zh-cn_image_0000002300843905.png "点击放大")