Category: Uncategorized

Lightning Web Component Methods

Let us Discuss here how to use the Lightning Web Component Methods. Use a JavaScript method to communicate down the containment hierarchy. For example, a parent component calls a method on a child component that it contains. Methods are part of a component’s API. Expose a method by adding the @api decorator to the method. To communicate up the containment hierarchy, fire an event in the child component with the dispatchEvent method, and handle it in the parent component. Please refer this link to Aura method 

1. Create a Lightning web Component

Create a lightning web component using the below SFDX command

This component contains one method that will convert the text into the upper cases. This example exposes changeUpperCase(), methods in a c-inputmethod component by adding the @api decorator to the methods. A parent component that contains c-inputmethod can call these methods.

Use the below inputmethod.html code

Use the below inputmethod.js code

Use the below inputmethod.js-meta.xml code

 

 

Call a Method

Now let’s see how to call the above method in the code  The c-method caller component contains c-inputmethod that call the changeuppercase() method in input change.  The this.template.querySelector() call is useful to get access to a child component so that you can call a method on the component.

Return Values

Use the return statement to return a value from a JavaScript method

 

Method Parameters

To pass data to a JavaScript method, define one or more parameters for the method. For example, you could define the change()
method to take an input parameter.

 

2. Create a Lightning Web Component

Create another that will be calling the method.

 

use the below methodcaller.html code

 

use the below methodcaller.js code

Use the below methodcaller.js-meta.xml code

 

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

Using Custom Labels In Lightning Web Components

Let’s discuss here how to use the Custom labels in the lightning web components. Custom labels are text values stored in Salesforce that can be translated into any language that Salesforce supports. Use custom labels to create multilingual applications that present information (for example, help text or error messages) in a user’s native language. To create custom labels, from Setup, enter Custom Labels in the Quick Find box, then select Custom Labels. To import a label in a Lightning Web Component JavaScript file, use @salesforce/label in an import statement.

1.Create custom labels

To create custom labels, from Setup, enter Custom Labels in the Quick Find box, then select Custom Labels. Here are the custom labels created. we will see how to use the lightning web components

 

 

2. Use Custom Labels in LWC 

To import a label in a Lightning Web Component JavaScript file, use @salesforce/label in an import statement.

The label-reference is the label name and must include a namespace in the format namespace.labelName.create a lightning web component using the following SFDX command

 

Use the below labelexamples.html.To use the labels in the template, use the same {property} syntax that you use to reference any JavaScript property.

 

Use the below labelexamples.js code.

 

 

Use the below labelexamples.js-meta.xml

 

 

 

Push changes and add this component to the page layout and you can able to see labels are coming from the custom label as shown below

 

Using Lightning Components In Visualforce page

In this blog, I am going to explain how to invoke the lightning component from the visualforce page by using Lightning out. Add Lightning components to your Visualforce pages to combine features you’ve built using both solutions. Implement new functionality using Lightning components and then use it with existing Visualforce pages. Lightning Components for Visualforce is based on Lightning Out, a powerful and flexible feature that lets you embed Lightning components into almost any web page.

Step 1: Create Sample Component

Create a lightning component with below code which contains two attributes

Step 2: Create  Lightning Dependency App

To use Lightning Components for Visualforce, define component dependencies by referencing a Lightning dependency app. This app is globally accessible and extends ltng:outApp. The app declares dependencies on any Lightning definitions (like components) that it uses.

Step 3: Using in Visualforce from the page

There are three steps to add Lightning components to a Visualforce page.

  1. Add the Lightning Components for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/>  component.
  2. To reference this app on your page, use the following JavaScript code.
  3. Finally, add your top-level component to a page using $Lightning.createComponent(String type, Object attributes, String locator, function callback). This function is similar to $A.createComponent(), but includes an additional parameter, domLocator, which specifies the DOM element where you want the component inserted.

Here is the final code.

 

 

lightning:utilityBarAPI Example

This component allows you to access methods for programmatically controlling a utility within the utility bar of a Lightning app. The utility bar is a footer that gives users quick access to frequently used tools and components. Each utility is a single-column Lightning page that includes a standard or custom Lightning component.

To access the methods, create an instance of the lightning:utilityBarAPI component inside of your utility and assign an aura:id attribute to it.

Here is the lightning component

 

Add Component to lightning App Utility Bar items

You can see Utility bar as shown below

On click on Set Utility highlighted which  Makes a utility more prominent by giving it a different background color as shown below