Hi! Im trying to replace the labels from my froms by using data from a language.json but its not working at all.
This is my language.json:
{
"default": {
"sectionIcon": "Section Icon",
"version": "Version",
"bodyBackground": "Body Background",
"title": "Title"
},
"es": {
"sectionIcon": "Icon de Sección",
"version": "Versión",
"bodyBackground": "Color de Fondo",
"title": "Título"
},
"en": {
"sectionIcon": "Section Icon",
"version": "Version",
"bodyBackground": "Body Background",
"title": "Title"
}
}
Few things to keep in mind. Im using this config.json for the data:
config.json
{
"app": {
"sectionIcon": "fa-solid fa-home",
"version": "1.0.0"
},
"ui": {
"sectionIcon": "fa-solid fa-paintbrush",
"bodyBackground": "#0db2e0"
},
"resources": {
"sectionIcon": "fa-solid fa-layer-group",
"title": "MyTitle"
}
}
And im using this function to generate the corresponding uiSchema:
const generateUiSchema = (config, languages, selectedLang) => {
const createUiSchema = (obj, title) => {
if (typeof obj !== 'object' || obj === null) {
const label = languages?.[selectedLang]?.[title] || languages?.default?.[title] || title;
return { type: 'Control', scope: `#/properties/${label}`, label };
}
const elements = [];
Object.keys(obj).forEach(key => {
if (key !== 'sectionIcon') {
const label = languages?.[selectedLang]?.[key] || languages?.default?.[key];
if (typeof obj[key] === 'object' && obj[key] !== null) {
elements.push({
type: 'Group',
label: label,
elements: [createUiSchema(obj[key], label)]
});
} else {
elements.push({
type: 'Control',
scope: `#/properties/${label}`,
options: { label: label }
});
}
}
});
return { type: 'VerticalLayout', elements };
};
return createUiSchema(config, 'root');
};
This is how i render the forms:
<JsonForms
schema={schema.properties[selectedSection]}
uischema={uiSchemas[selectedSection]}
data={data[selectedSection]}
renderers={customRenderers}
cells={materialCells}
ajv={ajv}
onChange={({ data: updatedData }) => {
setData(prevData => {
const newData = {
...prevData,
[selectedSection]: updatedData
};
localStorage.setItem('formData', JSON.stringify(newData));
return newData;
});
}}
/>
Notice that im rendering the selected section, whitch is one the main objects of my config.json (app, ui, resources…)