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
2 thoughts on “[GSoC’21] JSON Schema WebUI Generator – II”