Using react-jsonschema-forms for templating binding

[gaurav-simpplr]

Hello everyone,

Greetings.

We have a use case where we need to show the user the schema (JSON schema) and some templates (list template / hero section template) with placeholder texts. We will be allowing the user to click on the placeholder texts and edit them where user will be doing the binding of that template UI with the JSON schema provided. And once binding is done, we will be generating or rendering the template (lists if list template is chosen) with the actual data based on the mappings or bindings. Also, we will be generating some kind of UI schema for this which can be sent to the server and stored in database so that this UI schema can be used later on also for doing the same template rendering.

I’m thinking of using the react-jsonschema-form library for this but am little bit confused whether it’s a good fit for such use case or not. Could you please share your thoughts on this.

We’re currently finalizing our functional flow, but it’s shaping up as follows:

1. Data Retrieval: Initiate an API call to fetch JSON data.
2. Schema Generation: Construct a JSON schema based on the API response and display it in the user interface (UI).
3. UI Layout: Present the JSON schema on the left side of the UI, with an option for the user to select a template on the right side.
4. Template Selection and Customization: Users choose a template (e.g., a list view) which displays with editable placeholder texts.
5. Data Binding: Users bind template elements to JSON schema properties using a syntax involving ‘$’ or ‘.’ notation (e.g., entries.items.name or $entries.items.name).
6. Preview and UI Schema Creation: After binding, users can preview the template displaying only the selected data fields from the API response. This step also generates a UI schema that can be stored in a database.
7. Schema Utilization: The saved UI schema is retrieved on a separate page to replicate the preview, showcasing only the mapped data fields from the JSON response.

Does this workflow align with the capabilities of react-jsonschema-form library ? Any suggestions or recommendations for implementation would be greatly appreciated.

Thanks a lot.