FigTreeEvaluator to evaluate schema

General
1

Hi,
I was facing an issue with the requirement to auto populate a dropdown based on value from another dropdown, tried multiple ways but unable to sort that out.

Working on:
Auto populate a dropdown using the value from another dropdown

  1. I have used MaterialEnumControl but it’s just returning value of second dropdown not the first one .
  2. Tried to evaluate schema by FigTreeEvaluator but hard to understand the implemenation.
  3. Usage of useJsonForms and how to use it.

Help me if anyone knows any of the above.

Thanks in advance,
Varuu

2

Hi @Varuu,

Please post some detailed explanations of what you are trying to achieve and the code which fails for you. Otherwise it’s hard to help.

Note that the FigTreeEvaluator is a community project and I did not use it myself yet. Therefore I will not be able to help in detail with it.

3

Thank you for the reply @sdirix , I have registered a custom renderer to auto populate a dropdown using another dropdown that’s working but I am able to access the value of one dropdown only. Here Iam able to access only city but not country
`export const ArrayTester = rankWith(1000, scopeEndsWith(“region”));

const countryOptions = [
{ label: “USA”, value: “US” },
{ label: “United Kingdon”, value: “UK” },
];
const regionOptions = {
US: [
{ label: “IOWA”, value: “IOWA” },
{ label: “Texas”, value: “TX” },
],
UK: [
{ label: “Bedford”, value: “Bedford” },
{ label: “Surrey”, value: “Surrey” },
],
};

const ArrayRenderer = (props) => {
console.log(“propps”,props)
const { visible } = props;
const [regions, setRegions] = useState();
const [country, setCountry] = useState();
const onCountryChanged = (path, value) => {
setCountry(value);
setRegions(regionOptions[value]);
};
console.log(“regions”,regions[0])
return (

  <MaterialEnumControl 
    {...props}
    label={"Country"}
    options={countryOptions}
    handleChange={onCountryChanged}
    data={country}
  />

  <MaterialEnumControl
    {...props}
    label={"Region"}
    options={regions}
  />


</Hidden>

);
};

export default withJsonFormsControlProps(withJsonFormsEnumProps(ArrayRenderer));`

Screenshot (6)
Please help me if I can sort this out
And also I have tried multiple ways Got stuck at some points please look into if you can help in any of them

Can I add any index to each item in a field of array type in order to access every record.
How to add validations to a custom renderer.
I have seen useJsonForms is used to get whole form data into a custom renderer but when I did that its returning empty object for useJsonForms().core.data.

I think I can sort all things if I got answer for any of the above.

Thankful for your understandable approaches.

4

Thanks for the information. Can you also post the schema?

5

Screenshot (10)
Screenshot (11)

6

Generally speaking you have two different implementation options:

  1. Implement a single custom renderer for both the country and region properties. This renderer then renders two selects. Because it has both enums under control it’s easy to synchronize data between them. Or,
  2. Implement a custom renderer only for region. In there you consume also the data of the country property and offer corresponding select options.

The reusable JSON Forms bindings assume that the use case is to implement a renderer for a single property. So in case you want to handle multiple properties in one renderer then you get the props for one of the properties for free (the one which mentioned in the Control scope). The ones for the second have to be determined manually.

Normally it’s easier to have a separate renderer for each property, so I usually suggest to use approach 2. I don’t see a reason to not also got for that in your case. Note that your implementation looks like you tried to do approach 1.

Looking at the example you don’t need any special handling for country1 and therefore no custom renderer there. For region you want to do something like this:

import { Resolve } from '@jsonforms/core';
import { useJsonForms } from '@jsonforms/react';
import { Unwrapped } from '@jsonforms/material-renderers';
const { MaterialEnumControl } = Unwrapped;

const RegionRenderer = (props) => {
  const ctx = useJsonForms();
  const countryPath = useMemo(() => {
    const segments = props.path.split('.');
    segments.pop();
    segments.push('country1');
    return segments.join('.');
  }, [props.path]);
  const selectedCountry = Resolve.data(ctx.core.data, countryPath);
  const regionOptions = // determine [{label, value}] pairs depending on selected country. You can access the schema of 'region' via props.schema

  return <MaterialEnumControl {...props} options={regionOptions}/>
}

export default withJsonFormsControlProps(RegionRenderer);
7

Thank you @sdirix
This helped me but left with a small issue

  • Soon after selecting the value from the dropdown, value is not displaying in the field but can access the selected data.

How to sort this?

8

You mean in the renderer of country you can select a value but it’s not displayed correctly when selected?

  • Do you have a custom renderer for country in place?
  • How exactly does the schema for country look like?
9

Yes @sdirix , I have used custom renderers for both country and region I got to understand the problem for this every time I made changes in the form the whole form is re-rendering

10

@sdirix I have sorted this on my own by modifying data value using path.
data={Resolve.data(ctx.core.data, props.path)}
Thanks a lot for all the help

11

Hi @Varuu, just popping here to say, I’m the developer of FigTreeEvaluator, so please feel free to make an issue if you’d like clarification/help. I’m always keen to find ways to make it easier to make use of.

1 Like
12

@CarlosNZ Thank you for responding. Will post my issue there