Month: January 2019

Lightning web Component updateRecord Example

Let us discuss here how to use lightning/uiRecordApi module adapters. 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. one of the most of importance function is updateRecord that will be used to update the record in the database without using apex class.

Syntax 

the updateRecord syntax looks like below

  • recordInput— (Required) A RecordInput object used to update the record. To create the object, call generateRecordInputForUpdate(record).
  • clientOptions— (Optional) To check for conflicts before you update a record, pass const clientOptions = {'ifUnmodifiedSince' : lastModifiedDate}. Get lastModifiedDate via a wire service adapter that returns a record object: const lastModifiedDate = record.fields.LastModifiedDate.value;.
  • A Promise object that resolves with the updated record. The record contains data for the fields in the record layout.

Create a Lightning Web component

create a new lightning web component using this SFDX command

use this updaterecord.html code

Use this updaterecord .js code

use this updaterecord.js-meta.xml

 

Push changes to scratch org.

Push changes to scratch using this command and add this component to record page using lighting app builder

 

Understand  the code

The following JavaScript code will update the tracked properties when an input value is changed

The following code will call from the update button  which contains the record details for the update using the updateRecord function

 

 

 

Lightning web components Events

Let us discuss here how to use the lightning web component events to communicate between components. Lightning web components dispatch standard DOM events. Components can also create and dispatch custom events. Use events to communicate up the component containment hierarchy. Events in Lightning web components are built on DOM Events, a collection of APIs and objects available in every browser. we will be seeing here how to the events using the CustomEvent interface and publish-subscribe utility.

Create and Dispatch Events Using CustomEvent 

Let’s discuss here how to use to create events, using the CustomEvent interface. In Lightning web components, CustomEvent provides a more consistent experience across browsers, including Internet Explorer. It requires no setup or boilerplate, and it allows you to pass any kind of data via the detail property, which makes it flexible. Lightning web components implement the EventTarget interface, which allows them to dispatch events, listen for events, and handle events.
  1. To create an event, use the CustomEvent() constructor

     
  2. To dispatch an event, call the EventTarget.dispatchEvent()  method.

     

The CustomEvent constructor has one required parameter, which is a string indicating the event type. As a component author, you name the event type when you create the event. You can use any string as your event type. The below example shows how to use the CustomEvent constructor to fire the events and receive the events using the event object. In this example, we are firing the event from the eventsource component using the CustomEvent.Create a Lightning web component using the following SFDX command.

Use the below eventsource.html code . in this code we have an input text field that will fire an event on onchange of the input text.

use the below eventsource.js code and in this code, we have an handleChange function that will fire the event using the CustomEvent.

Use the below eventsource.js-meta.xml code

 

Now create an event container component that will receive the events form the eventsource. create lightning web components using the below SFDX command

Use the below eventcontainer.html code. To listen for events, use an HTML attribute with the syntax oneventtype Since our event type inptext, the listeners are oninptext  and call the handler function on oninptext events  as shown below

Use the below eventcontainer.html code

Use the eventcontainer.js code.  Receiving components access the data in the detail property in the event listener’s handler function.

Use the below eventcontainer.js-meta.xml

The CustomEvent interface imposes no type requirements or structure on the detail property. However it’s important to send only primitive data. JavaScript passes all data types by reference except for primitives. If a component includes an object in its detail property, any listener can mutate that object without the component’s knowledge. This is a bad thing! It’s a best practice either to send only primitives, or to copy data to a new object before adding it to the detail property. Copying the data to a new object ensures that you’re sending only the data you want, and that the receiver can’t mutate your data.

Now if you see in the below image it shows the enter input data from the text box to container component. If you enter the text in the event source component, the CustomEvent will be fired and the same event details will be received at container component

 

 

Using publish-subscribe pattern

To communicate between components that aren’t in the same DOM tree, use a singleton library that follows the publish-subscribe pattern.In a publish-subscribe pattern, one component publishes an event. Other components subscribe to receive and handle the event. Every component that subscribes to the event receives the event. For example, if you add two components to a Lightning page in Lightning App Builder, use the pubsub module to send events between them. If you’re familiar with Aura, you may recognize that Aura application events follow the publish-subscribe pattern.

Please refer this link to get the publish-subscribe utility code.

Create a lightning web component using the below SFDX command.

in this publish source component, we have an input text filed from where we are firing the event on input onchange events.

Use the below publishsource.js code which will be publishing the event using publish-subscribe utility

In the above JavaScript file, we have two imports that are required to fire the events

Wire the current page reference using wire adapter as shown below

Fire the event using this below code .here inputChangeEvent is the event name.

use the below publishsource.js-meta.xml code

create a publish receive that will listen the events .create a lightning web component using the below SFDX command.

Use the below publishreceiver.html code

Use the below publishreceiver.js code that will listen to the events using the life cycle callbacks

use the below publishreceiver.js-meta.xml code

 

Now you can able to see the event is firing from the source component which is handled by the target component as shown below.

 

 

Usage Of getPicklistValues wire adapter

Let us discuss here how to use the getPicklistValues wire adapter to get the picklist values for a specific field. Here is the sample code that explains how to use the getPicklistValues values.

Syntax 

 

  • recordTypeId—(Required) The ID of the record type. Use the Object Info defaultRecordTypeId property, which is returned from getObjectInfo or getRecordUi.
  • fieldApiName—(Required) The API name of the picklist field on a supported object.
  • propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property.

 

 Create Lightning web component

create a lightning web component using the following SFDX command. In this component, we will be showing the picklist values as a checkbox and as a dropdown using select

 

here is the picklistvalues.html  code

here is the picklistvalues.js code

here is the picklistvalues.js-meta.xml code

 

 Push changes to scratch org

Push changes to scratch using this command and add this component to record page using lighting app builder

And you can able to see the output as shown below.

 

 

 

Understand the Code

The following code will return the picklist values as a JavaScript object.

 

The following code will show the picklist values as an input checkboxes

The following code will show the values as a select list

 

 

 

getObjectInfo Wire Adapter

Let us discuss here how to use this wire adapter getObjectInfo wire adaptor to get metadata about a specific object. The response includes metadata describing fields, child relationships, record type, and theme. Here is the sample Syntax on how to invoke the getObjectInfo wire adapter.

Syntax 

 

  • objectApiName—(Required) A supported object.
  • propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property.

Create Lightning web component

create a lightning web component using the following SFDX command.

Use this ObjectInfo.html markup code

Use this ObjectInfo.js code

Use this ObjectInfo.js-meta.xml code

Push changes to scratch org.

Push changes to scratch using this command and add this component to record page using lighting app builder

After adding the lightning web component to record page using the app builder. you can able to see the output as shown below

 

 

Understand the code

The following code returns the sobject data using the getObjectInfo wired adapter

 

The following markup will show the json data into UI

 

getRecordUi wire adapter

Let us discuss here how to use lightning/uiRecordApi module adapters. 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. Let us discuss here how to use the getRecordUi wire adapter. Use this wire adapter to get layout information, metadata, and data to build UI for one or more records.

Syntax 

  • recordIds— (Required) IDs of records to load. A string or an array of strings. All record IDs must be from a supported object.
  • layoutTypes—(Required) Layout types for the record. A string or array of strings. Each string contains one of these values:
    • Compact—Use this value to get a layout that contains a record’s key fields.
    • Full—Use this value to get a full layout.
  • modes—(Required) The access mode for the record. This value determines which fields to get from a layout. Layouts have different fields for create, edit, and view modes. For example, formula fields are rendered in view mode, but not in create mode because they’re calculated at run time, like formulas in a spreadsheet. A string or array of strings. Each string contains one of these values::
    • Create—Use this mode if you intend to build UI that lets a user create a record. This mode is used by therecord-create-defaults wire adapter.
    • Edit—Use this mode if you intend to build UI that lets a user edit a record. This mode is used by the record-clone-defaults wire adapter.
    • View—Use this mode if you intend to build UI that displays a record.
  • optionalFields—(Optional) An array of optional field names. If a field is accessible to the context user, it’s included in the response. If a field isn’t accessible to the context user, it isn’t included in the response, but it doesn’t cause an error.
  • propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property.

 

Create a lightning web component

create a lightning web component using this SFDX command

Use this code in recorduiex.html

Use this code in recorduiex.js code

Use this recorduiex.js-meta.xml

Push changes to scratch org

Push changes to scratch using this command and add this component to record page using lighting app builder

You can able to see the output as shown below which contains the information of the record metadata.