Day: February 7, 2019

Lightning Web Component Reflect JavaScript Properties as a HTML Attributes

Let’s understand here how we can able to set the HTML properties from the lightning web component properties which are almost similar like how you are setting HTML attributes using the createAttribute() method. You can control whether public JavaScript properties appear as attributes in the rendered HTML of a Lightning web component. Allowing properties to appear as attributes are especially important when creating accessible components because screen readers and other assistive technologies use HTML attributes. All HTML attributes are reactive by default. When an attribute’s value changes in the component HTML, the component is re-rendered.When you take control of an attribute by exposing it as public property, the attribute no longer appears in the HTML output by default. To pass the value through to the rendered HTML as an attribute (to reflect the property), define a getter and setter for the property and call the setAttribute() method. You can also perform operations in the setter. Use a private property to hold the computed value. Decorate the private property with @track to make the property reactive. If the property’s value changes, the component rerenders.

 

In this example, we will be seeing how to set the title to a component on mouseover.

Create a lightning web component using the below SFDX command.

 

Use the below mycomponent.html code

 

Use the below mycomponent.js code. This javascript controller title as public property. It converts the title to uppercase and uses the tracked property privateTitle to hold the computed value of the title. The setter calls setAttribute() to reflect the property’s value to the HTML attribute

 

Use the below mycomponent.js-meta.xml code

 

 

Create a new lightning web component using this SFDX command. we will be calling the my-component from this parent component.

 

 

Use this parent1.html code

 

Push the changes to scratch org and add the changes to page layout and you can able to see the title on mouseover as shown below.

 

 

 

To make sure that you understand how JavaScript properties reflect to HTML attributes, look at the same code without the call to setAttribute(). The generated HTML doesn’t include the title attribute. Now update the mycomponent.js as shown below.

 

update the mycomponent.js code  as shown below

 

Push the changes to scratch org. Now when you mouseover on the parent component you dnt see the title appears. Similarly, you can use removeAttribute() to hide HTML attributes from the rendered HTML.

 

Lightning Web Component Reactive Properties

Let’s understand here what is Reactive Properties. If the value of reactive property changes, the component’s template rerenders. When you modify reactive property the template view updates. A reactive property can be public or private.

Public Reactive Properties

Public properties define the public API for a component. A parent 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 mark a property as public, annotate it with the @api decorator. When you use the @api decorator, you must import it explicitly from the engine. For example:

Use decorators to add functionality to a property. A property can have only one decorator. For example, a property can’t
have @api and @track (private reactive property) decorators.

Create a lightning web component using the below SFDX command. In  TodoItem class with an itemName public property.

Use the below todoitem.html

Use the below todoitem.js . In this JavaScript class, we have an itemName public reactive property

Use the below todoitem.js-meta.xml

 

Create a Container component using the below SFDX command.  In this component, we will be passing the itemname.

Use below todoapp.html code. When you use the c-todoitem component in another component, you can set the itemName property. Property names in JavaScript are in camel-case while HTML attribute names are in kebab-case (dash-separated) to match HTML standards. In todoapp.html, the item-name attribute in markup maps to the itemName JavaScript property of c-todoitem.

 

A component that declares a public reactive property can’t set the property value, except at component construction time.
A parent component that uses the component in its markup can set the component’s public property value. In our example, the
c-todoitem component can’t update the value of the itemName property in the todoitem.js file.

 

Push the changes to scratch org and you can able to see the output as shown below.

 

 

To execute logic each time a public property is set, write a custom setter. If you write a setter for a public property, you must also write
a getter. Here’s an example of a setter that changes the item name to uppercase. To re-render the custom element when the setter is called, create a private reactive property. In this example, the private reactive property is itemNameUpper. This property is set in the setter and
returned by the getter. Annotate either the getter or the setter with @api, but not both. It’s a best practice to annotate the getter. If you declare a getter and a setter with @api decorators, don’t declare the public property explicitly.

 

 

Push the changes and now you can able to see the output as shown below

 

Private Reactive Properties

To observe a component’s internal state and rerender when its state changes, decorate a property with @track. If the value of a tracked
property changes and it’s referenced in the template, the component rerenders. Tracked properties are also called private reactive
properties. The tracked property can be referenced directly in the template, or it can be used indirectly in a getter and setter.

Let’s look at some sample code to see how @track works.

You can use @track to decorate a property only; you can’t use it to decorate an object. It’s possible to decorate multiple properties
with @track. A property can have only one decorator. For example, a property can’t have both @track and @api.
Let’s look at some sample code to see how @track works.

Create a lightning web component using the below SFDX command.

Use the below child.html

 

Use the below child.js code

 

Use the below child.js-meta.xml

 

 

In this example, the parent component consumes the child component. When you click the parent component, it updates
a tracked counter property, which causes the component to rerender.

Use below parent.html code

Use below parent.js code

 

Use below parent.js-meta.xml

 

 

To see how tracked properties cause components to rerender. push changes and add this component to the page layouts. you can able to see the template is rerenders every time user click on the div.

 

 

 

 

In parent.js, remove @track from the counter property. Run the code and click the parent component. The parent component doesn’t re-render. The child component doesn’t re-render.  You can’t create a getter or setter for a private reactive property. Since the property is private, you can access or modify it directly in the code so a getter or setter isn’t needed. Update the code as below

 

Push the changes to scratch org and now when you click on the div , the counter changes wnt be referlct to the UI and template wnt reredners .

Styling Lightning web components

Let us discuss here what are the different ways we can able to style the lightning web component.we will be discussing here how to use the SLDS framework and custom styles and Shadow DOM. To give your component the Lightning Experience look and feel, use Lightning Design System. To go your own way, use CSS. Here is the simple apex class we will be using to render the data in UI.

 

 

Create a lightning web component using the following sfdx command

and now we will be using this component to test the different ways to apply the styles to LWC

Option 1: Using Lightning Design System

Salesforce Lightning Design System is a CSS framework that provides a look and feels that’s consistent with Lightning Experience. Use Lightning Design System styles to give your custom Lightning web components a UI that is consistent with Salesforce, without having to reverse-engineer our styles. And best of all, it just works with Lightning components running in Lightning Experience and in the Salesforce mobile application. Components in the lightning namespace already use Lightning Design System. They also interoperate with Lightning web components. The Following example shows how are render the table using lightning design system

Use the below cssexample.html code which will be using the SLDS styles for the table.


Use the below cssexample.js example code

Use the below cssexample.js-meta.xml

Push changes to scratch org and add this component to the layout .you can able to see the output as shown below and look and feel is inherited from the lightning design system as shown below.

 

 

 

Option 2: Custom CSS Style Sheet 

To bundle styles with a component, create a style sheet in the component’s folder. The style sheet must have the same name as the component. The style sheet is applied to the component automatically. Each component can have only one style sheet. Components can’t share style sheets. Style sheets use standard CSS syntax and you can use most selectors. Because Lightning web components have a shadow DOM, styles defined in a component’s style sheet are scoped to the component. They don’t apply to a parent, child, or sibling components. This rule is strict, but it allows a component to be reused in different contexts without losing its style. It also prevents a component’s styles from overriding styles in other parts of a page. Refer the below code that will use custom CSS styles

Use the below CSS code.

You can able to see the output as shown below.

Another important way to style a component, create a style sheet in the component bundle with the same name as the component. The style sheet is applied automatically. Lightning web components have a shadow DOM, styles defined in a component’s style sheet are scoped to the component. They don’t apply to a parent, child, or sibling components. This rule is strict, but it allows a component to be reused in different contexts without losing its style. It also prevents a component’s styles from overriding styles in other parts of a page.

This example demonstrates how the CSS styles defined in a parent component don’t reach into the shadow DOM of a child. There are two components, c-cssparent and c-csschild, which each contains an <h1> tag. The cssparent.css style sheet defines the h1 style as xx-large. When you run the code, the style applies only to the <h1> tag in the parent, not to the <h1> tag in the nested child

Create a lightning web component using the below SFDX command.

Use the below csschild.html

 

Create another lighting web component using the below SFDX command.

Use the below cssparent.html

 

Use the below cssparent.css

 

now push the changes and add them to the page layout and you can able to see the output as shown below.

 

A parent component can style a child component, but it styles it as a single element. A parent can’t reach into a child to style elements inside its shadow DOM. Let’s add a c-csschild selector to cssparent.css that defines a border around the child component.

update the cssparent.css styles as shown below

Push changes and you can able to see the values as shown below.

Now let’s style the componentc-csschild from its own style sheet, csschild.css. Before we add a selector to csschild.css, let’s remove the c-csschild selector from cssparent.css to remove the red box. It’s not a good practice to style components from both the component and its parent, because it can be confusing and yield unexpected results. Here is cssparent.css with the c-csschild removed.

updat ethe parent.css like below and see the changes

 

Option 3: Style the Host Element

Because Lightning web components have a Shadow DOM, you can use the standard :host selector to style the host element. CSS styles applied to the host element don’t affect child components or parent components. To style the host element, use the :host selector.

The :host selector accepts an optional list of selectors. To match, the host element must have a class that matches the passed selector.

 

create the lwc component using the below command

 

hello.html code

hello.css

 

you can able to see the output as shown below

 

 

Option 4: Use Aura Design Tokens

 

Let’s discuss her how to use the Aura Design token for the lightning web components. Design tokens are named entities that store visual design attributes, such as margins and spacing values, font sizes and families, or hex values for colors. Design tokens must be defined in an Aura component in the same DOM as your Lightning web component. Then, the Lightning web component can use CSS variable syntax to reference the Aura component’s design token. When you reference a design token, use the –lwc- prefix. For example, imagine a parent Aura component with these design tokens.

 

Create a new Aura Component token defaulttoken.css

 

then you can able to refer this token in lighting web component using the below syntax.

 

create a simple lwc using the below SFDX command  that  will be using the Aura design token

 

 

use the below csstest.html

 

update the csstest.css  as below

 

use the below csstest.js-meta.xml

 

create an aura component as shown below which is act like contains for the lightning web components and we will be inheriting the Aura tokens styles from this Aura component to Lightning web component.

 

push the changes and  Add it to the page layout you can able to see the below styles which are inherited from the Aura tokens.

 

 

 

Overall these are the different way you can apply styles to lightning web components

  1.  Using Lightning Design System
  2. Custom CSS
  3. Using Host Selector
  4. Using Aura Tokens

 

Lightning Web Component First Example

Let’s discuss here the complete end to end application using the Lightning web components. This example, we will be seeing the application that will be used to maintain the issue log. The app which we will be building looks like below.  Please refer to this link for environment setup.

 

1. Create an apex class 

 

Create an Apex class that will fetch the list of issues from the database. This class fetches the list of issues from the database.

2.Create an Issue Log LWC

Create a lightning component using the below SFDX command

This component will do

  • Insert the new record into the issue log using wire services
  • Fire an event with the newly created record.
  • Show toast message on insert the new record.

Use this code in issuelog.html

Use this code in issuelog.js

 

Understand the issuelog.js

 

The below get method will be returning the lits of the options for combo box .insted of passing the hardcoded values to get method you can able to use the getPicklist Values wired Adapter

The below code will handle the change event from the description and priority fields changes.

The following code in the create issue method will be used to save the record and will be passed to createRecord wire adapter

createRecord will be used to save the record and in the same method, we will firing an event with a newly created record using the new CustomEvent.

the following code will be used to dispatch the toast message to UI when the record is saved of failed

 

 

 

Use this issuelog.js-meta.xml file to configure the issue log.

 

3.Create an Issue List LWC

create a lightning component using the following sfdx command.

This component will be

  1. Container component for the issue log component
  2. Received an event that is the trigger by issue log component
  3. handler the resolved checkbox checked and unchecked and navigation logic.

 

 

Use this issuelist.html code

use this code in issuelist.js

 

understand the code

The following code is used to handle the event that is received from the issue log .here I am simply refreshing the wire adapter which will get the updated values

You can able to handle the event values as shown below as well and get the event values and parse it.

 

The following code will be used to update the values when user click on the checkbox resolved

 

The following code is used to fire the navigation event

 

 

 

Use the below issuelist.js-meta.xml code

 

4. Push changes

Push the changes to scratch org using the below SFDX command and add this component to the layout

 

 

Here is the final output of the code.

 

 

 

Making Conditional Required In Lightning Web Component

Lets discuss here how to make the field as required in conditionally in lightning web components. In this example, we will be making the field as required conditionally if the selected value is hot.

 

Create a lightning web component using the following SFDX command

 

Here is the conditionalrequired.html code. In this code, we will be showing the picklist values and based on the selected picklist value we are making the conditional required.

 

 

Use the below conditionalrequired.js code

 

use this conditionalrequired.js-meta.xml code to configure this component to app builder

 

 

Push the changes to scratch and add them to page layout.

 

 

You can able to see the output as shown below.