@ipscape/form-renderer-js

@ipscape/form-renderer

Installation

With NPM

npm i --save @ipscape/form-renderer-js

With Yarn

yarn add @ipscape/form-renderer-js

Get Started

import { FormRenderer } from '@ipscape/form-renderer-js';

// Data block that details the form schema
const pageData = {
  id: 1,
  name: 'Survey 1',
  meta: {
    version: 1,
    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: 'salesforceId', caption: 'Salesforce Id' },
        { 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: "6611a2ff-2914-4687-affe-44f53e8d99990",
      field: "Short answer",
      component: "input",
      attributes: {
        label: "Name",
        placeholder: "Your names here",
        required: true,
        validation: "none"
      }
    },
    {
      id: "6611a2ff-2914-4687-affe-44f53e8d111110",
      field: "Short answer",
      component: "input",
      attributes: {
        label: "Email",
        placeholder: "Your email here",
        required: true,
        mapping: {
          id: 5,
          name: "email",
          caption: "Customer Emaill"
        },
        validation: "email",
      }
    },
    {
      id:"8a314d10-09be-4907-9877-46aa9fa6cb6f",
      field:"Button",
      component:"button",
      attributes:{
        field:"Button",
        label:"Start chat",
        component:"Button",
        action:{
          name:"submitForm",
          target:{ id:null, page:null},
        },
      },
    },
  ]
};
// Mapping data to pre-populate a form
const mapping = [
  { id: 5, name: 'customer_key', value: '[e-mail]' },
];
// Instantiate your form
const formRenderer = new FormRenderer(pageData, mapping);
// Set a listener for form submission
form.on('ipscape-submit', (data) => {
  if (data.detail.page !== '1') return;
  if (data.detail.action === 'submitForm') {
    data.detail.model.forEach((item) => {
      ... /* logic for form model here */
    });
  }
  
  // Switch to a different page
  if (data.detail.action === 'goToPage') {
    data.detail.target
  }
});

And the form to your HTML

<ipscapeui-form></ipscapeui-form>

Available Methods

Name	Parameters	Description
addComponent	component: Component, data: FieldData	Add a component and data mapping to your form
removeComponent	componentId: string	Removes component from form
updateComponent	component: Component	Updates component with same component Id
setNewForm	page: Form, map: Array	Reset form and load new form data. *Useful for changing pages