There is a dropdown field which i am trying to display using custom renderer.
const { MaterialEnumControl, MaterialBooleanControl } = Unwrapped;
const CustomControlComponent = (props) => {
const { data, handleChange, path, visible, schema, errors } = props;
const isValid = errors ? errors.length === 0 : true;
console.log({props})
// Custom logic: Reset field when hidden
useEffect(() => {
if (!visible && data) {
handleChange(path, undefined); // Reset value if hidden
}
}, [visible, data]);
useEffect(() => {
console.log("Enum Length: ", schema?.enum?.length);
}, [schema]);
return (
<></>
);
};
export default withJsonFormsEnumProps(withTranslateProps(React.memo(CustomControlComponent)), false);
In jsonform component i have
const schema = {
“type”: “object”,
“properties”: {
“eligibility”: {
“type”: “string”,
“enum”: [“Yes”, “No”]
},
“participation”: {
“type”: “string”,
“enum”: [“Yes”, “No”],
},
“futureParticipation”: {
“type”: “string”,
“enum”: [“Yes”, “No”],
},
“reconsiderFutureParticipation”: {
“type”: “string”,
“enum”: [“1 month”, “2 months”, “3 months”, “4 months”, “5 months”, “6 months”, “7 months”, “8 months”, “9 months”, “10 months”, “11 months”, “12 months”]
},
“nonParticipationOtherReason”: {
“type”: “string”
},
“disqualificationReason”: {
“type”: “string”,
“enum”: [“Reason 1”, “Reason 2”, “Reason 3”, “Reason 4”, “Reason 5”, “Reason 6”],
},
“disqualificationOtherReason”: {
“type”: “string”
},
}
};
const uischema = {
“type”: “VerticalLayout”,
“elements”: [
{
“type”: “Group”,
“elements”: [
{
“type”: “Control”,
“label”: “Was the patient eligible for program?”,
“scope”: “#/properties/eligibility”,
“options”: {
“format”: “radio”
}
},
{
“type”: “Control”,
“label”: “Will the patient participate in the program?”,
“scope”: “#/properties/participation”,
“options”: {
“format”: “radio”
},
“rule”: {
“effect”: “ENABLE”,
“condition”: {
“scope”: “#/properties/eligibility”,
“schema”: {
“const”: “Yes”
}
}
}
},
{
“type”: “Control”,
“label”: “Did the patient express interest in reconsidering in the future?”,
“scope”: “#/properties/futureParticipation”,
“options”: {
“format”: “radio”
},
“rule”: {
“effect”: “SHOW”,
“condition”: {
“scope”: “#”,
“schema”: {
“properties”: {
“participation”: {
“const”: “No”
},
“eligibility”: {
“const”: “Yes”
}
},
“required”: [
“participation”,
“eligibility”
]
}
}
}
},
{
“type”: “Control”,
“label”: “Suppress additional alerts until:”,
“scope”: “#/properties/reconsiderFutureParticipation”,
“rule”: {
“effect”: “SHOW”,
“condition”: {
“scope”: “#”,
“schema”: {
“properties”: {
“futureParticipation”: {
“const”: “Yes”
},
“eligibility”: {
“const”: “Yes”
},
“participation”: {
“const”: “No”
}
},
“required”: [
“futureParticipation”,
“eligibility”,
“participation”
]
}
}
}
},
{
“type”: “Control”,
“label”: “Why was the patient not eligible for program?”,
“scope”: “#/properties/disqualificationReason”,
“rule”: {
“effect”: “SHOW”,
“condition”: {
“scope”: “#/properties/eligibility”,
“schema”: {
“const”: “No”
}
}
}
},
{
“type”: “Control”,
“label”: “disqualificationOtherReason”,
“scope”: “#/properties/disqualificationOtherReason”,
“rule”: {
“effect”: “SHOW”,
“condition”: {
“scope”: “#”,
“schema”: {
“properties”: {
“disqualificationReason”: {
“const”: “Other”
},
“eligibility”: {
“const”: “No”
}
},
“required”: [
“disqualificationReason”,
“eligibility”
]
}
}
}
}
]
}
]
};
const renderers = [
…materialRenderers,
// register custom renderers
{
tester: yourTester,
renderer: CustomControlComponent,
},
];
const yourTester: RankedTester = (uischema: any) => {
console.log('UISchema:', uischema);
return uischema.scope === '#/properties/disqualificationReason' ? 5 : -1;
};
return (
<div>
<JsonForms
schema={schema}
data={filteredData}
uischema={uischema}
renderers={renderers}
cells={materialCells}
middleware={middleware}
onChange={({ data, errors }) => {
console.log({ data })
if (JSON.stringify(data) !== JSON.stringify(formData)) {
setFormData(data)
}
}}
/>
</div>
);
with this i cannot see the dropdown list in the UI. Could you help me with this issue.