"address_history": {
"schema": {
"addressHistory": {
"type": "object",
"properties": {
"currentAddress": {
"type": "string"
},
"currentAddressStartDate": {
"type": "string",
"format": "date"
},
"pastAddresses": {
"type": "array",
"items": {
"type": "object",
"properties": {
"addressOptions": {
"type": "string",
"enum": ["Same as current address", "Different address"]
},
"streetAddress": {
"type": "string"
}
},
"required": [
"streetAddress"
]
}
}
},
"required": ["currentAddress", "currentAddressStartDate"]
}
},
"ui_schema": {
"type": "Group",
"label": "Address History",
"elements": [
{
"type": "GroupDescription",
"label": "Please provide your physical addresses for the last five years (including inside and outside United States).",
"elements": [
{
"type": "GroupDescription",
"label": "What is your current address?",
"elements": [
{
"type": "Control",
"scope": "#/properties/addressHistory/properties/currentAddress",
"label": "Current Address",
"options": {
"customComponent": "currentAddressOption"
}
}
]
},
{
"type": "GroupDescription",
"label": "When did you start living in this address?",
"elements": [
{
"type": "Control",
"scope": "#/properties/addressHistory/properties/currentAddressStartDate",
"label": "Start Date",
"options": {
"format": "datePicker"
}
}
]
},
{
"type": "GroupDescription",
"label": "Past Addresses",
"elements": [
{
"type": "Control",
"scope": "#/properties/addressHistory/properties/pastAddresses",
"label": "Past Address",
"options": {
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/addressOptions",
"label": "Address Options",
"options": {
"format": "select"
}
},
{
"type": "Control",
"scope": "#/properties/streetAddress",
"label": "Street Address",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/addressOptions",
"schema": {
"const": "Different address"
}
}
}
}
]
}
}
}
]
}
]
}
]
}
}
Your Ui Schema contains non-default UI Schema elements, e.g. GroupDescription and non-default options, e.g. customComponent. You are likely using a custom renderer set. It seems like the renderer set does either not leverage the bindings appropriately or ignores the visible flag. I would like to recommend looking into these custom renderers.
When adjusting the schema to this:
{
"type": "object",
"properties": {
"addressHistory": {
"type": "object",
"properties": {
"currentAddress": {
"type": "string"
},
"currentAddressStartDate": {
"type": "string",
"format": "date"
},
"pastAddresses": {
"type": "array",
"items": {
"type": "object",
"properties": {
"addressOptions": {
"type": "string",
"enum": ["Same as current address", "Different address"]
},
"streetAddress": {
"type": "string"
}
},
"required": ["streetAddress"]
}
}
},
"required": ["currentAddress", "currentAddressStartDate"]
}
}
}
and UI Schema to this
{
"type": "Group",
"label": "Address History",
"elements": [
{
"type": "Group",
"label": "Please provide your physical addresses for the last five years (including inside and outside United States).",
"elements": [
{
"type": "Group",
"label": "What is your current address?",
"elements": [
{
"type": "Control",
"scope": "#/properties/addressHistory/properties/currentAddress",
"label": "Current Address",
"options": {
"customComponent": "currentAddressOption"
}
}
]
},
{
"type": "Group",
"label": "When did you start living in this address?",
"elements": [
{
"type": "Control",
"scope": "#/properties/addressHistory/properties/currentAddressStartDate",
"label": "Start Date",
"options": {
"format": "datePicker"
}
}
]
},
{
"type": "Group",
"label": "Past Addresses",
"elements": [
{
"type": "Control",
"scope": "#/properties/addressHistory/properties/pastAddresses",
"label": "Past Address",
"options": {
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/addressOptions",
"label": "Address Options",
"options": {
"format": "select"
}
},
{
"type": "Control",
"scope": "#/properties/streetAddress",
"label": "Street Address",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/addressOptions",
"schema": {
"const": "Different address"
}
}
}
}
]
}
}
}
]
}
]
}
]
}
then the rule works fine
thank you for your reply, I want to have an array type, but with custom styles and i want to be able to move around the add button to the bottom, have my own svg for buttons and other stuff. What do I need to do for it. Should I create a custom renderer and copy most of the code from here node_modules/@jsonforms/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
Yes that’s the most straightforward way.
Either copy the ArrayControlRenderer or the TableArrayControl depending on which kind of rendering you would like to have.
Just wanted to follow up let you know I copied it and my problem is solved, thank you so much. Just incase someone is looking for it. it has some tweaks for my usecase but still here it is.
import range from “lodash/range”;
import React, { useMemo } from “react”;
import {
ArrayControlProps,
composePaths,
createDefaultValue,
findUISchema,
Helpers,
ControlElement,
rankWith,
optionIs,
isObjectArrayControl,
isPrimitiveArrayControl,
or,
and,
} from “@jsonforms/core”;
import {
JsonFormsDispatch,
withJsonFormsArrayControlProps,
} from “@jsonforms/react”;
const { convertToValidClassName } = Helpers;
const ordinal: Record<number, string> = {
0: “First”,
1: “Second”,
2: “Third”,
3: “Fourth”,
4: “Fifth”,
5: “Sixth”,
6: “Seventh”,
7: “Eighth”,
8: “Ninth”,
9: “Tenth”,
};
export const ArrayControl = ({
data,
label,
path,
schema,
errors,
addItem,
removeItems,
moveUp,
moveDown,
uischema,
uischemas,
renderers,
rootSchema,
translations,
…props
}: ArrayControlProps) => {
const controlElement = uischema as ControlElement;
const childUiSchema = useMemo(
() =>
findUISchema(
uischemas || ,
schema,
uischema.scope,
path,
undefined,
uischema,
rootSchema
),
[uischemas, schema, uischema.scope, path, uischema, rootSchema]
);
const isValid = errors.length === 0;
if (props.visible === false) return null;
return (
{errors}
{data ? (
range(0, data.length).map((index) => {
const childPath = composePaths(path,
${index});const ordinalIndex =
uischema.options?.startsWith !== undefined
? index + uischema.options.startsWith
: index;
return (
{ordinal[ordinalIndex] ??
#${index + 1}} {label || “item”} {data.length > 1 ? (
<button
className="text-[#9D9D9D] text-sm hover:text-black hover:underline"
aria-label={translations.removeAriaLabel}
onClick={() => {
if (
window.confirm(
"Are you sure you wish to delete this item?"
)
) {
removeItems && removeItems(path, [index])();
}
}}
>
Remove
</button>
) : null}
</header>
<JsonFormsDispatch
schema={schema}
uischema={childUiSchema || uischema}
path={childPath}
key={childPath}
renderers={renderers}
/>
</div>
);
})
) : (
<p>{translations.noDataMessage}</p>
)}
</div>
<button
className="w-full max-w-[400px] border-dashed border h-12 rounded-xl font-semibold mb-8"
onClick={addItem(path, createDefaultValue(schema, rootSchema))}
>
<img
className="inline-block"
src="/assets/images/arrayList-add.svg"
alt=""
/>
Add {label}
</button>
</div>
);
};
export const ArrayControlRenderer = ({
schema,
uischema,
data,
path,
rootSchema,
uischemas,
addItem,
removeItems,
moveUp,
moveDown,
id,
visible,
enabled,
errors,
translations,
}: ArrayControlProps) => {
const controlElement = uischema as ControlElement;
const labelDescription = Helpers.createLabelDescriptionFrom(
controlElement,
schema
);
const label = labelDescription.show ? labelDescription.text : “”;
return (
<ArrayControl
data={data}
label={label || “”}
path={path}
schema={schema}
errors={errors}
addItem={addItem}
removeItems={removeItems}
moveUp={moveUp}
moveDown={moveDown}
uischema={uischema}
uischemas={uischemas}
rootSchema={rootSchema}
id={id}
visible={visible}
enabled={enabled}
translations={translations}
/>
);
};
export const CustomArray = withJsonFormsArrayControlProps(ArrayControlRenderer);
export const customArrayTester = rankWith(
1000,
or(
and(isObjectArrayControl, optionIs(“custom”, true)),
and(isPrimitiveArrayControl, optionIs(“custom”, true))
)
);