BoltInput

Utility component to be used instead of a the combination of <lightning-input> and useReactiveBinding in case of using useForm or createForm

Usage

<template>
  <c-bolt-input lwc:spread={$Case.Subject}></c-bolt-input>
  <c-bolt-input lwc:spread={$Case.Status}></c-bolt-input>
</template>

Implements

<lightning-input>

<lightning-combobox>

Note

Go visit the official doc for <lightning-input> and <lightning-combobox> to know which attributes and methods are available

• <lightning-input>
• <lightning-combobox>

Attributes

lwc:spread : FormRecordFieldRef

mode : 'edit' | 'insert'

Defaulted to edit

shape : 'combobox' | 'radio'

Defaulted to combobox. Dictates how will be rendered fields of type picklist.

label : string

type : 'text' | 'number' | 'toggle' | 'checkbox' | 'checkbox-button' | 'url' | 'email' | 'picklist' | 'tel' | 'date' | 'datetime'

options : Option[]

Selectors

Attribute : [field=<ObjectApiName>.<FieldApiName>]

Class name : .<ObjectApiName>.<FieldApiName>

Note

Once rendered, if you inspect the component in the browser, it’ll look like this for instance :

<c-bolt-input
  lwc-43pvhaq4qrs
  field="Case.Product__c"
  class="Case.Product__c"> ...

Example

import { mix, useForm, useDML, BoltElement } from 'c/bolt';
import fields from './caseFields.js';
export default class myLwc extends mix(
    [useForm, fields],
    [useDML],
    BoltElement
) {
  async handleSave() {
    if(this.refs.form.validity)
      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>