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>