Skip to content
Boltage

BoltForm

Utility component to be used instead of a bunch of <c-bolt-input>.

Usage

<template>
  <c-bolt-form record={record} mode="edit" >
  </c-bolt-form>
</template>

Attributes

record : FormRecordRef

records : FormRecordRef[]

mode : 'edit' | 'insert'

watch : Field[] | String[]

Defaulted to edit

Public getters

validity : boolean

Returns true if all inputs of the form are valid, else report validity.

Public methods

query(domQueryString): HTMLElement

Exposed wrapper of this.template.querySelector(domQueryString)

getInputRef(objectApiName, fieldApiName): HTMLElement

Returns this.query([field="${objectApiName}.${fieldApiName}"])

Slots

<default>

Accepts any other content By default each change made by the user on an input will reflect onto the $<ObjectApiName> property. If you want to implement your own custom logic to fill out a field you can by setting a watcher on the said field and listening for a custom event whose name will be equivalent as the said fieldApiName value.

Events

on<FieldApiName> : BoltFormFieldEventDetail

Styles

:host {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Examples

Single SObject
import { mix, useForm, useDML, BoltElement } from 'c/boltage';
import fields from './caseFields.js';
export default class myLwc extends mix(
  BoltElement
  useForm({fields}),
  useDML
) {
  async handleSave() {
    if(this.refs.form.validity)
      await this.saveRecord(this.Case);
  }
}
<template>
  <c-bolt-form record={$Case} lwc:ref="form" >
  </c-bolt-form>
  <lightning-button label="Save the record" onclick={handleSave}>
  </lightning-button>
</template>
Multiple SObjects
import { mix, useForm, useDML, BoltElement } from 'c/boltage';
import caseFields from './caseFields.js';
import quoteFields from './quoteFields.js';
export default class myLwc extends mix(
  BoltElement
  useForm({fields: [caseFields, quoteFields]}),
  useDML
) {
  async handleSave() {
    if(this.refs.form.validity)
      await this.saveRecords([this.Case, this.Quote]);
  }
  get records() {
    return [this.$Case, this.$Quote];
  }
 }
<template>
  <c-bolt-form records={records} lwc:ref="form" >
  </c-bolt-form>
  <lightning-button label="Save the record" onclick={handleSave}>
  </lightning-button>
</template>
Insert Mode
import { mix, useForm, BoltElement } from 'c/boltage';
import fields from './caseFields.js';
export default class myLwc extends mix(
  BoltElement
  useForm({fields}),
  useDML
) {
  async handleSave() {
    if(this.refs.form.validity)
      await this.saveRecord(this.Case, 'Case');
  }
 }
<template>
  <c-bolt-form record={$Case} mode="insert" lwc:ref="form" >
  </c-bolt-form>
  <lightning-button label="Save the record" onclick={handleSave}>
  </lightning-button>
</template>
Event listening

By default each change made by the user on an input will reflect onto the $<ObjectApiName> property. If you want to implement your own custom logic to fill out a field you can by setting a watcher on the said field and listening for a custom event whose name will be equivalent as the said fieldApiName value.

import { mix, useForm, BoltElement } from 'c/boltage';
import {fields, Status__c} from './caseFields.js';
export default class myLwc extends mix(
  BoltElement
  useForm({fields}),
  useDML
) {
  @track watch = [Status__c];
  handleStatusBinding(e) {
    this.Status__c = customCondition ? e.value : 'KO';
    this.next(e); // continues the binding process
  }
  async handleSave() {
    if(this.refs.form.validity)
      await this.saveRecord(this.Case);
  }
 }
<template>
  <c-bolt-form
    lwc:ref='form'
    record={$Case}
    watch={watch}
    onstatus__c={handleStatusBinding}>
  </c-bolt-form>
  <lightning-button label="Save the record" onclick={handleSave}>
  </lightning-button>
</template>