LWC:Spread - Simplifying Data Passing Between Parent and Child LWC Components

In Lightning Web Components (LWC), one of the most crucial aspects is data communication between parent and child components. Passing data from the parent component to the child component is a common requirement in many scenarios. While there are multiple ways to achieve this, one approach that simplifies the process is using the "spread" operator. In this blog, we'll explore how to use the spread operator to pass data from a parent LWC component to a child LWC component. 

Why Use LWC:Spread? 

With the introduction of lwc:spread, you gain the ability to consolidate multiple properties into an object, allowing you to effortlessly pass this object to your child component. 

The greatest advantage of lwc:spread is that it promotes the sharing of properties within the object, rather than passing the entire object as a single attribute. This not only enhances performance but also facilitates a more organized and concise approach to managing component data. 

ParentLWC - The Parent Component 

The ParentLWC component template contains a lightning-card with a title and a lightning-button. We have defined a tracked property "arrayVal" to hold the data that we want to pass to the child component.

Parent JS 

Child Component 

Child JS

What if the “arrayVal” already contains some crucial Information? 

Below is the approach we can follow for that: 

Understanding the “SPREAD” Concept 

The "lwc:spread" directive in the parent component helps to pass the entire "arrayVal" object to the child component. By using the spread operator, the child component will receive the data directly as properties, and you do not need to explicitly pass each property individually. 

Output:

 

Conclusion 

In this blog, we explored how to use the "spread" operator to simplify data passing between parent and child LWC components. We saw how the parent component, "ParentLWC," passes data to the child component, "SpreadChild," by utilizing the "lwc:spread" directive. By using the spread operator, the child component can easily access the data as properties without the need for complex data passing mechanisms. 

This approach can enhance the maintainability and readability of your LWC code and make the communication between components more seamless. By applying this technique, you can improve your LWC development and create more efficient and modular Lightning Web Components. Happy coding! 

If you have any questions you can reach out our Salesforce Consulting team here.

How to use ChartJS to generate a chart in a lightning web component?

The age of Data Science nowadays places a lot of importance on data visualization. Visual representation of the data puts more impact on the user interface. But the issue is to build custom, responsive, reactive charts and graphs in salesforce. Open source is one of the best sources for this kind of solution. The ChartJs is an open source solution that powers, to create charts and graphs that are completely responsive, accessible, and reactive, giving the best performance. By using ChartJs in salesforce, we can create custom charts and graphs.

In this blog, We will see how we can leverage the power of ChartJs to build a responsive Bar chart in LWC. We will see how to pull information from an Opportunity and feed it into the bar chart.

Why use ChartJS?

The charts can be added to the pages using the App Builder’s “Standard Report Chart” component. However, the report filters can be used to display relevant data on the charts but when we have a lot of custom logic and filters to be implemented in a lightning component then the “Standard Report Chart” have filter limitations. ChartJs is a handy solution for this. Let's jump for example.

Example:-

In the example we will draw a bar chart for latest 10 Opportunity amounts whose stage is Closed won.

Step 1:- Download ChartJs library.

• Click Here to open link and right click on page and save as.
• Upload file in Static Resource with the name 'ChartJS'.

Step 2:- Create a LWC with the name 'chart'.

HTML consist a canvas tag, the Chartjs library uses that canvas to draw the chart.

  

Here we have declared two @api attributes in the chart component

• loaderVariant - Used to set the loader variant from the parent component.
• chartConfig - Used to pass the chart settings and data from the parent component, so that we can reuse this component for different charts.

Step 3:- Create an apex class to get Opportunity data.

Retrieving Opportunity data.

Step 4:- Create  parent LWC named 'barChartExample'.

Calling child component chat and set chart configration.

The wire method gets the opportunity data and feeds it into the chart lwc.

The most important thing is chartConfiguration, all the chart behaviour is based on the config that we set to the chart. Below are main three attributes.

• type:- It defines the type of chart being rendered, here we have 'bar'. 
• data:- Here we pass the chartLabels and chartData and other settings for the bar chart.
• options:- Additional settings for chart.

Output:-

If you have any questions you can reach out our Salesforce Consulting team here.

Display a notification banner using the lightning web component

SCENARIO

While working on one of the requirements for a Health sector project for a client based out of Atlanta, GA, there was a requirement to display a notification banner or greeting message based on a time frame using the lightning web component.

CHALLENGE

The requirement is to display a greeting message or a notification banner for a specific duration. after the duration, the message will be changed or not display any banner. So they conditionally render notification messages or greeting messages based on a time frame without user interaction.

APPROACH

Notification banners communicate a state that affects the entire system, not just a feature or page. It appears automatically and lasts for the duration of the session.

Bellow is our approach to achieve the requirement by using Lightning Web Component and Custom Metadata Type.

1. Create a custom metadata type to store the banner details.
1. Start Date
2. End Date
3. Message
2. Create an Apex class to retrieve custom metadata type records.
3. Create a lightning web component to conditionally render a notification banner.

Step 1:- Create a Custom Metadata Type to store the banner details.

Below are the steps to create a custom metadata type.

• Click on Setup, In the Quick Find box type Custom Metadata Type.
• Select New Custom Metadata Type and enter Label and Plural Label.
• Click on Save.
• Create 3 custom fields to store the start date, end date, and message. below is an image of Custom Metadata Type.

Custom Metadata Type

• The next step is to create a record into a custom metadata type. Click on Manage Notification Banners and fill in the details and click on Save. Below is an image of the record.

Custom Metadata Type Record

Step 2:- Create an Apex Class to retrieve custom metadata type records.

Step 3:- Create a Lightning Web Component to conditionally render a notification banner.

Output:-

Output

If you have any questions you can reach out our Salesforce Consulting team here.

Salesforce Dynamic Related List in the lightning app builder

With the Salesforce Summer'22 release, Related lists can now be customized straight from the Lightning App Builder rather than the page layout editor with Salesforce's new Dynamic Related List.

What does salesforce's Dynamic Related List mean?

Dynamic Related Lists is the newest feature in the Summer’22 release, With the use of Dynamic Related List you can customize the related list directly in Lightning App Builder. By customizing a related list you can set how many records to display, which fields and actions to appear, and set filters on the related list.

Dynamic Related List – Single Component

The following characteristics set the dynamic related list - single component apart from the static related list component.

• Define Related List Label and type of list
• Configure Number of Records to Display 
• Show/hide List View Action Bar
• Define Related List Filters
• Configure Actions 
• Set Component Visibility

Let's see how to add Dynamic Related List into page.

Add Dynamic Related Lists in Lightning Page using Lightning App Builder 

Follow the below steps to add Dynamic Related List - Single component one a Lightning Record Page, Here we are adding Dynamic Related List on a Account record page.

• Click on Setup.
• Click on Object Manager, Select Account.
• Select Lightning Record Page, Click on Account Record Page.
• Click On Edit.
• Drag and drop Dynamic Related List – Single on the canvas.
• After adding Dynamic Related List – Single, Configure all the properties which is shown in the below image.

Dynamic Related List - Single

• Clock on Save and Activate.

Click Here to see release notes on Dynamic Related List.

If you have any questions you can reach out our Salesforce Consulting team here.

Override Lightning Input Field Label In Lightning Web Component

SCENARIO

While working on one of the requirements for a Health sector project for a client based out of Atlanta, GA, there was a requirement to set custom labels in the place of fields standard labels in Lightning Web Component.

CHALLENGE

In Lightning Web Component, By using lightning-record-edit-form with lightning-input-field tag we can not set a custom label for lightning-input-field.

APPROACH

By hiding the label of a lightning input field and setting a custom label for a lightning input field we can set a custom label. Let's take dive into it.

The field label is automatically obtained from the metadata description of the field when lightning-input-field is used with lightning-record-edit-form. For example, if the field's label is First Name and you send the field's API name to the lightning-input-field component, the component will display First Name as the field label.

Let's look with the example, For contact object fields First Name, Last name and Email need to set custom labels as Contact First Name, Contact Last Name, Contact Email. Below is a code to override field labels.

Here we have assigned an id to the lightning-input-field component and used variant attribute with value label-hidden. while define the label-hidden, it hides the actual label of the lightning input field.

The custom label value from the label tag will be passed using the id that we have given to the lightning-input-field component.

OUTPUT

CONCLUSION

By simply hiding actual label of the lightning input field and adding a custom label tag, We can override lightning input field label.

If you have any questions you can reach out our Salesforce Consulting team here.