Dependency Dropdowns

General
1

I have implemented a custom renderer for a dropdown and need to show a second dropdown based on the value selected in the first dropdown. The second dropdown should only appear if the value of the first dropdown matches a specific condition.

I attempted to achieve this using the following rule:

{
“type”: “Control”,
“scope”: “#/properties/otherDocuments/properties/diversityClassificationCode”,
“rule”: {
“effect”: “SHOW”,
“condition”: {
“scope”: “#/properties/otherDocuments/properties/docType”,
“schema”: { “const”: “41c980” }
}
}

However, the second dropdown is always visible, regardless of the condition. I am using the following DropDownTester:

export const DropDownTester: any = rankWith(
100,
and(
uiTypeIs(“Control”),
schemaMatches((schema: any) => {
console.log(“schema”, schema);
if (schema.hasOwnProperty(“customRender”)) {
var cellschema: any = schema;
return cellschema[“customRender”] === “dropdown”;
}
return false;
})
)
);

This is my schema

Screenshot 2024-07-24 at 1.22.16 PM
Screenshot 2024-07-24 at 1.22.16 PM998×910 76.9 KB

Can anybody please help me with this?

2

Hi @Sushma,

Each renderer has to make sure that it follows the hints given by JSON Forms. In your custom renderer, do you check the visible prop? If it is false then you should return null in your renderer.

3

yeah it worked actually, Thank you