# 自定义浏览框展示配置文档

来源快照：`result_data_new_260518.json`

- 来源 ID：`1232529629895090195`
- 模块：低代码平台e-builder
- 目录：动作流 - 场景搭建
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 泛微e-cology10 ESB中心应用场景专题介绍 

如何通过动作流配置将第三方系统数据以浏览框的形式在系统中进行展示

# 一、编写目的

项目在使用浏览框时，希望浏览框中展示的数据是第三方系统中的数据，可以利用动作流的连接器菜单配置连接信息，连接接口等，通过自定义触发动作流执行接口实现数据的展示。

实现该场景需要涉及到以下几个点：

1、

在连接器菜单配置获取第三方列表数据的接口；

2、

在动作流中通过自定义触发组件+接口执行组件进行触发获取数据；

3、

在通用设置-浏览框设置-自定义浏览框设置中进行配置。

# 二、支持版本

ecology 10版本

# 三、接口在postman中的配置及效果

1、获取第三方数据的接口（查询国家数据）在Postman中的配置及效果

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529711427649551&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

说明：该接口的展示中，上方对应的是连接器接口中的请求参数，下方对应的是连接器接口响应参数

# 四、ESB中心相关配置

## 第一步：配置连接器

1、

在ESB中心的连接器菜单的第三方应用中新建连接器，点击右上角的按钮即可

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529724237053953&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、新建连接信息，在连接器的连接tab页中新建，可根据第三方接口的格式选择http还是https，然后将接口ip或域名输入即可，https://weapp.mulinquan.cn，编码选择UTF-8

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529715722616841&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 第二步：接口配置

1、

配置列表数据总数获取接口（selectArea）

在连接器的接口tab页中新建接口，接口配置以及如何测试接口是否配置正确如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529720076304387&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529720016683022&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529728573964289&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529715722616838&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

在ecology10中要对配置好的接口进行测试，需要在动作流菜单中，新建动作流利用定时器和配置好的接口配置手动执行触发看下接口是否成功，数据返回是否正确，具体配置如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529724188286976&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529711427649547&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529724361981962&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

注：动作流这边要选到连接器配置的接口，必须将接口进行发布，得发布状态的接口才能被选到

## 第三步：动作流配置

1、

新建动作流，选择自定义触发组件，在中间节点选择配置好的已发布的接口

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529724188286982&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、

自定义触发组件输入参数设置如下

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529724316925952&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、

接口的请求参数配置如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529715785711633&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4、

输出组件的配置如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529711342862342&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

注：自定义浏览框展示的数据主要通过输出组件的明细表的配置进行显示，明细表配置的依据值即第三方接口返回的明细列表

 

# 五、自定义浏览框配置及效果

在通用设置-浏览框设置-自定义浏览框菜单中，新建自定义浏览按钮，数据来源选择业务模块中的动作流里面的数据

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529728472399878&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529711345328135&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

展示效果：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529720027537419&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

该自定义浏览框想在表单中配置使用，可在表单设计器中进行配置，配置如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232529715785711629&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

# 六、自定义浏览框其他相关配置及问答

## 6.1、如何设置可通过在自定义浏览按钮中输入条件进行搜索

**配置方案：** 在浏览框设置中，设置字段为快捷搜索字段或者常用条件

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232624016003776537&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

注：

a、在浏览框中的字段设置中显示的字段是动作流的自定义触发的输入参数以及终止组件的输出参数会显示在这里面，在动作流中新添加的参数可点击右上角的同步按钮

b、可设置快捷搜索字段或者常用条件的参数只有自定义触发组件的输入参数的数据才可以设置

## 6.2、实现选中了自定义浏览按钮数据后，带出某个参数的值赋到另外一个表单字段上

**配置方案：** 在表单设计器中，对需要赋值的字段设置选择关联表字段即可

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232530746622918679&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232531012911792133&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 6.3、如何将表单字段的值作为自定义浏览按钮的条件进行搜索

**配置方案：** 在浏览数据定义中的高级搜索条件设置中点击设置按钮，可对设置了常用条件的参数设置变量即可

![](https://weapp.eteams.cn/papi/file/preview?fileId=1233296397409345540&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232625471900139527&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232626614513336331&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 6.4、如果接口本身不支持搜索，如何对接口返回的数据列表进行搜索筛选

**配置方案：** 在接口下面加个筛选数据组件，对接口返回响应数据列表进行筛选，将筛选的结果传给终止组件即可

1、筛选组件的数据集来源于接口的响应参数

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232627842823651332&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、筛选条件右侧的值从自定定义触发的输入参数映射，该参数需要在自定义浏览框的配置为常用条件，通过该参数去动态传值进行条件搜索，如图中将自定义触发的name2参数作为动态传值的参数

![](https://weapp.eteams.cn/papi/file/preview?fileId=1233296552043380742&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232628929450377230&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、最终返回到列表数据来源于筛选组件，所以终止组件的配置需要来源于筛选数据组件

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232630394009059335&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4、效果如下图：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1232631016842412036&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 6.5、浏览按钮如何支持分页设置

前提：接口本身要支持分页才可以，接口需要有页数和条数的请求参数，即支持分页；还需要返回个总数的参数  
1、自定义触发组件需要有页数和条数  
2、接口需要有页数和条数，将自定义触发组件的页数和条数映射过来  
3、终止组件的主表必须加  total 参数，映射你三方接口返回的总数值

具体可看下面地址中的文档

**配置方案：**[ https://www.e-cology.com.cn/sp/doc/docDetail/2003103362953176497](https://www.e-cology.com.cn/sp/doc/docDetail/2003103362953176497 "https://www.e-cology.com.cn/sp/doc/docDetail/2003103362953176497")

#  七、相关其他详细配置文档链接地址如下：

http://10.10.10.40:4999/web/#/p/29710d988998c7e86bb54ba4ee7ea6a9
