前端事件


前端事件所有版本皆可免费使用,无需开通简道云API接口,且无需编程即可完成前端事件的配置。


1.效果演示

例如,在发票报销场景中,根据前端事件配置,可在成员提交发票图片后自动获取发票中的开票金额、开票日期等基础信息。


增值税发票OCR识别_Demo:点击体验 配置方法

身份证OCR识别_Demo:点击体验 配置方法

最新物流信息查询_Demo:点击体验 配置方法

数据库取数_Demo:点击体验

身份证姓名一致性校验_Demo:点击体验


2.功能介绍

前端事件是一种全新的数据获取的方式,可以在数据提交或者表单填报时,主动调用外部接口,从而可以实现接口取数、数据验证、数据分析、触发事件等一系列的操作,用户可以基于现成的商业接口进行配置(无需编程),也可以根据自身需求封装接口,灵活地满足自身业务需求(需编程),此功能为免费功能。

前端事件可以在表单字段的值发生变动时,自动调用外部接口,并获取数据,将数据写入对应的字段中

如,用户填写快递单号,返回具体物流信息;上传发票图片,返回发票金额;上传身份证照片,获取身份证姓名、身份证号等。


3.功能位置

表单设置 >> 表单属性 >> 前端事件


4.配置步骤

配置好的前端事件不支持表单预览时查看,您可以在外链或者应用访问界面进行测试

前端事件包括「触发字段」、「请求类型」、「URL」、「Header/Body」、「返回值格式」、「返回值设置」等配置。


4.1 触发字段

该字段发生值变动时即可触发前端事件。

支持字段包括:单行文本 、单选按钮、下拉单选、数字控件、时间日期 、复选框 、下拉复选框、成员单选、成员多选、部门单选、部门多选、图片字段


4.2 请求类型

当触发字段值发生改变时,会自动触发HTTP请求,目前支持下列两种类型的请求:

-GET请求通常用于获取服务端数据,将参数(Query or Params)在url后面拼接,例如 ?code=123 -POST请求用来发送、提交。可以向指定的资源提交要被处理的数据。


4.3 URL

请求的服务器地址,当使用GET请求时,需要把参数放在URL上,此时可以使用插入字段给参数赋值。

此处应注意URL长度(取决于配置服务器),过长将被截断,导致部分数据参数会传输失败

支持插入的字段:

字段名称 解析值格式
单行文本 文本
数字控件 数字
时间日期 文本(UTC格式时间字符串)
成员单选 文本(成员编号username)
部门单选 文本(部门编号dept_no)
图片 文本(图片URL)(多文件URL拼接方式空格分隔)

4.4 Header/Body

当请求类型选择“get”时,仅支持添加Header;当请求类选择“post”时,支持添加Header和body。


Header配置

  • Header可添加个数为50个;

  • 每一个Header包含一个name和一个Value,均支持自定义;

  • Header的Value可以插入表单字段。

支持字段:

字段名称 解析值格式
单行文本 文本
数字控件 数字
时间日期 文本(UTC格式时间字符串)
成员单选.编号 文本(成员编号username)
部门单选.编号 文本(部门编号dept_no)
图片.链接 文本(图片URL)(多文件URL拼接方式空格分隔)

Body配置

  • Body可添加个数为50个。
  • 支持添加表单内字段
字段名称 解析值格式
单行文本 文本
数字控件 数字
时间日期 日期时间
成员单选 字符串(成员id)
部门单选 字符串(部门id)
图片 URL

4.5 返回值配置

返回值格式

支持两种格式:JSON/XML

每一种返回值方式对应一种解析方式:JSON/XML分别对应JSON Path/XPath;


JSON Path 示例

{
    "result": "result的内容",
    "testResult": {
        "target": "target的内容"
    },
    "data": [
        {
            "key": "扎啤",
            "value": "2"
        },
        {
            "key": "炸鸡",
            "value": "4"
        }
    ],
    "array": [
        "列表数据1",
        "列表数据2",
        "列表数据3",
        "列表数据4",
        "列表数据5"
    ]
}
内容 写法一 写法二
“result的内容” $.result $[“result”]
“target的内容” $.testResult.target $[“testResult”][“target”]
“列表数据1” $.array[0] $[“array”][0]
“炸鸡” $.data[1].key $[“data”][1][“key”]
“2” $.data[1].value $[“data”][1][“value”]

XPath 示例

<results>
   <result>result的内容</result>
   <testResult>
       <target>target的内容</target>
   </testResult>
   <data>
       <key>扎啤</key>
       <value>2</value>
       <key>炸鸡</key>
       <value>4</value>
   </data>
   <array>列表数据1列表数据2列表数据3列表数据4列表数据5</array>
</results>
内容 写法一
“result的内容” /results/result/text()
“target的内容” /results/testResult/target/text()
“列表数据1” /results/array[1]/text()
“炸鸡” /results/data[2]/key/text()
“2” /results/data[1]/value/text()

返回值字段设置

如果你需要将前端事件获取的数据写入字段,可以在此处添加字段,并且配置规则,简道云将按你配置的规则从接口返回的数据中提取值并写入返回值字段中。如果返回值格式为JSON,需要按JSON Path规则配置,如果返回值格式为XML,需要按XPath规则配置。


返回值字段支持下面的字段

字段名称 解析值格式
单行文本 文本
多行文本 长文本
数字控件 数字
时间日期 日期时间

4.6 超时重试

如果请求超时,将会自动重新请求,每次请求时长20秒,共请求三次,如第三次再次超时,将不再请求。

配置 默认
时间 20s
重试次数 3次

配置好的前端事件不支持表单预览时查看,您可以在外链或者应用访问界面进行测试


5. JSON Path规则详解

JSON是一种轻量级的数据交换格式。一个序列化的 对象数组,其中对象由键和键值组成,键值可以是对象、数组、数字、字符串或者 (false、null、true)中的一个。


对象的构成{ 键: 键值 }


{“hello”:123} 在这个对象中,键为字符串 “Hello”,键值为数字 123;

{“hello”:null} 在这个对象中,键为字符串 “Hello”,键值为数字 null。


数组的构成[ 数组 或 对象 ]


[ {“test1”:123} , {“test2”:234} ] 在这个数组中,包含了2个对象。


当然,数组里面也可以同样包含对象或数组,对象里面也可以包含对象或数组。


正常的接口都会给出返回的示例,我们可以在此处看到返回的数据结构:


对于返回的数组,我们需要从中获取我们需要的数据,就需要使用JSON Path规则进行索引。


对于在JSON Path中,$表示根元素,我们根据不同的类型,采用不同的索引方式


对于对象,我们可以给出键来索引值。

例如:

{“hello”:123}

我们为了获取键值123,可以根据键来索引;

$.hello 或者 $.[‘hello’]

注意,如果键为中文,必须采用 $.[‘键’] 的形式。


对于数组,我们必须按顺序来索引。

例如 [ {“test1”:123} , {“test2”:234} ] 我们需要索引数组里面第一个对象的值,则 $[0].test1需要索引数组里面的第二个对象的值, $[1].test2[0]表示索引数组里面的第一个对象或数组或值,[1]表示索引数组里面的第二个对象或数组或值,以此类推…

下面我们尝试一下复杂的索引规则

{

  "address"    : "浙江省杭州市余杭区文一西路969号",   

  "config_str" : "{\\\"side\\\":\\\"face\\\"}",   

  "face_rect":{      

    "angle": -90, 

    "center":{     

      "x" : 952,

      "y" : 325.5

    },

    "size":{    

      "height":181.99,

      "width":164.99

    }

  }, 

  "card_region":[ 

     {"x":165,"y":657},

     {"x":534,"y":658},

     {"x":535,"y":31},

     {"x":165,"y":30}

   ],

  "face_rect_vertices":[  

      {  

         "x":1024.6600341796875,

         "y":336.629638671875

      },

      {  

         "x":906.66107177734375,

         "y":336.14801025390625

      },

      {  

         "x":907.1590576171875,

         "y":214.1490478515625

      },

      {  

         "x":1025.157958984375,

         "y":214.63067626953125

      }

    ],

  "name" : "张三",             

  "nationality": "汉",          

  "num" : "1234567890",           

  "sex" : "男",                 

  "birth" : "20000101",           

  "success" : true            

}

获取address: $.address $[‘address’]

获取card_region里面第一个里面x的值 $[0].x 或 $[0][‘x’]

你也可以使用 https://jsonpath.com/? 进行测试。


6. 需求反馈

前端事件功能正在快速迭代中,如果您在前端事件功能上有不能满足的地方,可以反馈给我们,我们会在后期的迭代过程进行参考!

提交需求


如对前端事件有任何疑问,还可以联系我们咨询:咨询技术支持


Peach是此帮助页面的作者。如果您对此页面的内容有任何意见,请在下方给她反馈。
有任何关于简道云的问题可拨打服务热线:400-111-0890 咨询(工作日:09:00-12:00;13:30-17:30)
本文是否对您有帮助?