How Lightning Web Component (LWC) is Changing the User Experience


Lightning Web Component has become enormously popular among Salesforce users. One can easily build Lightning components using two programming models: Lightning Web Components, and the original, Aura Components. If you are new to the term LWC, these components are custom HTML elements built using HTML and modern JavaScript.  

Lightning Web Components uses fundamental Web Components standards and provides only what is required to perform good in browsers supported by Salesforce. Since it is made of code that runs natively in browsers, Lightning Web Components are exceptionally lightweight, delivers amazing cross-browser performance and rich user experience. 

Here in this blog we will discuss how Lightning Web Component (LWC) can elevate the user experience to remarkable heights.

Design Attributes in Lightning Web Component

Design attributes play a significant role in creating user experience. These attributes allow user to build dynamic, reusable components. Lightning web components control which attributes will be exposed to builder tools such as the Lightning App Builder, Community Builder, etc. Before you go head and start using design attributes in Lightning Web Components, here are some key words that you must understand: 

targetConfigs: It is used to configure the component for different page types and define component properties. For instance, a component on a record home page could have different properties than on the Salesforce Home page or on an app page.

targetConfig: It allows you to use a separate targetConfig for each different page type configuration. Specify one or more-page types in the targets attribute, such as <targetConfig targets=”lightning__RecordPage”> or <targetConfig targets=”lightning__RecordPage, lightning__AppPage”>.

Property: It helps you to specify a public property of a component that can be used in Lightning App Builder, App Manager, Lightning Flow Builder, or Community Builder. The component author defines the property in the component’s JavaScript class using the @api decorator.

Datasource: Renders a field as a picklist, with static values. Supported only if the type attribute is String.

Description: Displays as an i-bubble for the attribute in the tool.

Default: The default value for the attribute.

Label: Displays as a label for the attribute in the tool.

Type: The attribute’s data type.

Name: Required if you’re setting properties for your component. The attribute names. This value must match the property name in the component’s JavaScript class.

How Can We Help?

Gravity Infosolutions Inc. is a Salesforce Silver Partner and provides Salesforce consulting services. We specialize in building personalized Salesforce application and solutions in Salesforce environment using Lightning Web Components. Feel free to reach out to us at info@gravityinfosolutions.com to understand how LWC can be used to improve user experience of your software.