如何在MuleSoft 4自定义政策中配置单选按钮控件

我正在创建MuleSoft 4自定义政策，希望添加单选按钮控件。当前JSON Schema中该字段配置如下：

"RadioButtons": {
    "type": "string",
    "title": "Radio Buttons",
    "enum": ["Option1 value", "Option2 value"]
}

但在政策配置UI中它显示为下拉菜单，不符合需求。我查阅了MuleSoft自定义政策文档，但关于JSON Schema的说明非常有限。我无法访问Cloudhub使用的uischema文件，只能通过JSON Schema来修改控件类型。

补充说明：
我的问题针对的是发布政策到Exchange时上传的JSON Schema文件。.yaml定义文件已定义政策属性，但JSON Schema负责在API Manager中生成UI。当前JSON Schema完整内容如下：

{
  "title": "BPDCustomPolicy",
  "type": "object",
  "description": "Custom Policy Test",
  "properties": {
    "policymessage":{ 
        "title": "Policy Message",
        "type": "string",
        "description": "The message that the policy will send to the api"
    },
    "policyarray":{ 
        "title": "Policy Array",
        "type": "array",
        "description": "The policy will send this array along with the request.",
        "items": {
            "type": "string"
        }
    },
    "policychbox1":{ 
        "title": "Policy Check Box 1",
        "type": "boolean",
        "description": "This is unchecked by default."
    },
    "policychbox2":{ 
        "title": "Policy Check Box 2",
        "type": "boolean",
        "description": "This is checked by default.",
        "const": false
    },
    "RadioButtons": {
        "type": "string",
        "title": "Radio Buttons",
        "enum": ["Option1 value", "Option2 value"],
        "enumNames" : ["Option1","Option2"]
    }
  },
  "required": [ 
    "policymessage",
    "policyarray",
    "policychbox1",
    "policychbox2"
  ],
  "@context": {
    "@vocab": "anypoint://vocabulary/policy.yaml#",
    "security": "anypoint://vocabulary/policy.yaml#"
  },
  "$id": "basic-authentication-simple",
  "$schema": "https://json-schema.org/draft/2019-09/schema"
}

我已拥有.yaml定义文件，其中已定义单选按钮控件：

#%Policy Definition 0.1
id: BPDCustomPolicy
name: BPDCustomPolicy
description: BPDCustomPolicy
category: Custom
type: custom
resourceLevelSupported: true
encryptionSupported: false
standalone: true
requiredCharacteristics: []
providedCharacteristics: []
configuration: 
  - propertyName: policymessage
    name: Policy Message
    description: The message that the policy will send to the request.
    type: string
    optional: false
    sensitive: false
    allowMultiple: false
    defaultValue: "This is the default message"
  - propertyName: policyarray
    name: Policy Array
    description: The policy will send this array along with the request.
    type: array
    optional: false
    sensitive: false
    allowMultiple: true
  - propertyName: policychbox1
    name: Policy Check Box 1
    description: This is unchecked by default.
    type: boolean
    defaultValue: false
    optional: false
    sensitive: false
    allowMultiple: false
  - propertyName: policychbox2
    name: Policy Check Box 2
    description: This is checked by default.
    type: boolean
    defaultValue: true
    optional: false
    sensitive: false
    allowMultiple: false
  - propertyName: RadioButtons
    name: Radio Buttons
    description: Property Description
    type: radio
    options:
    - name: Option1
      value: Option1 value
    - name: Option2
      value: Option2 value
    optional: true
    sensitive: false

如您所见，我已在.yaml中定义了单选按钮控件，但Cloudhub发布向导同时要求上传JSON Schema和.yaml定义文件，目前UI仍显示为下拉菜单，请问如何通过JSON Schema配置实现单选按钮？

解决方法 #

MuleSoft允许在JSON Schema中通过自定义扩展属性指定UI控件类型，你需要在RadioButtons字段的属性中添加x-anypoint-ui配置，强制渲染为单选按钮。

修改后的RadioButtons字段配置 #

"RadioButtons": {
    "type": "string",
    "title": "Radio Buttons",
    "enum": ["Option1 value", "Option2 value"],
    "enumNames": ["Option1", "Option2"],
    "x-anypoint-ui": {
        "widget": "radio"
    }
}

完整修改后的JSON Schema #

{
  "title": "BPDCustomPolicy",
  "type": "object",
  "description": "Custom Policy Test",
  "properties": {
    "policymessage":{ 
        "title": "Policy Message",
        "type": "string",
        "description": "The message that the policy will send to the api"
    },
    "policyarray":{ 
        "title": "Policy Array",
        "type": "array",
        "description": "The policy will send this array along with the request.",
        "items": {
            "type": "string"
        }
    },
    "policychbox1":{ 
        "title": "Policy Check Box 1",
        "type": "boolean",
        "description": "This is unchecked by default."
    },
    "policychbox2":{ 
        "title": "Policy Check Box 2",
        "type": "boolean",
        "description": "This is checked by default.",
        "const": false
    },
    "RadioButtons": {
        "type": "string",
        "title": "Radio Buttons",
        "enum": ["Option1 value", "Option2 value"],
        "enumNames" : ["Option1","Option2"],
        "x-anypoint-ui": {
            "widget": "radio"
        }
    }
  },
  "required": [ 
    "policymessage",
    "policyarray",
    "policychbox1",
    "policychbox2"
  ],
  "@context": {
    "@vocab": "anypoint://vocabulary/policy.yaml#",
    "security": "anypoint://vocabulary/policy.yaml#"
  },
  "$id": "basic-authentication-simple",
  "$schema": "https://json-schema.org/draft/2019-09/schema"
}

将修改后的JSON Schema重新上传到Exchange后，API Manager会读取x-anypoint-ui扩展属性，将该字段渲染为单选按钮而非下拉菜单。这个属性是MuleSoft针对Anypoint平台的JSON Schema扩展，专门用于控制UI渲染行为。

内容的提问来源于stack exchange，提问作者DPB