机器数据分析平台

  • 机器数据分析平台 > 应用开发者文档 > APP开发手册 > APP开发说明 > 自定义前端展示 >自定义表单

    自定义表单

    最近更新时间:2021-03-19 18:07:42

    自定义表单简介

    Pandora 2.0 平台提供了常用的表单组件,支持通过 xml 的方式自定义图表属性的配置表单。比如自定义图表、自定义触发操作等功能,需要用户能够在前端填写相关的自定义参数。比如自定义图表需要用户选择图表样式选项,自定义触发操作需要用户填写邮件服务器地址等类似相关信息。

    这一节分为以下 4 点介绍配置自定义表单的方式:

    1. 配置表单的 xml 元素
    2. 定义表单校验规则
    3. 设置 input 元素的动态选项
    4. 定义 input 元素的过滤器

    1.配置表单的 xml 元素

    1.1. 表单元素

    form

    作为表单配置的顶层元素,所有 form 元素需使用 form 包裹。

    1.2. 布局元素

    Collapse:折叠面板

    属性 说明 类型 默认值
    defaultActiveKey 默认展开的 panel 的 keys,展开所有 ‘all’, 不展开 ‘none’ string 或 string[] ‘none’
    accordion 是否打开手风琴模式, 最多只能打开一个折叠板 boolean false

    Collapse.panel

    属性 说明 类型 默认值
    panelKey 当前 panel 的 key string ‘’
    title 标题 string ‘’

    1.3. 输入类型元素

    1.3.1. input

    公共属性

    属性 说明 类型 默认值
    field 属性名称, 嵌套类型可用 a.b string ’ ’
    required 是否必填,为 true 是自动做不能为空校验 boolean false

    公共子元素

    元素名称 描述 required
    rule 用于实现表单校验规则 no
    label 输入表单项的显示名称 yes
    initial-value 输入表单项的初始值 yes
    change 定义如何对 input 的输入或选择事件作出响应,参见 change。注:自定义表单的 change 元素不支持 link 子元素 no
    1.3.1.1. 文本输入类:输入值类型的表单元素

    text

    示例:

    <input type="text" field="name">
      <label>展示名称</label>
      <initial-value />
    </input>
    

    form_input_text.png

    number

    text类似,区别在于其值只能为数值类型。
    示例:

    <input type="number" field="size">
      <label>字号</label>
      <initial-value>12</initial-value>
    </input>
    

    form_input_number.png

    1.3.1.2. 选择类:选择输入类表单

    公共子元素:

    元素名称 描述 required
    choice 定义选择类表单的选项,<choice value="{value}">{label}</choice>,可以指定选项的{value}和对应的{label} no
    filter 用于过滤表单的选项 no
    dataset 用于动态指定表单元素的选项 no

    dropdown

    示例:

    <input type="dropdown" field="align">
      <label>对其方式</label>
      <initial-value>left</initial-value>
      <choice value="left">向左</choice>
      <choice value="center">居中</choice>
      <choice value="right">向右</choice>
    </input>
    

    form_input_dropdown.png

    multiselect

    <input type="multiselect" field="fields">
      <label>展示字段</label>
      <initial-value>["longitude", "latitude"]</initial-value>
      <choice value="one">longitude</choice>
      <choice value="two">latitude</choice>
      <choice value="avg(count)">avg(count)</choice>
    </input>
    

    form_input_multiselect.png

    radio

    <input type="radio" field="status">
      <label>标签显示状态</label>
      <initial-value>on</initial-value>
      <choice value="on">显示</choice>
      <choice value="off">隐藏</choice>
    </input>
    

    form_input_radio.png

    checkbox

    <input type="checkbox" field="displayMetrics">
      <label>数值显示</label>
      <initial-value>["value"]</initial-value>
      <choice value="value">数值</choice>
      <choice value="percentage">百分比</choice>
    </input>
    

    form_input_checkbox.png

    1.3.2 其他输入类型元素

    unit

    常用单位选择元素

    <input type="unit" field="unit">
      <label>单位</label>
      <initial-value>["none", "none"]</initial-value>
    </input>
    

    form_input_unit.png

    color-pick

    <input type="color" field="fontColor">
      <label>字体颜色</label>
      <initial-value>#111111</initial-value>
    </input>
    

    form_input_colorpick.png

    text-color-splitter

    初始值

    元素名称 描述 required
    color-palette 定义颜色,属性 type 只支持"list",参见 color-palette yes
    rules 定义 text 文本按照那种匹配规则,参见 rules yes
    <input type="text-color-splitter">
      <label>颜色</label>
      <initial-value>
        <color-palette type="list">['red', 'yellow']</color-palette>
        <rules>
          <rule type="startWith">Pandora</rule>
          <rule type="endWith">Portal</rule>
        </rules>
      </initial-value>
    </input>
    

    form_input_text_color_splitter.png

    number-color-splitter

    初始值

    元素名称 描述 required
    color-palette 定义颜色,属性 type 只支持"list",参见 color-palette yes
    scale 定义数值的范围 yes
    <input type="number-color-splitter">
      <label>颜色</label>
      <initial-value>
        <color-palette type="list">['blue', 'yellow', 'red']</color-palette>
        <scale>0,30,60,100</scale>
      </initial-value>
    </input>
    

    form_input_number_color_splitter.png

    1.4 条件渲染元素

    参见 view-condition

    2.定义表单校验规则

    2.1. 校验参数

    支持内置校验规则和自定义校验规则,目前支持通过 <pattern><required><function>元素校验表单内容。

    • pattern:通过正则表达式校验表单输入内容,输入正则字符串即可。例如:<pattern>\d<pattern>
    • required:标识该字段是否为必填项,可直接在表单通过 required 属性设置,在这里可通过<message>设置校验失败文案。
    • function:自定义函数,可在form.js中导出该函数名函数去校验。校验失败,函数返回错误提示,校验成功返回空串即可。函数参数为:
      • value: 当前表单值
      • config: 所有表单值
    <input type="number" field="valid">
      <label>标签</label>
      <initial-value>123</initial-value>
      <rule>
        <function>validator</function>
      </rule>
    </input>
    

    2.2 内置校验规则

    内置校验规则为 pattern 类型,直接作为 pattern 值传入即可。

    • 支持您校验表单输入内容是否为数值:
    <input type="number" field="field">
      <label>标签</label>
      <initial-value>123</initial-value>
      <rule>
        <pattern>number</pattern>
        <message>该字段必须为数值类型</message>
      </rule>
    </input>
    
    • 支持您校验表单输入内容是否为整数类型:
    <input type="number" field="decimal">
      <label>百分比小数位</label>
      <initial-value>2</initial-value>
      <rule>
        <pattern>integer</pattern>
        <message>该字段必须为整数类型</message>
      </rule>
    </input>
    

    3.根据搜索分析结果动态生成选项

    input的选项支持通过搜索分析结果动态生成,添加dataset标签即可。

    3.1 将搜索结果字段设置为input的选项

    dataset标签的值设置为"fields",可将搜索结果的所有字段名作为 input 的可选项。

    假设搜索结果为:

    longitude latitude avg(count)
    -118.2959851 34.0576289 200
    116.3579939 39.9587664 110
    -74.0392709 40.7590403 180

    如下:设置表单项分组字段的可选项是搜索果字段名,

    <input type="dropdown" field="bucket">
      <label>分组字段</label>
      <dataset>fields</dataset>
    </input>
    

    结果:

    generated_options.png

    3.2 将搜索结果字段对应的值设置为input的选项

    dataset标签的值为"column", 将搜索结果字段对应的值设置为input的选项。其中:

    field-for-value:设置可选项的值。
    field-for-label:设置可选项的值显示名称。

    仍然以上面的搜索结果为例,表单配置如下

    <input type="dropdown" field="avgValue">
      <label>平均值</label>
      <dataset>column</dataset>
      <field-for-label>avg(count)</field-for-label>
      <field-for-value>avg(count)</field-for-value>
    </input>
    

    配置效果:

    generated_options_column.png

    4.根据api请求结果动态生成选项

    input的选项支持通过api请求结果动态生成,添加api标签即可,api标签包含urlfield-name

    url:可以是完整的url也可以不加域名和端口。
    field-name:api返回用于options的字段名称,不填默认api返回数据是数组。

    field-for-value:设置可选项的值。
    field-for-label:设置可选项的值显示名称。

    <input type="multiselect" field="fields">
      <label>api模式</label>
      <initial-value>["longitude", "latitude"]</initial-value>
      <api>
       <url> <![CDATA[ /api/v1/dashboard?order=desc&pageNo=1&pageSize=100000&prefix=&sort=updateTime&withCharts=true]]></url>
       <field-name>dashboards</field-name>
      </api>
      <field-for-label>title</field-for-label>
      <field-for-value>id</field-for-value>
    </input>
    

    5.设置 input 元素的选项过滤器

    input元素支持自定义函数来过滤选项,在visualization.js中定义该函数并将函数名通过filter标签添加到input下方。函数参数为:

    • choice: 当前选项,包含以下属性:
      • value: 当前选项的值。
      • text: 当前选项的值对应的显示名称。
      • row: 当前选项对应的 dataset(搜索分析结果)行。
    • config: 所有表单元素。
    • row: 同 choice 标签里的 row 属性。
    • dataset: 当前图表对应的搜索结果数据。
    <input type="dropdown" field="avgValue">
      <label>平均值</label>
      <initial-value>column</initial-value>
      <filter>itemFilter</filter>
      <field-for-label>avg(count)</field-for-label>
      <field-for-value>avg(count)</field-for-value>
    </input>
    

    itemFilter函数定义:

    function itemFilter(choice, config, row, dataset) {
      return choice.value > 150
    }
    

    配置效果如下,可选项仅包含:200, 180

    input_filter.png

    6.自定义函数写法

    6.1 直接原生js文件,支持AMD模块的js

    function itemFilter(choice, config, row, dataset) {
      return choice.value > 150
    }
     define([], function() {
          return {itemFilter};
     });
    

    6.2 直接原生ts文件最后打包成AMD模块的js文件

    function itemFilter(choice, config, row, dataset) {
      return choice.value > 150
    }
    

    7. 自定义表单配置form.xml位置

    自定义触发操作:

    appserver/static/<APP_NAME>/<自定义触发操作名字>/form.xml
    
    例如:
    appserver/static/custom_triggers/webhook1/form.xml
    

    自定义可视化图表:

    appserver/static/visualizations/<自定义图表名字>/form.xml
    
    如
    appserver/static/visualizations/bulletGraph/form.xml
    
    以上内容是否对您有帮助?
  • Qvm free helper
    Close