Skip to content

Tutorial - Form creation#

Preconditions#

Did you already installed and loaded the library? Then go on, you are almost there!

Let's assume we are working on the following html form:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<form id='form_id'>
    <label for="field_one">Field one</label>
    <select id="field_one" name='field_one'>
        <option value="" selected></option>
        <option value="1">One</option>
        <option value="2">Two</option>
    </select>

    <label for="field_two">Field two</label>
    <select id="field_two" name='field_two'>
        <option value="" selected></option>
    </select>
</form>

Let's assume we loaded dynamic-forms using a CDN: 

1
2
3
    <script type="module">
        import { makeForm } from 'https://unpkg.com/@simomosi/dynamic-forms@latest';
    </script>

Write the Form Configuration#

For the Form Configuration we need to write 2 lists:

  1. fields: a list of the fields you want to customise (using the Field Configuration format); a field which loads its options from a remote url needs a Field Configuration;
  2. rules: a list of Update Rules, which tell the Observers to update when a Subject changes, usually on a change event (using the Update Rule format)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const formConfiguration = {
    id: 'form_id',
    fields: [
        {
            name: 'field_two',
            fetch: {
                makeUrl: (data) => `https://url/to/api/`,
            }
        }
    ],
    rules: [
        {
            name: 'field_one',
            update: ['field_two']
        },
    ]
};

Note: we didn't need to specify a Field Configuration for field_one: it is discovered automatically.

Create the form#

Create the form and forget about it: dynamic-forms will work by itself!

1
const form = makeForm(formConfiguration);

Done!#

Look at the network tab in developer console/tools while you play with your form!

Of course you need a real api-endpoint to load your values. For a working example open files in the example folder in your browser.

This is a basic configuration which works with default values. To customize it to your needs check the documentation chapter.