@ipscape/form-builder

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:

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

{
  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)

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)

/******
 * 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.

  IpscapeFormBuilder.loadPage(pageObj);

resetForm

Will reset back to an empty object

  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.

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

  IpscapeFormBuilder.updatePageMeta(pages);

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