From my previous blog, we learned different ways to communicate LWC with Salesforce Data. LDS adapter is the one way to work with Salesforce Data.
The LDS wire adapters are built on User Interface API resources and live in the lightning/ui*Api modules. Each wire adapter provides different Salesforce data and metadata, from individual records and lists of records, to object and layout schema.
Wire Service Syntax
import { adapterId } from 'adapterModule';
@wire(adapterId, adapterConfig)propertyOrFunction;What are the modules and functions in lightning/ui*Api?
The wire adapters and JavaScript functions in lightning/ui*Api modules are built on the User Interface API. User Interface API supports all custom objects and many standard objects.
lightning/uiAppsApi
Get data and metadata for apps displayed in the Salesforce UI.
getNavItems is supported in this module. Use this wire adapter to retrieve the items in the navigation menu.
lightning/uiListApi
Get the records and metadata for a list view.
getListUi - Use this wire adapter to get the records and metadata for a list view.
LWC_listViewExample.html
<template>
<lightning-card title="Account List">
<template if:true={records}>
<div class="slds-var-m-around_medium">
<template for:each={records} for:item="record">
<p key={record.fields.Id.value}>
{record.fields.Name.value}
</p>
</template>
</div>
</template>
<template if:true={listView.error}>
<c-error-panel errors={listView.error}></c-error-panel>
</template>
</lightning-card>
LWC_listViewExample.js
import { LightningElement, wire } from 'lwc';
import { getListUi } from 'lightning/uiListApi';
import Account_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireListView extends LightningElement {
records;
error;
@wire(getListUi, {
objectApiName: Account_OBJECT,
listViewApiName: 'AllAccounts',
sortBy: NAME_FIELD,
pageSize: 10
})
listView({data,error}){
if (data) {
this.records = data.records.records;
this.error = undefined;
} else if (error) {
this.error = error;
this.records = undefined;
}
}
}
lightning/uiObjectInfoApi
Get object metadata, and get picklist values
Examples
Get Account Metadata
<template>
<template if:true={objectInfo.data}>
<div class="scroller">
<pre>{recordId}</pre>
</div>
</template>
</template>
import { LightningElement,wire,api,track } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
export default class LWC_GetAccountInfo extends LightningElement {
@wire(getObjectInfo,{ objectApiName: ACCOUNT_OBJECT })
objectInfo;
get recordId(){
return this.objectInfo
? JSON.stringify(this.objectInfo.data, null, 2)
: ''
}
}
lightning/uiRecordApi
This module includes wire adapters to record data and get default values to create records. It also includes JavaScript APIs to create, delete, update, and refresh records.
createRecord(recordInput)
Creates a record.
Syntax
import { createRecord } from 'lightning/uiRecordApi';
createRecord(recordInput: Record): Promise<Record>
recordInput- This is required input and having json record value as below
{
"apiName": "Account",
"fields" : {
"Name": "Local Boxes",
"BillingState": "WA",
"BillingStreet" : "123 Main Street",
"BillingCountry" : "USA"
}
}
Example-
<template>
<lightning-card title="LdsCreateRecord" icon-name="standard:record">
<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}></lightning-input>
<lightning-button
label="Create Account"
variant="brand"
onclick={createAccount}
></lightning-button>
</div>
</lightning-card>
</template>
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { createRecord } from 'lightning/uiRecordApi';
import { reduceErrors } from 'c/ldsUtils';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LWC_CreateRecordLDS_Example extends LightningElement {
accountId;
name = '';
//Method to get value from UI
handleNameChange(event) {
this.accountId = undefined;
this.name = event.target.value;
}
//Method get called from Button Click
createAccount() {
const fields = {};
fields[NAME_FIELD.fieldApiName] = this.name;
const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
//Call adapter createRecord to create the account
//Pass recordInput, account JSON as below
/*{
"apiName": "Account",
"fields": {
"Name": "Universal Containers"
}
}*/
//This method return the
createRecord(recordInput)
.then((record) => {
console.log('this is record :'+record);
this.accountId = record.id;
//Create ShowToastEvent event
const event = new ShowToastEvent({
title: 'Successp',
message: 'Here we go!',
variant: 'success'
});
this.dispatchEvent(event);//Fire ShowToastEvent event
})
.catch((error) => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error creating record',
message: reduceErrors(error).join(', '),
variant: 'error'
})
);
});
}
}
No comments:
Post a Comment