Using JSONForms for templating binding

[Gaurav (Choudhary)]

Hello,

Greetings everyone.

I have a use case where I need to show the user the schema (JSON schema) and some templates (list template / hero section template) with placeholder texts. I 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, I will be generating or rendering the template (lists if list template is chosen) with the actual data based on the mappings or bindings. Also, 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 JSONForms 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.

Thanks.

[sdirix (Stefan Dirix)]

Hi @Gaurav,

In general, yes, this use case should be a good fit for JSON Forms. JSON Forms is very generic and supports changing the schema and/or uischema on the fly. If you post more detailed requirements, e.g. how do your schemas look, how the UX shall behave in detail etc. we could give you general recommendations regarding the implementation.

[Gaurav (Choudhary)]

Hi @sdirix,

Thank you for your response.

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 JSON Forms? Any suggestions or recommendations for implementation would be greatly appreciated.

Thank you.

Note: Our data could be very complex and dynamic. I’m sharing one here :

  {
    "next_marker": "",
    "limit": 100,
    "order": { "by": "interacted_at", "direction": "DESC" },
    "entries": [
      {
        "type": "recent_item",
        "interaction_type": "item_preview",
        "interacted_at": "2023-12-18T13:58:53+00:00",
        "item": {
          "type": "file",
          "id": "1388195116451",
          "file_version": {
            "type": "file_version",
            "id": "1521036470051",
            "sha1": "a59d51d161b52196aebde4f9c1585c206a9b08a3"
          },
          "sequence_id": "0",
          "etag": "0",
          "sha1": "a59d51d161b52196aebde4f9c1585c206a9b08a3",
          "name": "sample-wmv-file.wmv"
        },
        "interaction_shared_link": ""
      },
      {
        "type": "recent_item",
        "interaction_type": "item_preview",
        "interacted_at": "2023-12-15T08:15:12+00:00",
        "item": {
          "type": "file",
          "id": "1388195113292",
          "file_version": {
            "type": "file_version",
            "id": "1521036370892",
            "sha1": "c0ce6ad9a1c618722b8ec3779fdc4ef34cda5748"
          },
          "sequence_id": "1",
          "etag": "1",
          "sha1": "c0ce6ad9a1c618722b8ec3779fdc4ef34cda5748",
          "name": "sample-pdf-download-10-mB.pdf"
        },
        "interaction_shared_link": ""
      },
    ]
  }

Please also find attached the template placeholder and preview wireframes :

[sdirix (Stefan Dirix)]

Hi @Gaurav,

Generally speaking this flow seems to be a good fit for JSON Forms and in fact we already implemented applications like that in the past.

However, you should be aware that JSON Forms itself is “just” a form renderer framework with a lot of customization options. So for example the form editor needs to be implemented from scratch. Also the wireframes of the “list form” does not match what we provide out of the box, so you will need to implement this too.

You can check the (relatively old and no longer maintained) JSON Forms editor or this recent community project for inspiration on how to accomplish a flow similar to the one you described.

[Gaurav (Choudhary)]

Thanks a lot @sdirix for your reply and for sharing the links.

Could you also help me in achieving above these two steps :

2. Schema Generation: Construct a JSON schema based on the API response and display it in the user interface (UI).
3. 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.

As I will be only getting the JSON response from the API call (in step 1). And I need to show the JSON Schema to the user, can JSONForms library on the fly generates the JSON schema ? I checked this method :

Generate.jsonSchema(data);

But looks like it skips some nested properties while generating the schema.

Also, I need to do the same thing with the UI schema (generate it on the fly via API response data), can this be done via any library methods ?

Generate.uiSchema(JSONSchema);
This above method too doesn’t include the nested data values in it.

Is there any way these two schemas (JSON schema and UI schema) can be generated properly on the fly using libraries’ methods ?

Again, thanks a lot for the reply.

[sdirix (Stefan Dirix)]

@Gaurav

As I will be only getting the JSON response from the API call (in step 1). And I need to show the JSON Schema to the user, can JSONForms library on the fly generates the JSON schema ? I checked this method :

Generate.jsonSchema(data);

But looks like it skips some nested properties while generating the schema.

Our JSON Schema generator is very simplistic as it’s not a core functionality of JSON Forms. We only added the JSON Schema generator as a quick POC utility.

We generally assume that a consumer already has a JSON Schema at hand. If that’s not the case for you, you will need to implement such a generator for your data yourself. That’s useful anyway as a generator specialized for the typical patterns encountered in your data will always beat some generic implementation.

However there are a number of JSON Schema generators out there, so you might be able to just reuse one of them.

@Gaurav

Also, I need to do the same thing with the UI schema (generate it on the fly via API response data), can this be done via any library methods ?

Generate.uiSchema(JSONSchema);
This above method too doesn’t include the nested data values in it.

Our UI Schema generator only produces “shallow” UI Schemas, e.g. a VerticalLayout with a Control for each of an object’s properties. Each control has full ownership over their rendered content with the possibility to dispatch back to JSON Forms. So if a control refers to a nested object, the default renderer of this object-control will just generate a UI Schema for its nested object and then delegate back to JSON Forms. This way arbitrarily nested JSON Schemas (even recursive looping schemas) are supported by JSON Forms.

For more control such nested UI Schemas can also be handed over to JSON Forms “a priori” via the uischemas prop and/or directly nested within the root UI Schema.