© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 1

Developing business web applications with form-based UIsJSON Forms: More forms - less <code/>

Maximilian Koegelmkoegel@eclipsesource.com

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2

Data is often viewed/edited in a form-based UI

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 3

Data model needs to be mapped to UI

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 4

Declarative Data and UI Definition

User Interface JSON Schema UI Schema

Renderer Set

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 5

Declarative Databinding

User Interface JSON Schema UI Schema

Renderer Set

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 6

Declarative Layouts

User Interface JSON Schema UI Schema

Renderer Set

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 7

Demo: Getting started

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 8

Demo: Validation

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 9

Demo: Rules

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 10

Demo: Custom Renderers

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 11

EMF Forms vs. JSON Forms

Domain Model(XSD, Ecore)

SWT/JavaFX/RAP/Tabris Renderer Sets

User Interface View Model

User Interface JSON Schema UI Schema

Web Renderer Set

JSON Forms Exporter

EMF Forms

JSON Forms

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 12

● JSON Forms 1.x:○ Build on AngularJS (1.x)○ Compatible with AngularJS (1.x)○ Custom Renderers based on Angular Directives

● JSON Forms 2.x:○ Build on Web Components○ Compatible with AngularJS (1.x), Angular (2.x/4.x), React…○ Using JSON Schema and UI Schema (full reuse from 1.x!)○ Custom Renderers based on Custom Tags and JSX/TSX (requires small

changes to port from 1.x)○ Currently Beta, Release in January

JSON Forms 1.x versus 2.x

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 13

When to use UI Modeling

• Large Domain Model• Many different Views• Frequent Domain Model changes • Homogenous UI • UI Technology Independence• Improved Customer Involvement

© 2017 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 14

JSON FormsWeb: http://jsonforms.ioTwitter: #jsonforms @JSONFormsLicense: MIT, EPL

EMF FormsWeb: http://emfforms.orgTwitter: #emfforms @EMFFormsLicense: EPL

EclipseConBOF on JSON Forms, Today 18:30, Silchersaal

More Information

© 2017 EclipseSource | http://eclipsesource.com/munich | Dres. Jonas Helming & Maximilian Koegel | Web-based Modeling Tools 15

- 1 + 10

Evaluate the Sessions

Sign in and vote at eclipsecon.orgthis

WITH