Tag: lightning web component

Salesforce LWC Editor in browser

Salesforce made a great move by making the Web Components part of the eco system by introducing Lightning Web Component(LWC). But for some reason, they decided not to provide the ability to code it directly from their developer console. Currently the only way to do it is, is by using the VS Code. This is great, but if you’re in a hurry and want to make some quick changes, it won’t be easy.

To resolve this, I decided to make a quick-to-use LWC editor in my chrome extension Salesforce Advanced Code Searcher.

How to use:

  1. Install the extension by going to : https://chrome.google.com/webstore/detail/salesforce-advanced-code/lnkgcmpjkkkeffambkllliefdpjdklmi
  2. Navigate to your salesforce setup Page. You should see a “Click here to authorize” button. Click on it to authorize the extension.
Image for post

3. Once the authorization is complete, Navigate to the LWC Editor tab and you should see all the Components that already exists in the Org. In case there are none then you can start by creating one.

Image for post

What can you do?

  1. You can edit the components and save it back.

Look for the extension that you are looking for in the left file explorer, click open the link and that should open the file in a new tab. Make the required changes and hit Ctrl+s (PC) or Cmd +s (Mac) to save the change. In case there are errors it will be displayed in the console log right below the editor.

2. You can add a file in an existing components.

Image for post
Image for post

Right-click on the component where you want to add a file. You will be presented with 2 options : New File & Delete. Click on the New File to open a modal dialog where you can key in the file name (do not add an extension). Click on the Create File button and it will add the file under the component.

3. You can delete the files in the component.

Image for post

5. You can also change the theme:

Image for post

c3 charts and LWC

I wanted to try out some charting on LWC and I thought what better framework than C3. In this post we will see a component which will display opportunities in various statues associated to an account.

accountCHart

As a prerequisite you would need c3 and d3 (c3 has a dependency on d3.js) framework loaded in static resource for the charting to work .

Download the latest version of the C3 and D3 from below.

C3 -> https://github.com/c3js/c3/releases/latest

D3 -> https://github.com/d3/d3/releases/download/v5.9.7/d3.zip

Couple of important points for charting:

  1. Load the dependency in the same order that I mentioned below. D3 first and then follow it up with C3.
  2. We have added the a parameter t and assigned the current time to it.
    This is done to make sure the cache is refreshed every time the scripts are loaded.
    If we do not do this then there is an issues if we add multiple charts in a single component.


<template>
<!–Render the chart only when the opportunity data is available.–>
<template if:true={opportunityData}>
<!–We need not have another component for chart,
I thought it would be a better idea seperate out the charting component
for better readability–>
<c-opportunity-pie-chart chart-data={opportunityData}></c-opportunity-pie-chart>
</template>
</template>

view raw

opportunityChartContainer.html

hosted with ❤ by GitHub


import { LightningElement,api,wire,track } from 'lwc';
import opportunityAggregation from '@salesforce/apex/OpportunityDataService.aggregateOpportunities'
export default class OpportunityChartContainer extends LightningElement {
@api recordId; //As the component is loaded on a account detail page, we will get access to the account Id.
@track opportunityData=[];//Chart accepts data in multiple formats, array, object etc. We are using array here.
//get the data from the backend
@wire(opportunityAggregation,{accountId : '$recordId'}) opptyData({error, data}){
if(data){
let oppData = Object.assign({},data);
/*
this.opportunityData will in the below format
[['Closed Won',2],['Closed Lost',4],['Negotiation',5]];
*/
for(let key in oppData){
if(oppData.hasOwnProperty(key)){
let tempData=[key, oppData[key]];
this.opportunityData.push(tempData);
}
}
}
if(error)
console.log(error);
}
}

view raw

opportunityChartContainer.js

hosted with ❤ by GitHub


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="opportunityChartContainer">
<apiVersion>46.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

view raw

opportunityChartContainer.js-meta.xml

hosted with ❤ by GitHub


public with sharing class OpportunityDataService {
@AuraEnabled(cacheable=true)
public static Map<String, Integer> aggregateOpportunities(String accountId){
Map<String, Integer> opportunityStatusMap = new Map<String, Integer>();
//Aggregate the opportunities.
for(AggregateResult aggr : [SELECT Count(Id), StageName
FROM Opportunity
WHERE AccountId=:accountId
GROUP BY StageName]) {
opportunityStatusMap.put((String)(aggr.get('StageName')), (Integer)(aggr.get('expr0')));
}
return opportunityStatusMap;
}
}

view raw

OpportunityDataService.cls

hosted with ❤ by GitHub


<template>
<lightning-card title="Opportunities">
<!–C3 manipulates the dom and in order for it to do so we need to add the lwc:dom attribute–>
<div lwc:dom="manual" class="c3"></div>
</lightning-card>
</template>

view raw

opportunityPieChart.html

hosted with ❤ by GitHub


import { LightningElement, api,track } from 'lwc';
import { loadStyle, loadScript } from 'lightning/platformResourceLoader';
import C3 from '@salesforce/resourceUrl/c3';//load the c3 and d3 from the static resources.
import D3 from '@salesforce/resourceUrl/d3';
export default class OpportunityPieChart extends LightningElement {
@api chartData;
@track chart;
@track loadingInitialized=false;
librariesLoaded = false;
//This is used called when the DOM is rendered.
renderedCallback() {
if(this.librariesLoaded)
this.drawChart();
//this.librariesLoaded = true;
if(!this.loadingInitialized) {
this.loadingInitialized = true;
/*
We have added the a parameter t and assigned the current time to it.
This is done to make sure the cache is refrehed everytime the scripts are loaded.
If we do not do this then there is an issues if we add multiple charts in a single component.
*/
Promise.all([
loadScript(this, D3 + '/d3.min.js?t='+new Date().getTime()),
loadScript(this, C3 + '/c3-0.7.4/c3.min.js?t='+new Date().getTime()),
loadStyle(this, C3 + '/c3-0.7.4/c3.min.css?t='+new Date().getTime()),
])
.then(() => {
this.librariesLoaded = true;
//Call the charting method when all the dependent javascript libraries are loaded.
this.drawChart();
})
.catch(error => {
console.log('The error ', error);
});
}
}
drawChart() {
this.chart = c3.generate({
bindto: this.template.querySelector('div.c3'),//Select the div to which the chart will be bound to.
data: {
columns: this.chartData,
type : 'donut'
},
donut : {
title : 'Opportunities',
label: {
format: function(value, ratio, id) {
return value;
}
}
}
});
}
//destroy the chart once the elemnt is destroyed
disconnectedCallback() {
this.chart.destroy();
}
}

view raw

opportunityPieChart.js

hosted with ❤ by GitHub

This is just a simple example for one to start with C3. Please share the beautiful charts that you build. Enjoy Charting!!!

LWC-Lightning Datatable sorting

This is a quick post to understand how sorting is accomplished in lightning datatable (LWC).

Lightning datatable provides an onsort attribute which will allow us to implement the sorting for the elements in the table. You could implement sorting locally or via making a server call.

Local Sorting

You would generally implement this type of sorting if you know that the list of elements is going to be small and limited. For example, if you’re displaying a list of approval history records for a particular record, you know that the number of records won’t be more (assuming you have a simple approval process).

In the example below, we have created a simple component which displays the list of the contacts (firstName and lastName). When the header column is clicked the onsort handler is invoked, the field and the sort order is passed and using this information the list is sorted.


<template>
<lightning-datatable
key-field="Id"
data={results}
columns={columns}
hide-checkbox-column ="false"
show-row-number-column="true"
onsort={updateColumnSorting}
sorted-by={sortBy}
sorted-direction={sortDirection}
row-number-offset ="0" >
</lightning-datatable>
</template>

view raw

contactListLocalSort.html

hosted with ❤ by GitHub


import { LightningElement,track,wire } from 'lwc';
import fetchContact from '@salesforce/apex/ContactList.fetchContactLocal';
const dataTablecolumns = [{
label: 'First Name',
fieldName: 'FirstName',
sortable : true,
type: 'text'
},
{
label : 'Last Name',
fieldName : 'LastName',
type : 'text',
sortable : true
}]
export default class ContactListLocalSort extends LightningElement {
@track results=[];
@track columns = dataTablecolumns;
@track sortBy='FirstName';
@track sortDirection='asc';
@wire(fetchContact) contactList({error, data}) {
if(data)
this.results=Object.assign([], data);
if(error)
console.log(error);
}
updateColumnSorting(event){
let fieldName = event.detail.fieldName;
let sortDirection = event.detail.sortDirection;
//assign the values
this.sortBy = fieldName;
this.sortDirection = sortDirection;
//call the custom sort method.
this.sortData(fieldName, sortDirection);
}
//This sorting logic here is very simple. This will be useful only for text or number field.
// You will need to implement custom logic for handling different types of field.
sortData(fieldName, sortDirection) {
let sortResult = Object.assign([], this.results);
this.results = sortResult.sort(function(a,b){
if(a[fieldName] < b[fieldName])
return sortDirection === 'asc' ? –1 : 1;
else if(a[fieldName] > b[fieldName])
return sortDirection === 'asc' ? 1 : –1;
else
return 0;
})
}
}

view raw

contactListLocalSort.js

hosted with ❤ by GitHub

https://gist.github.com/jungleeforce/7ffb0e94bf0d5641d162f6295ac9df9f.js

Sorting via server call

As you would have guessed this would be useful when you have a huge list and you are displaying a small chunk of the total records.

The major advantage of this method is that you need not implement any custom logic at all. The sorting will be completely handled by the SOQL. Another thing to note here is that you will have to disable the data-table so that the user’s do not click on the header in the time the server call is being executed.


<template>
<lightning-datatable
key-field="Id"
data={results}
columns={columns}
hide-checkbox-column ="false"
show-row-number-column="true"
onsort={updateColumnSorting}
sorted-by={sortBy}
sorted-direction={sortDirection}
row-number-offset ="0" >
</lightning-datatable>
</template>

view raw

contactListServerSort.html

hosted with ❤ by GitHub


import { LightningElement,track,wire } from 'lwc';
import fetchContact from '@salesforce/apex/ContactList.fetchContact';
const dataTablecolumns = [{
label: 'First Name',
fieldName: 'FirstName',
sortable : true,
type: 'text'
},
{
label : 'Last Name',
fieldName : 'LastName',
type : 'text',
sortable : true
}]
export default class ContactListServerSort extends LightningElement {
@track results=[];
@track columns = dataTablecolumns;
@track sortBy='FirstName';
@track sortDirection='asc';
//since we have used the dynamic wiring,
//the list is automatically refreshed when the sort direction or order changes.
@wire(fetchContact,{field : '$sortBy',sortOrder : '$sortDirection'}) contactList({error, data}) {
if(data)
this.results=Object.assign([], data);
if(error)
console.log(error);
}
updateColumnSorting(event){
let fieldName = event.detail.fieldName;
let sortDirection = event.detail.sortDirection;
//assign the values. This will trigger the wire method to reload.
this.sortBy = fieldName;
this.sortDirection = sortDirection;
}
}

view raw

contactListServerSort.js

hosted with ❤ by GitHub

Apex class


public with sharing class ContactList {
@AuraEnabled (Cacheable=true)
public static List<Contact> fetchContactLocal(){
return [SELECT Id, FirstName, LastName
FROM CONTACT Order By FirstName ASC];
}
@AuraEnabled (Cacheable=true)
public static List<Contact> fetchContact(String field, String sortOrder){
return Database.query('SELECT Id, FirstName, LastName FROM Contact ORDER BY '+field+' '+sortOrder);
}
}

view raw

ContactList.cls

hosted with ❤ by GitHub