Month: January 2019

Usage Of getListUi Wire adapter

Let’s discuss here how to use the lightning/uiListApi Adapter to get the list view details. In Salesforce, we do have a different way to get the listview data using apex, soap API, rest API ext .. but in lightning, web component its makes more easy to access the Listview data using the getListUi wired adaptor. Wire adapters and JavaScript functions in these modules are built on top of Lightning Data Service (LDS) and User Interface API. Use these wire adapters and functions to work with Salesforce data and metadata.

getListUi 

Get the records and metadata for a list view. Use this wire adapter to get the records and metadata for a list view. The following example gets the list view records and metadata for a list view by API name.

  • objectApiName—(Required) The API name of a supported object.
  • listViewApiName—(Required) The API name of a list view, such as AllAccounts.
  • 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.

 

The flowing example will get the list view records and metadata for a list view by ID

The Following example Get list view records and metadata for an MRU list view by object

The Following example Get list views for an object

Create Lightning web Component 

create a lightning web component using the following SFDX command

Use the below ListUI.html markup code

 

Use the below ListUI.js code

use this ListUI.js-meta.xml mark up for configuration

 

 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

 

Understand the code 

 

The Following code is used to get the list view data using the wired adaptor in JavaScript controller

You will be able to iterate the return result using the below template directives.

 

 

Lightning web component deleteRecord function

Let us discuss here how to use lightning/uiRecordApi modules. 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 important function is deleteRecord that will be used to delete a record in the database without using apex class.

Syntax 

  • recordId—(Required) The ID of the record to delete.
Create a lightning web component
create a lightning web component using the flowing sfdx command

Use this markup in deleterecord.html

Use this deleterecord.js code

 

Use this deleterecord.js-meta.xml file

 

Push changes to scratch org.

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

Add the Delete Record component to Salesforce record page using app builder and you can able to see the delete button as shown below.

 

 

Understand the code 

Import deleteRecord function from lightning/uiRecordApi modules .

invoke the deleteRecord function on the button click as shown below. This method will show the Toast message once the record is deleted or fail to delete.

 

 

 

Usage Of getRecord wire adapter

Let us discuss here how to use lightning/uiRecordApi module adaptors. 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’s discuss here how to use the getRecord wire adapter to get the Salesforce data without writing the apex class.

Syntax :

 

  • recordId—(Required) The ID of a record from a supported object.
  • fields—(Required) An array of fields to return. If the context user doesn’t have access to a field, an error is returned. If you’re not sure whether the context user has access to a field and you don’t want the request to fail if they don’t, use the optionalFields parameter.
  • 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. For both the fields and optionalFields parameters, specify field names in the format ObjectApiName.FieldName or ObjectApiName.JunctionIdListName.

 

Error Handling

Use a Promise with then() and catch() blocks. You can display errors using toasts provided by the lightning/platformShowToastEvent module.

 

 

Create a lightning web component

create a Lightning web Component using this SFDX command

Use this code in recordex.html

use this code in recordex.js controller which will get the data from the Salesforce contact record and show on the UI.

Use this code in recordex.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 contact information as shown in below image.

 

Understand the code

The following code shows how to use the getRecord wire adapter to get the contact data based on the record id and we store the result in the contact property.

The below code shows how to get each field value from the contact property which contains a json array of data. This below code show how to refer the name field value and same get methods are defined for all field values in the code .

the below template syntax shows how to the call this method is the template.

 

Mastering in lightning web component decorators

Let us discuss here how to use the decorators in the Salesforce lightning web component development .decorators dynamically alter the functionality of a function, method The Lightning Web Components programming model has three decorators that add functionality to property or function. The ability to create decorators is part of ECMAScript, but these three decorators are unique to Lightning Web Components. Salesforce Lightning web components support the below decorators

  1. @track
  2. @api
  3. @wire

Here in this post, we will be discussing each decorator and how exactly we need to use each one.

@track decorator 

The fundamental way detects the DOM changes is through tracked properties. Tracked properties are just like normal properties on your component but these properties are private property’s value and re-render a component when it changes. decorate property is annotated with@track. Tracked properties are also called private reactive properties mean the changes will reflect only in the component. You can use a tracked property directly in a template. You can also use a tracked property indirectly in a getter of a property that’s used in a template. Let us discuss here more on what is the private properties and how to use @track decorators

Create a simple lightning web component that contains properties that will update the value to the UI based on the user interface changes

Use the below SFDX command to create a new Lightning web component

use this code in decoratorex.html. The Markup contains the input field that will re-render the values to the UI based on the input change.

use the below decoratorex.js code. the code contains one property inputMessage.

Use the below decoratorex.js-meta.xml markup

Push the changes and add this component to the record page. Now the issue is with the above code is the property values is an update in the JavaScript controller and the changes won’t reflect the UI. In the below screenshot shows the property values are updating in the controller and the changes won’t reflect in the UI.

 

Now how to make the property changes to updates on the UI. Now update the property with @track decorator which makes the property as trackable property means the changes in the controller will update the UI.

Update the decoratorex.js JavaScript controller with below code and push the changes to scratch org

 

Now you can able to see the changes will reflect on the UI  as shown below.

 

What is the limitation of the track decorators?

As of now, we are seeing the inputMessage property is changes are reflected on UI from the JavaScript controller and now let’s try to pass the values from app builder into the inputMessage property.

update the decoratorex.js-meta.xml and push the changes to the scratch org.

Now you will get the below error message by saying the inputMessage property does not exist because this property is tracked properties and which is private.

 

 

And the second limitation with @track property is you can’t pass the property form the parent component. create a new web component

using the below sfdx command.

and now try to set the inputMesasge.

try to push the changes to scratch org and you will get the error message as shown below.

 

Now track decorator is having the following limitations

  1. You can’t expose these properties to app builder
  2. You can’t pass the properties from the other components. tracked properties are also called private reactive properties. and let’s see how to fix these two issues using @api decorator

 

@api decorator

To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of reactive property changes, the component’s template rerenders any content that references the property. To expose a public method, decorate it with @api. Public methods are part of a component’s API. You can use a JavaScript method to communicate down the containment hierarchy. For example, an owner calls a method on a child component that it contains.

Now let discuss here how to use @api decorator to solve the two limitations with @track and update the code as shown below

update decoratorex.html markup with the below code.

update the decoratorex.js code as shown below

 

 

use the decoratorex.js-meta.xml code

 

 

 

Push changes to scratch org and add this component to the layout using app builder and now you can able to see the inputMessage property is configured from the app builder as snow below.

Now go to the container.html and you can able to set the property

 

Now to conclude what @api decorator will do

  1. Expose the property as public property
  2. Expose the property to the App Builder
  3. Pass the property values  from the parent component

 

 

 

@wire decorator

Now let us take another use case .if you want to get the inputMessage from the apex class you need to use @wire .

@wireTo read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method.

create a simple apex class with the below code

 

update the  decoratorsex.js with below code

 

push changes to scratch org and now you can able to see the inputMessage property values is coming from the apex class.You can able to see as shown below

 

 

Summary

  1. @track properties are private reflective properties .you cant pass the property values from the app builder or from the parent component
  2. @api properties are public properties that are possible to set by app builder or possible to pass the value from the parent component
  3. @wire decorate is used to read the values from the Salesforce data.

 

 

 

Lightning Web Component HTML Template Directives

Let’s discuss here how to use the lightning web component HTML template directives. The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. As the name suggests, the attribute directives are altering the properties of an element to which they are attached and the structural ones are changing.HTML template directives are the special property associated with a template tag. A template is valid HTML with a root tag.When a component renders, the  tag is replaced with the name of the component, <namespace-component-name>. For example, in the browser console, a component with the template myComponent.html renders as <c-my-component>, where c is the default </c-my-namespace. Write templates using standard HTML and a few directives that are unique to Lightning Web Components. Directives are special HTML attributes, like if:true and for:each, that gives you more power to manipulate the DOM in markup.HTML templates also render data to the DOM. Use simple syntax to decoratively bind a component’s template to data in the component’s JavaScript class. Here are the HTML template directives

  1. if:true|false
  2. for:each
  3. iterator:iterator
  4. key={uniqueId}
  5. lwc:dom=”manual”

 

Using If directive

Use if:true|false directive to conditionally render DOM elements in a template. if the condition expression returns the true then we will be able to render the DOM conditionally.for example, the following code shows how to use the if the directive to render the template DOM.

Let’s suppose if you want to display the values based on some text you can able to do it as shown below.

 

Please refer this link for complete example 

 

Using for:each  directive

Use this directive to iterate over an array and render a list. for:item="currentItem"Use this directive to access the current item.The currentItem placeholder is an identifier that the model injects into the current scope.for:index="index"Use this directive to access the current item’s zero-based index.The index placeholder is a new identifier that the model injects into the current scope. For Example, the following code iterates the collection of accounts

The following example the following code will iterate the collection of nested data which contains accounts and its contacts

 

Please refer this link for complete example 

 

Using iterator Directive

Use this directive to apply special behavior to the first or last item in an array and render a list. Access these properties on the iteratorName:

  • value—The value of the item in the list. Use this property to access the properties of the array. For example, iteratorName.value.propertyName.
  • index—The index of the item in the list.
  • first—A boolean value indicating whether this item is the first item in the list.
  • last—A boolean value indicating whether this item is the last item in the list.

The following example will iterate the collection of account data.

The following example iterates the collection of nested data.

Please refer this link for complete example 

 

key={uniqueId}

Use this directive to improve rendering performance by assigning a unique identifier to each item in a list. The keymust be a string or a number, it can’t be an object. The engine uses the keys to determine which items have changed.

The following example shows how to set the key directive using key={acc.Id} on for:each iterator .

The following example shows how to set the key directive using key={it.value.Id}  on iterator.

 

Using lwc:dom=”manual” directive 

Using JavaScript to manipulate the DOM isn’t recommended because the Lightning Web Components engine does it more efficiently. However, there are some third-party JavaScript libraries that take over the DOM.Because Lightning web components use shadow DOM, if a call to appendChild() manipulates the DOM, styling isn’t applied to the appended element.When using these libraries in a Lightning web component, add lwc:dom="manual" to any HTML element that you want to manipulate with JavaScript. When the engine sees the directive, it preserves shadow DOM encapsulation. Add the lwc:dom="manual" directive to an empty native HTML element. The owner of the component calls appendChild() on that element to manually insert the DOM.