npm package: @ipscape/form-renderer-js
Description: ## Installation
Author: IPscape
Latest version: 2.0.0

# `@ipscape/form-renderer`

## Installation

With NPM

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

With Yarn

```javascript
yarn add @ipscape/form-renderer-js
```

## Get Started

```javascript
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: 'xyZ8976@tenant.org' },
];
// 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

```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<FieldData> | Reset form and load new form data. *Useful for changing pages |