# ipSCAPE Form Builder #

The form builder was developed for building chat surveys which are essentially mini forms with few elements to be displayed. Form components included:

* Text (HTML rich text) 
* Short Answer (Input)
* Long Answer (Textarea)
* Button
* Multiple Choice (Checkboxes)
* Choice List (Radio Buttons)
* Dropdown List (Select)
* Rating

### INSTALL ###

With NPM
```
npm install --save @ipscape/form-builder
```

With Yarn
```
yarn add @ipscape/form-builder
```

To get started:
```javascript
import IpscapeFormBuilder from '@ipscape/form-builder';
// Call init to get a form started
IpscapeFormBuilder.init(pageData, '#app')
  .then(() => {
    console.log('Loaded');
  });
```

### PAGE ###

A page object contains:

 * id: string
 * name: string
 * meta
   * pages: Array<pages\>
   * fields: { contact: Array<data-fields\>, activity: array<data-fields\>}
 * components: Array<components>

```
{
  id:'1',
  name: 'Survey 1',
  meta:{
    pages:[
      { id:1, name:'Survey 1'},
      { id:2, name:'Survey 2'}
    ],
    fields: {
      contact: [
        { id: 1, name: 'phone1', caption: 'Phone1' },
        { id: 2, name: 'phone2', caption: 'Phone2' },
        { id: 3, name: 'phone3', caption: 'Phone3' },
        { id: 4, name: 'timezone', caption: 'Timezone' },
        { id: 5, name: 'customer_key', caption: 'Customer Key' }
      ],
      activity: [
        { id: 11, name: 'street_address_1', caption: 'Street Address 1' },
        { id: 12, name: 'street_address_2', caption: 'Street Address 2' },
        { id: 13, name: 'postcode', caption: 'Postcode' },
      ],
    },
  },
  components:[
    {
      id:'a1b94f7f-38dd-4444-8b39-2a18c5549704',
      component:'Button',
      field:'Button',
      attributes:{
        label:'Start Chat',
        action: { name: 'submitForm', target: { id: null, page: null }},
        required:true,
      }
    }
  ]
}
```

### EVENTS ###

There is just the one event that is broadcast on the document "onPageUpdate".
The event contains a payload with

 * page (JSON Page object)
 * time (date/time stamp)
```javascript
document.addEventListener('onPageUpdate', (event) => {
  console.debug('+-- On Page Update --+', event.detail);
});
```

### METHODS ###

The JS file produces the following methods:

 * init
 * loadPage
 * resetForm
 * updatePageMeta

#### init ####

The `init` method is used to bootstrap the form builder.
It requires two parameters:

 * A Page JSON/object
 * Mount point (string)

```javascript
/******
 * The html mount element should have class="container cumulus" 
 * <div id="app" class="container cumulus"></div>
 ******/
 
import IpscapeFormBuilder from '@ipscape/form-builder';

const pageData = { ...};

// Call init to get a form started
IpscapeFormBuilder.init(pageData, '#app')
  .then(() => {
    console.log('Loaded');
  });
```

Calling `init` will also add the `ipscape.builder` namespace to the browser window.
This namespace includes all the methods available in the library except `init`.

#### loadPage ####

Used when switching from one page to another.

```javascript
  IpscapeFormBuilder.loadPage(pageObj);
```

#### resetForm ####

Will reset back to an empty object

```javascript
  IpscapeFormBuilder.resetForm();
```

#### updatePageMeta ####

Used when a page is added for the campaign or a page name is changed. 
The page meta briefly describes all the pages available in the selected campaign.
The payload is an array of page objects that require an `id` and a `name`.

```javascript
  const pages = [
    { id: 'a0001', name: 'pre-chat'},
    { id: 'd0011', name: 'faq' }
  ]

  IpscapeFormBuilder.updatePageMeta(pages);
```

```javascript
{
  source: 'https//www...',
}
```
