Skip to content

Tutorial - Set the Initial Status#

Sometimes you need to load a prefilled form, and the initial values should trigger actions like retrieving data, hide or disable other fields.

Dynamic-forms can automatically set the form initial status and trigger those operations for you.

You need to list in the Initialisation Rules all the fields which require the initialisation, describing:

  1. Their name
  2. Their initial value (optional)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const formConfiguration = {
    id: 'form_id',
    fields:[/* ... */],
    rules: [/* ... */],
    init: [
        {
            name: 'field_one',
            value: '1'
        },
    ]
};

Note: you need to specify an API-endpoint in fields for field_one to work.

Dynamic-forms uses:

  • the Field Configurations in the fields section to retrieve remote data for each field listed in the Initialisation Rules (init section)
  • the Update Rules in the rules section to update the Observers of the initialised fields

In the example above, dynamic-forms will first initialise field_one using its Field Configuration and its Initialisation Rule, then it will update its Observer field_two using the Update Rules specified in the previous page.

If you need to pass other data to the initialised fields, just list their name and value in the Initialisation Rules (init collection) just like they were form fields: they go in the Update Data.

Wait for complete initialisation#

The initialisation phase is an asynchronous procedure: your script will continue without waiting for the subroutine to end.

If you need to execute code after the initialisation is complete, use the ready function as shown below.

1
2
3
4
const form = makeForm(formConfiguration);
form.ready().then(() => {
    /* Your code here */
});

1
2
3
4
5
6
async function initialiseForm() {
    let form = makeForm(formConfiguration);
    await form.ready();
    /* Your code here */
}
initialiseForm();