createForm

Factory that encapsulates useForm, useFormValidation, useRecordFields, useSObject, useSuspense and useDML

Import

  import { createForm } from 'c/bolt';

Usage

import fields from './fields.js';
import template from './myLwc.html';
export default class myLwc extends createForm(
  {fields, template},
  args
) { }

Methods

constructor(params, configurationArgs) : Constructor

Name	Type	Description
{fields}	Field[] OR Field[][]	Array of imported fields
{supportiveFields}?	Field[] OR Field[][]	Array of imported supportive fields that won’t be part of the dynamic $SObjectApiName property.
{template}	Function	Imported HTML template
{untilTemplate}	Function	Imported HTML template
{mode}	edit OR insert	Mode of the form
args	CreateFormConfArgs	To add traits to the class

Example

Basic

import { createForm } from 'c/bolt';
import template from './myLwc.html';
import fields from './caseFields.js';
export default class MyLwc extends createForm( { fields, template } ) {
  @api recordId;
  async handleSave() {
    if(this.formValidity)
      await this.saveRecord(this.Case);
  }
}

<template>
  <c-bolt-input lwc:spread={$Case.Subject}></c-bolt-input>
  <c-bolt-input lwc:spread={$Case.Status}></c-bolt-input>
  <c-bolt-input lwc:spread={$Case.Priority}></c-bolt-input>
  <c-bolt-input lwc:spread={$Case.Contact}></c-bolt-input>
  <lightning-button label="Save the record" onclick={handleSave}></lightning-button>
</template>

Supportive Fields

In some cases, you may want to import fields but not necessarily map them to an HTML input. To do just that, you want to use the supportive fields feature of createForm and useForm. Fields passed to the supportiveFields parameter won’t be reflected on the dynamic class property this.$<ObjectApiName> intended to be used like so for example <c-bolt-form record={$Case} />.

import { createForm } from 'c/bolt';
import template from './myLwc.html';
import {fields} from './caseFields.js';
import {supportiveFields} from './caseFields.js';
export default class MyLwc extends createForm( { fields, supportiveFields, template } ) {
  @api recordId;
  async handleSave() {
    if(this.formValidity && this.Case.someSupportiveField__c === 'OK')
      await this.saveRecord(this.Case);
  }
}

<template>
  <c-bolt-form record={$Case}></c-bolt-form>
  <lightning-button label="Save the record" onclick={handleSave}></lightning-button>
</template>

With other mixins

import { createForm } from 'c/bolt';
import template from './myLwc.html';
import fields from './caseFields.js';
export default class MyLwc extends createForm(
  { fields, template },
  {
    externalStyles: `p {color: red;}`,
    poller: {
      resolveCondition: [prop => prop === 'OK', 'status__c'],
      wiredMethod: 'apexResults',
      maxIteration: 10,
      interval: 1000
    }
  }
) {
  @api recordId;
  async handleSave() {
    if(this.formValidity)
      await this.saveRecord(this.Case);
  }
}

<template>
  <c-bolt-input lwc:spread={$Case.Subject}></c-bolt-input>
  <c-bolt-input lwc:spread={$Case.Status}></c-bolt-input>
  <c-bolt-input lwc:spread={$Case.Priority}></c-bolt-input>
  <c-bolt-input lwc:spread={$Case.Contact}></c-bolt-input>
  <lightning-button label="Save the record" onclick={handleSave}></lightning-button>
</template>