DYNAMIC JSON POWERED FORMS

in

Angular.js and React.js

Follow along @

http://travistidwell.com/presentations/jsonforms

About

The constant evolution of Webforms

Webforms 1.0

circa 1995 - 2000

Webforms 1.0

Built within static HTML pages.

Webforms 1.0

The rise of backend templating languages

Webforms 2.0

circa 2000 - today

Webforms 2.0

The rise of frameworks

Backend Form Structures

Like Drupal's Form API

/**
 * Returns the render array for the form.
 */
function my_module_my_form($form, &$form_state) {
  $form['name'] = array(
    '#type' => 'fieldset',
    '#title' => t('Name'),
    '#collapsible' => TRUE,
    '#collapsed' => FALSE,
  );
  $form['name']['first'] = array(
    '#type' => 'textfield',
    '#title' => t('First name'),
    '#required' => TRUE,
    '#default_value' => "First name",
    '#description' => "Please enter your first name.",
    '#size' => 20,
    '#maxlength' => 20,
  );
  $form['name']['last'] = array(
    '#type' => 'textfield',
    '#title' => t('Last name'),
    '#required' => TRUE,
  );
  $form['year_of_birth'] = array(
    '#type' => 'textfield',
    '#title' => "Year of birth",
    '#description' => 'Format is "YYYY"',
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit',
  );
  return $form;
}
					

Life was good

Then this happened

"Mobile First"

Mobile First

The server still provides the forms.

Life was good

Then this happened

Webforms 3.0

circa - The future

Developer Mandates

Applications must be made differently

"Mobile first" is no longer good enough

"API first" Development

• Build your REST platform first.
• REST platform must be "stateless"
• Your first "app" should be the API test.
• Application must ONLY use those API's. Including Forms.

Why "API first"?

Forces us to develop websites like web applications.

Platforms that are "API-first"

Problem

We now have to build forms the good ol' fashioned way...

and that sucks.

Dynamic JSON Powered Forms

The next generation of webforms.

Dynamic Form Rendering

• Uses a JSON schema to define a form.
• That schema is provided to the application via API.
• A frontend JavaScript library dynamically renders the form on the page.

How it works

Uses a JSON schema to define a form.

{
  components: [
    {
      type: 'textfield',
      label: 'First Name',
      key: 'firstName',
      placeholder: 'Enter your first name.',
      defaultValue: 'Travis',
      validate: {
        maxLength: '',
        minLength: '',
        required:true
      }
    },
    {
      type: 'textfield',
      label: 'Last Name',
      key: 'lastName',
      placeholder: 'Enter your last name.',
      defaultValue: 'Tidwell',
      validate: {
        maxLength: '',
        minLength: '',
        required: true
      }
    },
    {
      type: 'button',
      label: 'Submit',
      key: 'submit',
      action: 'submit'
    }
  ]
}

Dynamic Form Rendering

The schema is then rendered dynamically using JavaScript

Ok, this is great... but now I have to build that JSON schema, which is a pain.

Form Builder

Automatic REST API

Dynamic Form Rendering via API

Loads the schema via REST API

Advanced Features

Data Binding

Advanced Features

Submission Handling

Form Embedding

There are two ways to embed a dynamic form.

• iFrame Embedding
• Component Embedding

iFrame Embedding

Component Embedding

Component Embedding

for Angular.js

<script src="https://rawgit.com/formio/ngFormio/develop/dist/formio-full.js"></script>
					

app.module('myApp', ['formio']);
					

<formio src="'https://examples.form.io/simple'"></formio>
					

Component Embedding

for React.js

<script src="https://rawgit.com/formio/ngFormio/develop/dist/formio-full.js"></script>
<script src="https://rawgit.com/formio/react-formio/master/dist/build/Formio.min.js"></script>
					

A Dynamic JSON Powered Form

using

Thank you!