UISchema - Radio Buttons are rendered as a Combobox?

Hi,
I am using JsonFomrs 3.0.0-beta2. I want t use Radio buttons so I added a enum into my schema. Also I added the option “format”:“radio” to the UISchema. But the option list is always rendered as a combobox.
Are RadioButtons supported?

===
Ralph

Checked the same lately and it seems not to work at least in The Vue-vanilla renderer.

This and the question "how to do a custom renderer for “vue-vanilla” (to solve such issues and create own cool controlls) killing’ me ATM. :frowning_face:

Something like Custom Renderers - JSON Forms for The Vue-vanilla renderer… I’m lost…

best regards,
Svnt

Hi!

Each renderer set has different support for the respective UI Schema options.

format: 'radio' should work in React Material, React Vanilla and Vue 2 Vuetify.

@rsoika can you post which renderer set you’re using and how exactly your schema / UI schema looks like?

1 Like

Hi @sdirix

my react JSONForms integration looks like this:

					ReactDOM.render(
						<JsonForms
							data={bpmnPropertiesData}
							schema={bpmnPropertiesSchema}
							uischema={bpmnPropertiesUISchema}
							cells={vanillaCells}
							renderers={vanillaRenderers}
							onChange={({ errors, data }) => this.setState({ data })}
						/>,
						this.bodyDiv
					);

The data JSON is:

{"name":"Gateway-1sdf","documentation":"asfasf","gatewaydirection":"Mixed"}

The Schema:

{
	"properties": {
		"name": {
			"type": "string"
		},
		"documentation": {
			"type": "string",
			"description": "Element description"
		},
		"gatewaydirection": {
			"type": "string",
			"enum": [
				"Converging",
				"Diverging",
				"Mixed",
				"Unspecified"
			]
		}
	}
}

and the UISchema looks like this:

{
	"type": "Categorization",
	"elements": [
		{
			"type": "Category",
			"label": "General",
			"elements": [
				{
					"type": "HorizontalLayout",
					"elements": [
						{
							"type": "Control",
							"scope": "#/properties/name"
						},
						{
							"type": "Control",
							"scope": "#/properties/gatewaydirection",
							"label": "Direction"
						}
					]
				}
			]
		},
		{
			"type": "Category",
			"label": "Attributes",
			"elements": [
				{
					"type": "VerticalLayout",
					"elements": [
						{
							"type": "Control",
							"scope": "#/properties/documentation",
							"label": "Documentation",
							"options": {
								"format": "radio",
								"multi": true
							}
						}
					]
				}
			]
		},
		{
			"type": "Category",
			"label": "Workflow",
			"elements": [
				{
					"type": "HorizontalLayout"
				}
			]
		}
	]
}

But the result is a Combobox:

Did you see what I am doing wrong?

Hi @rsoika,

in the given UI Schema format: 'radio' is specified for a control pointing to #/properties/documentation. However that is just modeled as a regular string, so this has no effect.

In the screenshot your pointing to the Direction control. Therefore you should specify format: 'radio' for the control pointing to #/properties/gatewaydirection.

Oh! I’m really sorry. That was my mistake. Radio buttons work very well if you configure them correctly.

1 Like

Hi @sdirix,

Does the Vue 3 Vanilla support radio button? I’ve followed the online documentation but it keeps showing as a combo box.

Thanks

Hi @yyf,

At the moment we don’t provide a radio variant in the vue-vanilla renderer set. However if you, or someone else, would like to contribute such a renderer then feel free to open a PR.

Of course you can also handle it with a custom renderer in your application.

1 Like