#JSONForm : set fieldState dynamically

1 messages · Page 1 of 1 (latest)

vestal thicket
#

JSONForm can create a base form from provided data, but the fine tuning of each item must be edited manually. But if we could provide fieldState with a complete json, that will be completely dynamic.

tender shoreBOT
#

Hello! I?m Appsmithy, your Appsmith support bot.

Currently, the JSONForm widget allows you to generate forms dynamically from a JSON schema and data. However, the fieldState property is not designed to accept a complete JSON object to fully control all field configurations dynamically. Each field?s properties (like label, default value, visibility, etc.) must be set individually in the widget?s configuration panel or via the schema property using mustache syntax.

If you want to make the form fully dynamic, you should generate the schema and uiSchema dynamically in a JSObject and bind them to the JSONForm?s schema and uiSchema properties:

export default {
getDynamicSchema: () => {
return {
name: { type: "string", title: "Name" },
age: { type: "number", title: "Age" }
};
},
getDynamicUiSchema: () => {
return {
age: { "ui:widget": "updown" }
};
}
}

Then, in the JSONForm widget:

  • schema: {?{ JSObject1.getDynamicSchema() }?}
  • uiSchema: {?{ JSObject1.getDynamicUiSchema() }?}

This way, you can control the form fields dynamically via JS, but you still need to structure your schema and uiSchema according to the JSONForm?s requirements. There is no single fieldState property that takes a full JSON to control everything at once.

Let me know if you need an example for your specific use case!

If you don't find my response helpful, you can request to speak to a human agent.

#

Could you please help us file a feature request using this link? - https://github.com/appsmithorg/appsmith/issues/new?assignees=Nikhil-Nandagopal&labels=Enhancement&projects=&template=--feature-request.yaml&title=[Feature]%3A+
Please add details about your use case, how this feature would help you, and give an example if possible. Once you file the GitHub issue, please share the link to it with us, so we can forward it to our development team.

GitHub
Build software better, together

GitHub is where people build software. More than 150 million people use GitHub to discover, fork, and contribute to over 420 million projects.

vestal thicket
#

I think this is the same issue. And maybe a potential way to develop it fast.

tender shoreBOT
#

Thank you for sharing your feedback and suggestion! As an Appsmith support bot, I don?t have access to GitHub issues or the ability to track comments directly. However, your idea about making the JSONForm?s fieldState fully dynamic by accepting a complete JSON configuration is valuable and aligns with requests from other users.

For now, the recommended approach is to dynamically generate the schema and uiSchema using JSObjects, as described earlier. If you?d like your suggestion to be considered for future development, please continue to engage on the GitHub issue or email [email protected] with your detailed use case. This helps the product team prioritize feature requests.

If you need help with a workaround or dynamic schema generation, let me know!

If you don't find my response helpful, you can request to speak to a human agent.

vestal thicket
#

I can't see where we can provide a uishema in the widget. Maybe you can explain me

tender shoreBOT
#

Great question! In Appsmith, the JSONForm widget does not have a direct uiSchema property like some other libraries (e.g., react-jsonschema-form). Instead, Appsmith?s JSONForm uses the schema property to define the structure and configuration of your form fields.

You can control field properties (like labels, placeholders, required, etc.) directly within the schema JSON. Here?s an example:

json
{
"name": {
"label": "Full Name",
"type": "string",
"placeholder": "Enter your name",
"required": true
},
"age": {
"label": "Age",
"type": "number",
"min": 0,
"max": 120
}
}

You can generate this schema dynamically using a JSObject and bind it to the schema property of the JSONForm widget:

export default {
getSchema: () => ({
name: {
label: "Full Name",
type: "string",
placeholder: "Enter your name",
required: true
},
age: {
label: "Age",
type: "number",
min: 0,
max: 120
}
})
}

Then, in the JSONForm?s schema property, use:

{?{ JSObject1.getSchema() }?}

So, while there isn?t a separate uiSchema property, you can achieve similar customization by defining all field properties inside the schema itself.

Let me know if you need a more specific example!

If you don't find my response helpful, you can request to speak to a human agent.