多字段表单(WebView2) 公开

FaniX 更新于 2022-08-10 10:45 | 2 | (0) | 78
分类
点赞
炸鸡爱上冰可乐 sharklaka 2 人点赞了这个动作。
更多信息
分享人 FaniX
分享时间 2022-07-22 14:45
最后更新 2022-08-10 10:45
修订版本 5
子程序大小 28 KB
Quicker版本 1.34.15.0

介绍

基于WebView,高度动态的多字段表单

示例动作

表单定义格式:

[
    {
        "key": "user2", // 输出词典的键
        "type": "textSelect", // 字段类型,可选值: "text","textMultiline","number","select","textSelect",
                              // "password","color","date","time","datetime","checkbox","message","submit"
        "label": "用户2", // 变量名提示文字
        "enableAt": "{user1}!=''", // 可见性表达式,JavaScript语法,{var}表示`var`字段的值
        "options": [ // "select"和"textSelect"字段的可选项
             {"value":"张三", "enableAt":"{user1}!='张三'"},
             "李四", // 相当于`{"value":"李四", "label":"李四", "enableAt":true}`
             "王五"
        ],
        "value": "{{name}}", // 字段的默认值,{{var}}表示使用quicker变量
        "eval": {
            "user2": { "value": "$={user2}", "enableAt": "{用户人数}==1" }
        },
        "invalidAt": [
            {"message": "不合法的名称", "enableAt": "{user2}=={user1}" }
        ],
       "helpText" : [ // 提示文字
           "第二名用户",
           { "value": "超出规定的用户人数", "type": "warning", "enableAt": "{用户人数}<2" }
       ],
       // 以下为其他html属性
        "placeholder": "在这里输入用户名",
        "disabled": { "enableAt": "{用户人数}<2" },
        "maxLength": [
             10,
             {"value":"4", "enableAt":"{user1}=='张三'"}
        ] // 单值属性生效顺序为满足可见性表达式的所有项中最后一项
    },
    {...} // 更多字段
]

其中"key", "type", "label", "options", "value", "enableAt", "eval", "helpText", "invalidAt"为保留属性,其他字段为相应控件的HTML元素属性

字段和控件属性均支持动态赋值:

  • 字段动态赋值规则记录在eval项下。
    • eval项可以是一个表达式字符串或一个object。
    • 如果该项为字符串,那么任一其他控件值改变时,该控件的值将赋值为表达式字符串的运行值
    • 可以使用object传递更详细的赋值规则,其格式为{ "var" : {"value" : ..., "enableAt" : ...},...}
      • 其中var代表当var控件的值改变时改变当前控件的值,
      • value是要赋值的值,以"$="开头表明使用javascript表达式语法
      • eableAt是赋值条件,只有满足该条件才会进行动态赋值。使用javascript表达式语法,不需要以"$="开头
  • 控件属性动态赋值记录在相应的属性名下。
    • 例如如果要给maxLength(文本输入框的最大字符数)属性动态赋值,就在maxLength项下写赋值规则
    • 赋值规则可以是单个值、一个object,或者一个包含多个值和object的array
    • 如果是单个值,那么该项将在表单创建时赋给相应HTML控件元素
    • object可以传递更详细的赋值规则,其格式为{"value" : ..., "enableAt" : ...}
      • value是要赋值的值,以"$="开头表明使用javascript表达式语法
      • eableAt是赋值条件,只有满足该条件才会进行动态赋值
      • 如果eableAt缺省,那么默认为true,即始终进行动态赋值
      • 如果value却省,那么默认为{"value":"","eval":null}
      • 此处设置的是HTML元素属性,一些属性无论赋何值均有效果(如hiddendisabled),如需去除这些属性,请使用{"value":null}(详见示例动作)
    • 可以使用array传递多条规则,此时以最后一条满足enableAt条件(包括缺省)的规则为准。
  • 提示文字helpText格式与控件属性类似,但还支持额外的type(提示类型,可选"success","info","warning","error")属性(详见示例动作)
  • 有效性检查规则记录在invalidAt项下
    • 规则可以是单个表达式字符串、一个object或一个包含多个表达式字符串和object的array
    • object的格式为{"message" : ..., "enableAt" : ...}
      • enableAt是有效性检查提示字段无效的条件,使用javascript表达式语法。
      • message是字段提示文字,可以留空或为空。以"$="开头表明使用javascript表达式语法。
    • 可以使用array传递多条规则,以最后一条满足enableAt或字符串表达式的规则为准。

子程序的参数

输入
表单定义 JSON格式的表单定义 Text
窗口标题 窗口标题文字 Text
窗口图标 显示在窗口左上角的图标。支持fa:内置图报名:#RRGGBB或图标网址。 Text
窗口尺寸/位置 设置选择窗口的尺寸,格式为:宽度,高度。支持像素数值或屏幕宽高百分比,详情请参考模块文档。 “窗口位置” 类型为 “自定义位置” 时用于指定显示位置,格式为:left,top,right,bottom Text
当前程序上下文 Any
输出
输出到词典 Dict

最近更新

修订版本 更新时间 更新说明
5 2022-08-10 10:45 修复已知错误
4 2022-08-03 22:36 增加invalidAt功能
修复已知问题
3 2022-07-25 19:57 支持传入quicker变量,格式为{{var}}

最近讨论

暂无讨论