Introduction to Lightning Web Components – #LWC

As we all know that Salesforce has introduced the new concept to develop the Lightning Components which is LWC and is beta mode. In this post, we are going to learn how we can start working with LWC and all about LWC

I have recorded the videos regarding the same how we can set up the VS Code to start the coding with Salesforce DX. As, LWC is in beta mode and not available either in Sandbox or Developer environment we need to work with Salesforce Spring 19 Pre-Release Org. Here is the video which will take you to step by step how you can set up the tools and start development.

  • What is LWC?
  • Existing System
  • New LWC Structure
  • Comparison of Aura Framework and LWC
  • Setup Visual Code studio
  • Setup Salesforce CLI
  • Create Hello World LWC
  • Walkthrough with the key concept of LWC

Next Step – What the next video

  • LWC Folder Structure.
  • Supported Salesforce Experiences and Tools
  • Unsupported Experiences and Tools
  • Reactive Properties in JavaScript.
    • Public
    • Private
  • How to use attributes in LWC.
  • How to call the JavaScript method from LWC.

Sharing is Caring ūüôā If you have any doubt or query please comment them below in the comment box or you can reach me @ sfdcpanther@gmail.com OR you can tweet me @cloudyamit

Advertisements

Dynamic Binding Salesforce Lightning Component(Generic)

Welcome back All, here we will learn about the dynamic field of Lightning Component. As Most of you must be aware of that In Lightning, Component Dynamic component is not available. Recently I was working on one of my projects and implemented the Dynamic binding using the lightning component so I am going to share how I implemented the same so that it may help others.

As we all know that we can use the Dynamic Binding in the VisualForce page but in Lightning Component it is not Possible. 

In this example, We will show the list of Objects in a picklist and when user will select any object it will dynamically show the TOP 15 records in a table.

Output 

OutPut.png

Step1 – Create Apex Class

DynamicBindingDemoController.class

Step2 – Create the Lightning Component

DynamicBindingDemo.cmp

See the comments into the component.

Step3: – Click on Controller from the right and paste the below code for Controller Javascript

DynamicBindingDemoController.js


({
doInit : function(component, event, helper) {
helper.onInit(component, event, helper);
},
doHandleChange : function(component, event, helper) {
helper.onHandleChange(component, event, helper);
},
})

Step4: – Click on Helper from the right and paste the below code for Helper Javascript

DynamicBindingDemoHelper.js


({
onInit : function(component, event, helper) {
/* Call the Apex class method to fetch the List of all object */
var action = component.get('c.listAllObject');
action.setCallback(this, function(response){
var state = response.getState();
if(state === 'SUCCESS' && component.isValid()){
/* set the value to the attribute of the component */
var responseValue = response.getReturnValue();
var lstOptions = [];
for(var i=0; i < responseValue.length; i++){
lstOptions.push({
value : responseValue[i].split('####')[1],
key : responseValue[i].split('####')[0]
});
}
lstOptions.sort();
component.set('v.objectList', lstOptions);

}else{
var errors = response.getError();
$A.log(errors);
if(errors || errors[0].message){
console(errors[0].message);
}
}
});
$A.enqueueAction(action);
},
onHandleChange : function(component, event, helper){
/* Call this method whenever user will select the Obejct
* and show the Dynamic Content */
var selObject = component.find('selectObject').get('v.value');
var action = component.get('c.listAllFields');
if(selObject!=null && selObject!='' && selObject!=undefined){
action.setParams({
"objectName" : selObject
});
action.setCallback(this, function(response){
var state = response.getState();
if( state === 'SUCCESS' && component.isValid()){
//component.find("dynamicBody").set("v.body",[]);
component.find('sfdcDiv').set("v.body",[]);
var responseValue = response.getReturnValue();
var objectValue = responseValue.sObjectData;
var fieldList = responseValue.fieldList;

/* Create Dynamic Table */
var sObjectDataTableHeader = [];
// Create table Header
for (var i=0; i < fieldList.length; i++) {
sObjectDataTableHeader.push(fieldList[i].label);
}
console.log(sObjectDataTableHeader);
//Get the count of columns.
var columnCount = sObjectDataTableHeader.length;
//Create a HTML Table element.
var table = document.createElement("TABLE");
//table.border = "1";
//Add the header row.
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = sObjectDataTableHeader[i];
headerCell.className='hearderClass';
row.appendChild(headerCell);
}
var dvTable = document.getElementById("sfdctable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
/* Create Dynamic Table End */

if(objectValue.length){
for(var j=0; j < objectValue.length; j++){
// Dynamic table Row
row = table.insertRow(-1);
// Dynamic Table Row End
for (var i=0; i < fieldList.length; i++) {
// Dynamic table Row
var cell = row.insertCell(-1);
cell.innerHTML = objectValue[j][fieldList[i].apiName];
component.set('v.isSending' , false);

}
}
}else{

}
}else{
var errors = response.getError();
$A.log('Error Details '+errors);
if( errors || errors[0].message){
console.log('Error Details '+errors[0].message);
}
}
});
$A.enqueueAction(action);
}else{
component.set('v.isSending' , false);
}
},
})

See the comments.

Step5: – Create Lightning Application

DynamicBindingDemoApplication.app

<aura:application access=”Global” extends=”force:slds” >
<c:DynamicBindingDemo />
</aura:application>

Click on Preview to see the output of the component.

Happy learning ūüôā

Sharing is caring ūüôā ūüėČ

Resource:- 

OPFOCOUS Blog

Complete Code

 

 

 

Prerequisites to use Lightning Components

Before You Begin

To work with Lightning apps and components, follow these prerequisites.
  1. Create a Developer Edition organization
  2. Define a Custom Salesforce Domain Name

Create a Developer Edition Organization

You only need to create a Developer Edition org if you don’t already have one.

  1. In your browser, go to https://developer.salesforce.com/signup
  2. Fill in the fields about you and your company.
  3. In the Email field, make sure to use a public address you can easily check from a Web browser.
  4. Type a unique Username. Note that this field is also in the form of an email address, but it does not have to be the same as your email address, and in fact, it’s usually better if they aren’t the same. Your username is your login and your identity on developer.salesforce.com, so you’re often better served by choosing a username such amit.sfdc@salesforce.com.
  5. Select the checkbox for the Master Subscription Agreement and then click Submit Registration.
  6. In a moment you’ll receive an email with a login link. Click the link and change your password.

Note: – If ask for Security Question then write down is somewhere else so that you can easily use in future.

Define a Custom Salesforce Domain Name

A custom domain name helps you enhance access security and better manage login and authentication for your organization. If your custom domain is sfdcpanther, then your login URL would be https://sfdcpanther.lightning.force.com. For more information, see My Domain in the Salesforce Help.

Please select a domain which defines your business because once it created cannot be changed. You will need to raise a case with Salesforce Support to change the same.

Go to Setup -> Company Setting -> My Domain -> 

  1. Enter the subdomain name you want to use
  2. Click Check Availability. If your name is already taken, choose a different one.
  3. Click Register Domain.
  4. You receive an email when your domain name is ready for testing. It can take a few minutes.

Test your domain.

  1. In the Salesforce email, click the link to log in to your new subdomain. Or you can return to My Domain from Setup: Enter My Domain in the Quick Find box, then select My Domain. Now you’re at Step 3 of the wizard.
  2. If ask for Login then Login with your Username and Password.

Deploy your domain.

  1. From Setup, enter My Domain in the Quick Find box, then select My Domain.
  2. Click Deploy to Users.

Salesforce Document

Note: – You will not be able to run/execute the lightning component if My Domain is not enabled and deployed to all users in your Org and it must be unique for every Org.

Top 10 reasons why you should go for salesforce lightning?

I have compiled the reasons why one “Salesforce Developer” should go/adapt for Salesforce Lightning and are listed below –

  1. Avoid Server Calls: – Main advantage of Salesforce Lightning is that we can avoid many server calls while working with Lightning Components and reason behind this is JS controller using JS we can manipulate the data into the controller and display as per our need.
  2. Lazy Loading to increase performance Рanother awesome feature which loads/display the particular component or particular part of the component whenever users want to load not unlike the VF page. And because of lazy loading, it increases the performance and data will reflect on the fly. Uses a stateful client and stateless server architecture that relies on JavaScript on the client side to manage UI component metadata and application data.
  3. Faster Development: – Empowers teams to work faster with out-of-the-box components that function seamlessly with desktop and mobile devices. Building an app with components facilitates parallel design, improving overall development efficiency.
  4. Device-aware and cross-browser compatibility: –¬†Apps use responsive design and provide an enjoyable user experience.¬†The Lightning Component framework¬†supports the latest in browser technology such as HTML5, CSS3, and touch events.
  5. Lightning App Builder: – Empowers the team/company/individual to develop the complete application without writing a single line of code using out of box functionality and this application will work well into Salesforce1 as well.
  6. Event-driven architecture: –¬†Uses an event-driven architecture for better decoupling between components. Any component can subscribe to an application event, or to a component event they can see.
  7. SLDS: – SLDS means Salesforce Lightning Design System that gives you the power to style the component in your way, develop component as per your look and feel and you do not need to worry about responsive behavior it will take care all itself.
  8. 2 Way Binding: – It one of the Salesforce lightning feature that made me “Wow” and yes it is two-way binding¬†Changes in the application state have been automagically reflected into the view and vise-versa. In fact, we could build our own directives with two-way data bound scope properties, by setting a configuration value.
  9. Avoid ViewState Error: РAnother awesome feature is that we will never get view state error while working with the lighting component. 
  10. Lightning OUT: РHere comes the true power of Salesforce Lighting that is lightning OUT which gives you the power to take your lightning component to an external site and this is the thing that enables you to show Lighting Component into VF page.

 

Happy reading ūüôā

Happy Lightning ūüôā ūüėÄ

Resources: –

Salesforce Document

Lightning Out

Upload multiple(large) files at once using Lightning Component – up to 2 GB

Hi friends, as we all know that Winter 18 is live now into Developer org along with production org and have many exciting features. In this tutorial, I will show you how you can upload multiple files using lightning tags only without writing the apex code.

lightning:fileUpload: –¬†The Latest component released in wither 18 which is still in beta mode but you can use it to upload multiple at once up to 2 GB.

Limitations: –¬†

This component is not supported in Lightning Out or standalone apps, and displays as a disabled input.

You can upload max 10 files unless the limit is increased by admin and can be made up to 25 file max and 3 file min.

Create Lightning Component: –¬†

Open Developer Console and create a new Lightning Component name it “UploadMultipleComponent.cmp”, paste the below code

<aura:component implements=”force:appHostable,
                                 flexipage:availableForAllPageTypes,
                                 flexipage:availableForRecordHome,
                                 force:hasRecordId,
                                  forceCommunity:availableForAllPageTypes,
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† force:lightningQuickAction”
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† access=”global” >
<lightning:fileUpload label=”Upload Multiple files”
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†multiple=”true”
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† accept=”.pdf, .png”
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† recordId=”{!v.recordId}”
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† aura:id=”multipleUpload”
¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬† ¬†onuploadfinished=”{!c.handleUploadFinished}” />

</aura:component>

Explanation of component code: –¬†

lightning:fileUpload: РLightning base tag used to upload the files related to an object which requires two attribute label and recordId (parent Id for files).

onuploadfinished: – Javascript controller method which will execute when file upload will be finished to show the appropriate message to the user

force:lightningQuickAction: – If we implement this interface then the component will be available for quick Action

 force:hasRecordId : РTo fetch the recordId of the current Record.

 

Click on Controller from the right side and paste the below code for the same

“UploadMultipleComponentController.js”

({
handleUploadFinished: function (cmp, event) {
// Get the list of uploaded files
var uploadedFiles = event.getParam(“files”);
// show success message – with no of files uploaded
var toastEvent = $A.get(“e.force:showToast”);
toastEvent.setParams({
“title”: “Success!”,
“type” : “success”,
“message”: uploadedFiles.length+” files has been updated successfully!”
});
toastEvent.fire();

$A.get(‘e.force:refreshView’).fire();

// Close the action panel
var dismissActionPanel = $A.get(“e.force:closeQuickAction”);
dismissActionPanel.fire();
},

})

Click on File and SaveAll to save the component and controller code.

Explanation of above code: –¬†

handleUploadFinished: – Controller method will be called when file upload finish

event.getParam(“files”): – fetch the list of all the files that have been uploaded.

$A.get(“e.force:showToast”); : – To display user friendly message to user’

$A.get(‘e.force:refreshView’).fire(); : – Refresh the page to that recently uploaded files will display under the object record.

$A.get(“e.force:closeQuickAction”); : – Close the quick action.

Test the functionality: –¬†

Because of it’s known limitations we can not test this using standalone app so we will test this using lightning quick action and for testing purpose, we will use Account Object.

Go to Setup -> Object Manager -> Select Object(For example Account) -> Buttons, Links, and Actions -> New Action -> 

New Action.png

Now, we have created Quick Action we need to add this action into Object Page Layout.

Go to Setup -> Object Manager -> Select Object(For example Account) -> Page Layouts -> Select Your Layouts (For example Account Layout) -> Select Salesforce1 and Lightning from Left Panel and add your Quick Action into Salesforce1 and Lightning Experience Actions section

Page Layout.png

Now, Open an¬†account record click Upload Files action from right upload files and enjoy ūüôā

Upload files

 

Here is the live demo for the same

Upload Files.gif

 

That’s it folks, happy learning ūüôā

If you have any issue or suggestion then please come up in comment section with ūüôā

Reference: –

Salesforce Document File Upload

Salesforce Document Quick Action

Top 10 lightning tags to make development easy – Winter 18

Hi Guys, I have compiled top 10 new lightning tags that will make development so easy ūüôā and below is the list

  1. lightning:checkboxGroup: – A lightning:checkboxGroup component represents a checkbox group that enables selection of single or multiple options. If the required attribute is set to true, at least one checkbox must be selected.
  2. lightning:combobox: –¬†is an input element that enables single selection from a list of options. The result of the selection is displayed as the value of the input and it is similar to¬†UI: input select.
  3. lightning:datatable: – One of my favorite component which used to display the data in tabular form with inbuilt sort functionality and no need to use of SLDS for the look and feel.
  4. lightning:dualListbox: РWorks as multi-select picklist, A lightning:dualListbox component represents two side-by-side list boxes. Select one or more options in the list on the left.
  5. lightning:fileUpload (Beta): – To upload multiple and large files at once, you can upload files up to 2 GB using this component and the best part is it does not require Apex coding.
  6. lightning:flexipageRegionInfo: – This tag is useful when we want to create our own home, record or app page using custom components to define the width of areas.
  7. lightning:path (Beta): –¬†A lightning:path component displays the progress of a process, which is based on the picklist field that’s specified by Path Settings in Setup. The path is rendered as a horizontal bar with a chevron for each picklist item.
  8. lightning:picklistPath (Beta): –¬†A lightning:picklistPath component displays the progress of a process, which is based on the picklist field specified by the picklistFieldApiName attribute. Similar to above tag but the only difference is picklistpath¬†uses filed API name and path uses picklist setup in the path.
  9. lightning:progressBar: –¬†A lightning:progressBar component displays the progress of an operation from left to right, such as for a file download or upload
  10. lightning:progressIndicator: –¬†A lightning:progressIndicator component displays a horizontal list of steps in a process, indicating the number of steps in a given process, the current step, as well as prior steps completed.

Note: – You can find the complete list of all new lightning tags Here.

Happy reading folks ūüôā

Any suggestion please come up in the comment section.

Use Lightning Component into VF page – Lightning OUT

Have you ever used lightning component into your VF page? Have you ever think why we should create VF page and Lightning Component for the same functionality?

In all of my projects that I am working, I have stopped creating VF pages and Yes, it is 80% true ūüôā but I used to work on VF page for those clients that are still into Salesforce Classic.

111

I always use my lightning component into my VF page and it is right approach as everyone(Meetups, Dreamforce, Webinars, Salesforce docs) are talking about Lightning and it is future.

In this tutorial, we will create a lightning component, its controller(.jsfile), and an apex class which will display a list of Account into Lightning Component.

We will create a Lightning Application which will extend lightning out js file and a VF page where we will call that Lightning Component.

All resources used in this tutorial are listed below and can be found at my Github Repo.

1 – AccountList.cmp – The component which displays the list of All the accounts

2 – AccountListController.js – JS file the controller of AccountList component to communicate with Apex class and set the data into the component attribute.

3 – AccountController.cls – The apex class to query account records.

4 – LightningOutDemoApp.app – The app which contains the AccountList component

5 –¬†AccountListVF.vfp – The VF page, where we will call the lightning component.

Key points to remember: –

  1. use <apex:includeLightning /> tags at the beginning of VF page This component loads the JavaScript file used by Lightning Components for Visualforce.
  2. Lightning App must extend ltng:outApp library/interface.
  3. We can use $Lightning.use() many times into VF page but that must reference the same lightning app.
  4. We can only call those components that are referenced into the app.

LightningOutDemoApp.app

<aura:application access=”Global” extends=”ltng:outApp” >
                      <c:AccountList ></c:AccountList>
</aura:application>

Description of above code

access: – determines, if we can use the component throughout the Salesforce org or not acceptable values, are global, public, private

ltng:outApp: –¬†Extending from¬†ltng:outApp¬†adds SLDS resources to the page to allow your Lightning components to be styled with the Salesforce Lightning Design System (SLDS). If you don‚Äôt want SLDS resources added to the page, extend from¬†ltng:outAppUnstyled¬†instead. using¬†ltng:outApp we can access our lightning component into VF page or any external site.

AccountListVF.vfp

<apex:page >
<apex:includeLightning />

¬† ¬† ¬† ¬† <– div where we will embed our lightning component –>

<div id=”lightning” />
$Lightning.use(“c:LightningOutDemoApp”, function() {
$Lightning.createComponent(“c:AccountList”,
{
“VFpageValue” : “Woohoooo, Lightning Out is an amazing feature of Salesforce Lightning”
},
“lightning”,
function(cmp) {

});
});

</apex:page>

$Lightning.use(): – Refer the lightning application that we are using.

$Lightning.createComponent(): – Used to dynamically creating the lightning component.

You will find the complete code into my Github Repo.

Resources: –

Salesforce Document

Salesforce Document Lightning Out

Lightning Icon

Lightning Card

Debugging Lightning Component tips and trick

Unlike Apex we can not debug lightning component very easily. So, I have found some solution here it may help others while developing the lightning component.

1-256

In this post, I will tell you how to debug lightning component. I have faced the problem while debugging the lightning component. So, I am posting the blog here that will help the other Salesforce Developer that are working on Lightning Component.

Right Click on the Component that You want to Debug

Select Inspect Element

Inspect Element

Select Network Tab and then Select XHR tab

After you selected XHR tab, refresh the lightning component so that error can be reproduced if the error is while loading the component otherwise perform the action where you are getting the error like onclick, onchange or any client-side action.

Debug Track 1

1 – Select Network Tab

2 – Select XHR tab

3 – Filter the response (enter your apex class method which is being called on the action from javascript)

4 – Select filtered response

5 – Select Response tab, copy and paste the response into notepad and you will get the complete detail about the error.

Debug Track 2

If you have any questions please come up into the comment section with.