The main concept included in this recipe is creating a record using the createRecord
@wire
adapter.
This adapter allows the easiest way to create a record without any server code required.
<aside> 💡 Review this page to get familiarized with LDS base components and adapters: ‣.
</aside>
<aside>
📁 You can find this LWC in this relative path: force-app\\main\\default\\lwc\\ldsCreateRecord
</aside>
The template uses 2 lightning-input
elements:
Id
the first input is used to show the record Id, when the record is created. It has the attribute disabled
meaning is not editable by the user.Name
, this input is used to capture the name of the account from the user input.
handleNameChange
is invokedFinally, we have a button that is attached to the createAccount
handler function.
...
<div class="slds-var-m-around_medium">
<lightning-input
label="Id"
disabled
data-id="accountId"
value={accountId}
></lightning-input>
<lightning-input
label="Name"
onchange={handleNameChange}
class="slds-var-m-bottom_x-small"
></lightning-input>
<lightning-button
label="Create Account"
variant="brand"
onclick={createAccount}
></lightning-button>
</div>
...
The handleNameChange
function captures the user input and updates the name input.
The createRecord
adapter allows creating a record, this adapter is asynchronous. The record contains data for the fields in the record layout as stated in the official documentation.
Looking at the imports, this adapter is imported:
import { createRecord } from 'lightning/uiRecordApi';
This wire adapter uses the POST /ui-api/records
resource from the UI API, which expects the RecordInput
object, which has this definition:
{
"apiName": "Account",
"fields": {
"Name": "Universal Containers"
... and other fields belonging to the object specified in apiName
}
}
The createAccount
handler function is invoked when the user clicks on the button. So, to call the createRecord
wire adapter you need to provide a Json variable what is done in the first few lines of the createAccount
handler and named recordInput
:
...
const recordInput = {
apiName: ACCOUNT_OBJECT.objectApiName,
fields
};
...