Single-sourcing web & mobile forms with JSON Forms

JSON Forms is a framework for efficiently developing form-based UIs based on JSON Schema.

It provides a simple declarative JSON based language to describe UIs independently of any UI technology. Please see the getting started guide for a jump start on JSON Forms.

With the latest release, JSON Forms now also supports rendering on mobile by providing a renderer set based on Ionic. This means that JSON Forms now supports rendering forms in mobile applications with the native Look & Feel of the respective mobile platform (e.g. Android and iOS).

This also implies that JSON Forms can be utilized to single-source any forms for both, web and mobile. For instance the following screenshots show a web form as it is rendered with the Material UI based renderer.

Here’s the same form rendered on mobile (on Android):

As you can see the forms look pretty similar. This is due to the fact that material design looks the same on the web as it does on mobile. However, some controls are different, e.g. the checkbox for the attribute “Ordered”.

There are also examples, where the mobile renderer looks fundamentally different: This is due to different screen sizes and user interaction. As an example, pay attention to how tabs are rendered at the top in the browser, while on mobile they are rendered at the bottom.

To produce the two forms above, on mobile and for the web, the data definition (JSON Schema) and UI schema definition have not been altered in any way. This allows easy porting of your web based JSON Forms application to mobile or vice versa. You can even maintain both solutions in parallel with almost no additional overhead (except testing on both platforms).

JSON Forms allows this flexibility (in this case web vs. mobile) by strictly separating the declarative description of the data and the UI from the actual rendering. Therefore, we were able to add an additional mobile renderer, which processes the same artifacts as the web version (see following diagram).

Images via https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Computer_lab_icon.svg/500px-Computer_lab_icon.svg.png and https://commons.wikimedia.org/wiki/File:Smartphone_icon_-_Noun_Project_283536.svg

Please note that you can customize the mobile renderer by adding custom renderers for specific elements, just like in the web.

If you’d like to try out the mobile renderer yourself, you can head over to our playground app Github repo, where more detailed instructions are available. For more information about the Ionic renderer in general, check out the Ionic blog post.

As with all JSON Forms features, the mobile renderer based on Ionic is of course adaptable to even more custom requirements. JSON Forms can also support additional UI technologies by adding additional renderer sets. If there are any features or UI technologies you miss, please provide feedback by submitting bugs or feature requests on the Github project. Please contact us if you are interested in enhancements, training or support. Please also see here for professional support and training, that is available for JSON Forms.

We believe JSON Forms can help you to develop forms faster with less effort spent and still with high quality. We are looking forward to your feedback!