[GSoC’21] JSON Schema WebUI Generator – II

Prologue

Welcome back!, This blog is for the first evaluation of the project.

Recap

In the prev section, we saw a viable way-out for the inconsistency of the generator tool for the latest version of the schema(2020-12) by mentioning some frameworks and also some targets.

Frameworks Review

I have tested the frameworks with the draft 7 version of the schema and I evaluated the framework by noting down the pros and cons of the results by each framework.

  • UI schema for react: This framework supports very advanced features of the schema, but has less UI integration. Also the framework supports the 2019-09 version of the schema but sadly UI schema cannot be segregated from our original JSON schema.
  • React JSON schema forms: This framework supports basic features of the schema and also has good UI customization, but has less integration of validation UI.
  • Restspace schema forms: This framework supports basic features of schema, but misses proper documentation.
  • JSONForms (eclipse source): This framework supports basic features of the schema and also has good UI customization with limited options.

A full document of the pros and cons of the frameworks can be found here.

Summary

By considering all the pros and cons of each framework, my mentor Andi and I have decided to work on with JSONForms (eclipse source).

Ongoing Status

I rewrote the schema for the API generator tool to the draft 7 version of JSON schema also I have added formats to the schema. And generated the forms from the schema. I have been using React library (JSONForms) to generate the forms. Also, I developed the UI schema which is required to generate the form.

I have rendered the form, and also the bounded data of the form, which is the current data of the in the form and will be updated on change of the form data. Also, I have rendered the validations errors to show all the validation errors at one place before and after submission of the form.

Validation and Submission.

The JSONForms only emits errors through an event. So I have added a state to track the errors emitted by the event and on the event emit I recorded the errors into the state.

And for the submission of form we have to consider there are no recorded errors and the form data should not be empty because I have recorded errors into state only if the forms data is not empty. Errors are emitted by the event even before starting to fill the form. By validating all this checks, I have generated the output JSON file.

Loading data

For the testing purposes, I have added a button to load the weimarnetz API file data into the forms. I have fetched the ffSummarizedDir.json file from api.feifunk.net which consisted of all the communities API file data and rendered all the communities into a select field. So then I can add a on change event to load the data into the form.

References

  • A full document of the pros and cons of the frameworks can be found here.
  • A live development site can be found here.
  • The GitHub repository link is here.

Accomplished Targets

  • Developing the Schema to the latest version (taking draft 7 as base version).
  • Choosing a Frameworks (Chosen JSONForms).
  • Integrating the updated schema with the framework to generate the forms.
  • Examining the forms (validating input data and functionality of the forms).

Final goals

  • Try creating a custom renderer for location (lon,lat) picker.
  • Upgrading all the dependent tools.(API viewer, Travis job validator)
  • Testing all the tools and fixing bugs if any found.

~ Shiva Shankar Genji aka sh15h4nk

[GSOC’21] JSON Schema WEBUI Generator

Prologue

Hello there, Major objective of this project is to update the JSON schema of the API generator tool and other tools to the latest version (2020-12 not perfectly sure) and integrate the schema with a WebUI generator framework to generate HTML forms.

Prior

Currently, JSON Forms is being used to generate the forms from a JSON Schema of version draft 3 for the API and other tools.

Here is the form(API Generator) generated by the JSON Forms, Which currently uses JSON Schema of version draft 3 to generate the forms.

This API generator simply generates a JSON file for the API.

This also has several other fields, which contains specified data about the community.

Discrepancy

As the JSON schema versions have been updated to 2020 – 12, but the current schema of the API and other tools is still at version draft 3. Updating the schema to the latest version is no such big deal. but there is an inconsistency with the JSON Forms as it only supports up to the draft version 3 of JSON Schema.

Viable Way-out

In order to update the schema to the latest version, I have to find a WEBUI generator framework or tool that generates HTML forms from the latest version of the JSON schema.

But Unfortunately, there is no tool or framework that generates forms from the latest schema version 2020-12.
As it is officially mentioned here. Then I had to limit myself to the previous versions, so my mentor Andi suggested choosing draft 7 as our base version for our tests and implementations.
Then I had to choose a framework that supports version draft 7 and above so that we can update the schema to higher versions in the future by considering the support and compatibility of the WEBUI generator.

Frameworks

I have chosen several frameworks based on the version support and compatibility of the frameworks to integrate the schema and test out the results.

UI Schema for React

The first framework I want to try out is UI Schema for React. because the official documentation of the JSON schema states that, this framework supports the most recent version of schema draft(2019-09) but with limitations.

Apart from this, it has this pretty decent documentation here.

React JSON Schema Forms (mozilla)

Next, I have this, while testing on the playground demo, This doesn’t support $ref. But yet I want to give it a try. Its documentation is here. It seems this has some limitations.

Restspace Schema Form (MIT)

This is something cool, This doesn’t depend on the versions of the schema but this depends on the features of the schema. All the supported features are here. As I see It supports everything, which might be in our schema, and I could not able to find good documentation for this framework yet.

JSONForms (jsonforms.io) (EclipseSource)

This supports version draft 7 of the JSON schema. It has documentation here. I see this is an extension to the current JSON Forms used by the API and other tools.

Targets

  • Developing the Schema to the latest version (taking draft 7 as base version).
  • Choosing a Frameworks (mostly UI Schema for React).
  • Integrating the updated schema with the framework to generate the forms.
  • Examining the forms (validating input data and functionality of the forms).
  • Try using a higher version of schema, and test out all the functionality.
  • Finding and resolving the bugs.
  • Updating all the tools (using the schema).
  • Final testing for all the tools using new generator and updated schema and resolving bugs if any.

~ Shiva Shankar Genji aka sh15h4nk