menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

JSONForms

JSON Forms is a JSON Schema based approach for creating forms and comes with support for React, Angular and Vue. Support here is free, but might involve some delay in the replies based on our current workload for paying customers. We also offer PROFESSIONAL SUPPORT packages to get you started quickly with JSON Forms and to help you with any questions and technical difficulties for JSON Forms with guaranteed response time and in-depth technical solutions. For details please see our web page linked below.

Channels
Team

Misunderstanding something about scope

March 10, 2021 at 9:50pm

Misunderstanding something about scope

March 10, 2021 at 9:50pm
Hi all, I'm losing my mind over this error a little bit. I'm trying to put a Categorization inside another Categorization, and this appears to be breaking something (thought I'm really just guessing about the cause at this point). Code in the comments:

March 10, 2021 at 9:51pm
The topmost Control with scope #/properties/ID renders as a textarea, but the one at the bottom does not. What is causing the scope to change inside that second categorization (if that's even what's happening)?
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Experiments",
"elements": [
{
"type": "ListWithDetail",
"scope": "#/properties/experiments",
"options": {
"labelRef": "#/items/properties/ID",
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/ID"
},
{
"type": "Control",
"scope": "#/properties/preExperimentMeasurementIDs"
},
{
"type": "Control",
"scope": "#/properties/postExperimentMeasurementIDs"
}
]
},
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Sequential",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/ID"
},
Edited

March 11, 2021 at 8:36am
Hi (henry-oconnor), can you provide a complete example with which I can reproduce the issue, i.e. a JSON Schema and UI Schema? From a first glance both controls should render the same way, as Categorization is only a visual element and doesn't affect scope resolution.
You said that your control renders as a textarea. As I don't see a options: { multi: true }, are you using a custom renderer?

March 11, 2021 at 2:54pm
Sorry, I meant textfield. Here are the schemas:
UI Schema
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Experiments",
"elements": [
{
"type": "ListWithDetail",
"scope": "#/properties/experiments",
"options": {
"labelRef": "#/items/properties/ID",
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/ID"
}
]
},
{
"type": "Categorization",
"elements": [
{
"type": "Category",
"label": "Sequential",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/ID"
}
]
}
]
}
]
}
]
}
}
}
]
}
]
}
Schema
{
"$id": "#schema",
"type": "object",
"properties": {
"experiments": {
"type": "array",
"items": {
"type": "object",
"properties": {
"ID": {
"type": "string"
}
},
"additionalProperties": false,
"additionalItems": false
}
}
},
"required": [
"experiments"
]
}
Data
{
"experiments": [
{
"ID": "Experiment 1"
}
]
}
Edited
I can't reproduce the issue. I tried it with the current JSON Forms 2.5.0, with the previous version 2.4.1 and also with the prerelease 2.5.1-alpha.1 and it worked for me in all of them.
Are your JSON Forms versions aligned, i.e. are you using the same version for /core, /react and /material-renderers? What else do you do besides invoking JSON Forms? Could you share the code?
Ah I just realized.... You're using the Angular variant of JSON Forms. There I can reproduce the issue.
Yeah, I should have mentioned that. Damn, I was hoping it was a mistake on my part.
Created an issue: #1713
like-fill
1
The fix is probably not too hard. I guess that somewhere the correctly scoped JSON Schema is not used. Probably it gets lost from ListWithDetail -> Categorization, so that the Categorization always works on the root schema instead of the appropriately scoped one. It has to be an Angular renderer set issue as it works in general as can be seen in the React renderer set. Would you be interested in contributing a fix?
Sure, I'll do a little digging this weekend and see if I can figure it out. Thank you for your help!
Edited