Lightning Videos

Refer the below link to get the complete series of the video

http://www.sfdcpanther.com/lightning-tutorial/

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

 

 

 

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.

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.

Invoke Apex Controller from Lightning Component

Hi Friends,

In this post, I will show you how to invoke apex class from Lightning Component. Yes, I know earlier I posted a blog which says that say no to Apex controller 😛 😛 but there are many business cases where we need to use apex class.

Invoking apex controller from the lightning component is as easy as A, B, C. We will also learn about apex:repeat which is same as for loop in the apex and aura:handler which works as a constructor in Visualforce.

Considerations: – 

We need to keep the below things in our mind before calling the apex method from component

1 – Method must be annotated as @AuraEnabled to call from the Lightning Component

2 – Method must be static

In this tutorial, we will create a component that will call an apex controller at the time of load and display a list of Accounts into the component.

— Login into Salesforce Developer Org and open developer Console. Create a lightning Component and name it AccountList.

<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />

Name Must be init that indicated that this will act as a constructor.

The value must be {!this} and in the action attribute, you can call any method if Javascript and I will name it doInit.

AccountList.cmp

<aura:component controller=”AccountController”>

<!– List of Accounts to hold all the list of Accounts –>

<aura:attribute name=”accounts” type=”Account[]”/>

<!– Init method works as constructor for Lightning Component –>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />

<ul>

<!– Iterate over the list of Accounts and show the Account Name –>
<aura:iteration items=”{!v.accounts}” var=”account”>
{!Account.Name}
</aura:iteration>
</ul>

</aura:component>

 

AccountListController.js

({   

doInit : function(component, event) {       

// Call the Apex Class Method from Javascript       

var action = component.get(“c.findAll”);       

// Callback which will fetch the response from Apex and set the value to Component        action.setCallback(this, function(a) {   

// Set the value in the Accounts List an attribute that we created into Apex Controller        

component.set(“v.accounts”, a.getReturnValue());                   

});       

// Place the Action in the Queue    

$A.enqueueAction(action);   

}

})

 

AccountController.cls(Apex Class)

 

public class AccountController {

// Apex method must be @auraEnabled so that it can be called from the JavaScript Controller
@AuraEnabled
public static List<Account> findAll() {
return [SELECT Id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone
FROM Account ORDER BY createdDate ASC];
}
}

In the last setp create lightning App and test the Application AccountListApp.app

Click on Preview from the right to show the result!

<aura:application extends=”force:slds” >

<c:AccountList></c:AccountList>

</aura:application>

Controller

 

Salesforce Interview Q & A Series Part-II

Hello All, I am here with the next part of Questions and answers series.

16 – Difference b/w trigger and workflow?

workflow rule:- It is an automated process that fired an action based on evaluation criteria and rule criteria.

We can access a workflow across the object.

We can not perform DML operation on Related Objects. Only Master Object field can be updated in case of Master-Details Relationship.

We can not query the database.

Workflow action:- Email alert, Create task, field update, outbound email message

Trigger: – it is a piece of code which executed when the record is before and after of created, updated, deleted and after the record is undeleted from the recycle bin.

We can query the data from the database.

We can Query other related Objects and also can make DML on the same and related objects as well.

Unlike workflow, we can perform any task using apex trigger.

17 – What are Wrapper Classes in Salesforce? Give an example where you can use wrapper class!

A wrapper class in Salesforce is a Container Class which contains Objects, Collection of Objects, variables, Collection of other classes as its member. We can also say that a wrapper class is a custom object that Programmer defines to achieve the business need and defines the properties inside the class.

Example: – We can use the Wrapper class in the following scenarios

a) In the Visualforce community boards, one of the most commonly asked questions is, “How can I display a table of records with a checkbox and then process only the records that are selected?”.

Wrapper Class

b) OR we can use Wrapper class when we want to show the list of data in VF page or in any other classes of the many objects that are not related to each other.

18 – Difference b/w SOQL and SOSL?

SOQL: Salesforce Object Query Language, we can query all the fields, search one object at a time, perform DML operation on the query result.

Total number of records retrieved by SOQL queries – 50K

SOSL: Salesforce Object Search Language, we can query only text, number, email type fields, we can search for the different object at a time. If we are looking for the particular text that is available in any objects then we use SOQL like global search in salesforce and we can not make DML on the returned list.

Total number of records retrieved by a single SOSL query – 2000

Introduction to SOQL and SOSL

19 – Difference b/w Insert and Database.insert?

Insert – Insert and Database.insert method are same but Database.insert method provide you more flexibility as compared to Insert Method. If there is any exception while making DML using insert then All records will be aborted.

Database.Insert – Using Database.Insert method you can specify whether you wanted to abort the complete records when there is an error in any records or commit the success record and show a list of failed records. It also provides the Rollback functionality.

20 – What is the static resource?

Static resources allow you to upload content that you can reference in a Visualforce page, including archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files.

A single static resource can be up to 5 MB in size, and an organization can have up to 250 MB of static resources, total.

Creating a Static Resource

21 – How to call javascript through Static Resource on VF page?

<apex:includeScript value=”{!$Resource.Myscript}”/>

22 – What are workflow Actions in Salesforce?

Create a Task, Update a field, Email alert, Outbound message.

23 – How many ways we can be made field is required?

From Layout, Validation rule, at the time of Field creation.

24 – Difference b/w role and profile?

R for records means Role deals with records level security and Profile deals with Object Level access.

profiles control object – and field-level access

Roles influence record-level access

A role is the record level access and it is not mandatory for all the users.

The Profile is the object and field level access and it is mandatory for all the users.

25 – Difference b/w rendered, rerender, renderaspdf?

Rendered: – To show/hide the particular panel, field based on conditions. for example, if input 1 is not blank then show input 2 here we can use Rendered

Rerender: – Used for refresh the Output Panel

RenderasPdf: – To open the Vf page as PDF format

26 – What are standard Junction Object present in Salesforce?

OpportunitycontactRole, Pricebook Entry, Opportunity product

27 – Difference b/w action support, Action function?

ActionSupport ActionFunction
1) Directly call action method without javascript Call action method from javascript with AJAX
2) It can be used to call action method on  single event It can be used to call action method on different event
3) It can not be called from javascript function.It only invokes controller action methods from other Visualforce components It defines a new JavaScript function which can then be called from within a block of JavaScript code.

28 – How many controllers can be used on VF page?

Salesforce comes under Saas so we can use one controller and as many extensions

29 – Can we create Master-Detail relationship in the Object which already have existing records?

Directly we cannot create. But, If we want to create then we need to do the following steps

  1. Create a Lookup relationship field on the Object
  2. Fill all the Lookup values with the correct master records ids
  3. Then Go back to the lookup field and then change From Lookup to Master-Detail

30 – Can we convert Master-Detail field to Lookup field?

Yes, we can but if Master Object does not have any Rollup Summary field then only we can.

31 – Is it possible to delete junction – Object in case of Mater – Detail Relationship?

If the parent objects don’t have Roll up Summary fields for the child object then we can delete.

To delete a child object it should not be referred to Apex Classes and Apex Triggers.

Later if we undelete the object, Master-detail fields on the junction objects will be converted to look up Fields.

Note:

If we delete only Master-Detail Relationship field from the child object and undelete it from the Recycle Bin then it will be converted to look up the relationship.Parent Object we cannot delete because it will be referred

Parent Object we cannot delete because it will be referred in the child object.

32 – What will happen if we undelete the deleted Junction Object?

Master-Detail Relationship data types will be converted to look up related data types.

Standard Controller For Lightning Component Part II

In this tutorial, we will learn how to create, update and delete records using Lightning Data Services.

Creating Records

To create an empty record, leave the recordId attribute in force:recordData undefined.

We will create a Quick Contact Using LDS in this example we will not Link this contact with any account but you can Link this contact using 2 force:recordData tags in same component one for Account and one for Contact and Component must be placed into Account Layout either as Quick Action or into detail page.

Create a new Lightning Component and name it ldsCreateRecord.cmp and paste the below code.


<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">

<aura:attribute name="newContact" type="Object"/>
<aura:attribute name="simpleNewContact" type="Object"/>
<aura:attribute name="newContactError" type="String"/>

<force:recordData aura:id="contactRecordCreator"
layoutType="FULL"
targetRecord="{!v.newContact}"
targetFields ="{!v.simpleNewContact}"
targetError="{!v.newContactError}"
/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<!-- Display a header -->
<div class="slds-page-header" role="banner">
<p class="slds-text-heading--label">Create Contact</p>

</div>
<!-- Display Lightning Data Service errors -->
<aura:if isTrue="{!not(empty(v.newContactError))}">
<div class="recordError">
<ui:message title="Error" severity="error" closable="true">
{!v.newContactError}
</ui:message></div>
</aura:if>

<!-- Display the new contact form -->
<div class="slds-form--stacked">
		<lightning:input aura:id="contactField" name="firstName" label="First Name"
value="{!v.simpleNewContact.FirstName}" required="true"/>

		<lightning:input aura:id="contactField" name="lastname" label="Last Name"
value="{!v.simpleNewContact.LastName}" required="true"/>

		<lightning:input aura:id="contactField" name="title" label="Title"
value="{!v.simpleNewContact.Title}" />

		<lightning:button label="Save contact" onclick="{!c.handleSaveContact}"
variant="brand" class="slds-m-top--medium"/></div>
</aura:component>

Save, Click on Controller from right side and then paste the below code.

ldsCreateRecordController.js


({
doInit: function(component, event, helper) {
// Prepare a new record from template
component.find("contactRecordCreator").getNewRecord(
"Contact", // sObject type (entityAPIName)
null, // recordTypeId
false, // skip cache?
$A.getCallback(function() {
var rec = component.get("v.newContact");
var error = component.get("v.newContactError");
if(error || (rec === null)) {
console.log("Error initializing record template: " + error);
}
else {
console.log("Record template initialized: " + rec.sobjectType);
}
})
);
},

handleSaveContact: function(component, event, helper) {
if(helper.validateContactForm(component)) {
component.set("v.simpleNewContact.AccountId", component.get("v.recordId"));
component.find("contactRecordCreator").saveRecord(function(saveResult) {
if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
// record is saved successfully
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Saved",
"message": "The record was saved."
});
resultsToast.fire();

} else if (saveResult.state === "INCOMPLETE") {
// handle the incomplete state
console.log("User is offline, device doesn't support drafts.");
} else if (saveResult.state === "ERROR") {
// handle the error state
console.log('Problem saving contact, error: ' +
JSON.stringify(saveResult.error));
} else {
console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
}
});
}
}
})

ldsCreateRecordHelper.js


({
validateContactForm: function (cmp) {
var allValid = cmp.find('contactField').reduce(function (validSoFar, inputCmp) {
inputCmp.showHelpMessageIfInvalid();
return validSoFar &amp;amp;amp;amp;&amp;amp;amp;amp; inputCmp.get('v.validity').valid;
}, true);
if (allValid) {
//alert('All form entries look valid. Ready to submit!');
return allValid;
} else {
//alert('Please update the invalid form entries and try again.');
return false;
}
}
})

 

Deleting Records

Finally, to delete a record, specify the recordId with the fields attribute set to “Id” at a minimum.

ldsDeleteRecord.cmp

<aura:component implements=”flexipage:availableForRecordHome,force:hasRecordId”>

<aura:attribute name=”recordError” type=”String” access=”private”/>

<force:recordData aura:id=”recordHandler”
recordId=”{!v.recordId}”
fields=”Id”
/>

<!– Display Lightning Data Service errors, if any –>
<aura:if isTrue=”{!not(empty(v.recordError))}”>

{!v.recordError}

</aura:if>

<!– Display the delete record form –>


label=”Delete Record”
onclick=”{!c.handleDeleteRecord}”
variant=”brand” />

 

</aura:component>

ldsDeleteRecordController.js


({
handleDeleteRecord: function(component, event, helper) {
component.find("recordHandler").deleteRecord($A.getCallback(function(deleteResult) {
if (deleteResult.state === "SUCCESS" || deleteResult.state === "DRAFT") {
console.log("Record is deleted.");
}
else if (deleteResult.state === "INCOMPLETE") {
console.log("User is offline, device doesn't support drafts.");
}
else if (deleteResult.state === "ERROR") {
console.log('Problem deleting record, error: ' + JSON.stringify(deleteResult.error));
}
else {
console.log('Unknown problem, state: ' );
}
}));
}
})

Resources

Standard Controller For Lightning Component Part I

What Is Lightning Data Service?

Lightning Data Service (LDS) to serve as the data layer for Lightning. LDS is the Lightning Components. We can compare LDS with Visualforce standard controller, providing access to the data displayed on a Component. Without LDS, each component within an app makes independent calls to the server to perform CRUD operations on a record, even if all components in the app pull from the same record data

Without LDS, each component within an app makes independent calls to the server to perform CRUD operations on a record, even if all components in the app pull from the same record data and making server class reduces the performance of the page.

Using LDS we can eliminate requests that involve the same record data, sending a single shared data request that updates all relevant components.

  • Minimize XMLHttpRequests (XHR’s)
  • Fetch records once, reducing network transfers, app server load, and database server load
  • Cache record data on the client, separate from component metadata
  • Share record data across components
  • Enable progressive record loading, caching, and merging more fields and layouts into the cache
  • Enable proactive cache population
  • Promote consistency by using only one instance of the record data across multiple components
  • Create notifications when record data changes

Enough is Enough we have done a lot of theory and it’s time to do some magic with LDS 🙂 🙂

Meet Lightning Component Standard Controller (force:recordData): –

So, how do you access benefits of LDS? Simple all you need is just to include force:recordData in your component OK!

<force:recordData aura:id=”forceRecordCmp”
                                      recordId=”{!v.recordId}”
                                      layoutType=”{!v.layout}”
                                     fields=”{!v.fieldsToQuery}”
                                     mode=”VIEW”
                                     targetRecord=”{!v.record}”
                                     targetFields=”{!v.fields}”
                                     targetError=”{!v.error}”
/>

Attribute Name Attribute Type Description Required?
body Component[] The body of the component. In markup, this is everything in the body of the tag.
fields ArrayList Specifies which of the record’s fields to query.  The layoutType and/or fields attribute must be specified.
layoutType String Name of the layout to query, which determines the fields included. Valid values are FULL or COMPACT.  The layoutType and/or fields attribute must be specified.
mode String The mode in which to load the record: VIEW (default) or EDIT.
recordId String The record Id Populated with the loaded record
targetError String Will be set to the localized error message if the record can’t be provided.   Populated with any errors
targetFields Object A simplified view of the fields in targetRecord, to reference record fields in component markup.  Populated with the simplified view of the loaded record
targetRecord Object This attribute will contain only the fields relevant to the requested layoutType and/or fields attributes.

Below is Sample Code of display record using LDS. Create a Lightning Component and paste the below code add this component into any object Details Page.

<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId"> <!--inherit recordId attribute-->

<aura:attribute name="record" type="Object"
description="The record object to be displayed"/>
<aura:attribute name="simpleRecord" type="Object"
description="A simplified view record object to be displayed"/>
<aura:attribute name="recordError" type="String"
description="An error message bound to force:recordData"/>

<force:recordData aura:id="record"
layoutType="FULL"
recordId="{!v.recordId}"
targetError="{!v.recordError}"
targetRecord="{!v.record}"
targetFields ="{!v.simpleRecord}"
mode="VIEW"/>
<!-- Display a header with details about the record -->
<div class="slds-page-header" role="banner">
<p class="slds-text-heading--label">{!v.simpleRecord.Name}</p>

<h1 class="slds-page-header__title slds-m-right--small
lds-truncate slds-align-left">{!v.simpleRecord.BillingCity},
{!v.simpleRecord.BillingState}</h1>
</div>
<!-- Display Lightning Data Service errors, if any -->
<aura:if isTrue="{!not(empty(v.recordError))}">
<div class="recordError">
<ui:message title="Error" severity="error" closable="true">
{!v.recordError}
</ui:message></div>
</aura:if>

</aura:component>

Here’s a quick overview of the methods you can use in your JavaScript component controllers.

  • saveRecord() inserts or updates the record loaded into the force:recordData component.
  • deleteRecord() deletes the loaded record.
  • getNewRecord() loads a new record template that performs an insert when saved.
  • reloadRecord() reruns the loading code to overwrite the current targetRecord with the current attribute values.

 

Resources

Create First Lightning Component

Create Your First Lightning Component

In this article, we will learn how to create a first lightning component with all the basic component description.

Prerequisite: – 

  1. Lightning Experience must be enabled.
  2. My Domain Must be enabled and deployed. Click here to set up one if you do not already have one.

As most of you know that lightning is future of salesforce and sometimes we need the customized solution in order to achieve our business requirement. Lightning Component basically runs on Aura framework. So, Follow the below steps to create your own lightning component.

Step 1- Click on your name and then Open Developer Console into New Window

Step 1

Step 2 – Click on File -> New -> Lightning Component -> Name it FirstComponent and Click Submit. It will open a development workspace where we can develop/put HTML or predefined aura tags.

Setp 2

Step 3 – Files that each component includes

  • Component – Component is Client side XML markup which we use to display the details to our users using different aura tags or with the help of standard HTML tags.
  • Controller – Controller is Javascript file which is being used as Client side controller and this is middleware between apex controller and component.
  • Helper – Helper is also a javascript and work in client-side, we put those methods in the helper that are reusable like putting validation or any method which we are calling from multiple components. One helper can be used in between multiple components you can also say it like utility class.
  • Style – Style is used to put all our CSS here that we may use to styling our lightning component.
  • Documentation – A description, sample code, and one or multiple references to example component.
  • Renderer  – Client-side renderer to override default rendering for a component.
  • Design – If we want some predefined attribute values while using our component in Community, lightning App builder then we use Design attribute.
  • SVG – Custom icon resource for components used in the Lightning App Builder or Community Builder.

Step 3

Step 4 –  Write Static text into your Component. Put “This is My First Lightning Component” between <aura:component> opening and closing tags.

Step 4

Step 5 – Test your component, to test we will create a Lightning App. File -> New -> Lightning Application -> Name it FirstComponentApp -> Submit. Incorporate you component into app and Click preview to see the output. Put <c:FirstComponent></c:FirstComponent> between <aura:application> openting tags, save and Click Preview.

Step 4

Step 5

Step 5

Woohoo, you have just created your first lightning component. In next blog, we will learn how to use variables in lightning component and dynamic variable bindings.

Use Your component as Record, Home and App page

Until Summer 17 we can only use Standard Lightning pre define Templates as Record Detail Page, Homepage, and App home page. And now the big news coming after Winter 18 release, you can use your own custom Component as Homepage, Record Details page, and App homepage by adding new interfaces to your components!

Yeaahh! You can use your own custom solution now!

The following interfaces are new and can be used as per requirement: –

  • lightning:appHomeTemplate – Enables a component to be used as a custom Lightning page template for pages of type App Page. for Example <aura:component implements=”lightning:appHomeTemplate“> </aura:component>
  • lightning:homeTemplate – Enables a component to be used as a custom Lightning page template for the Lightning Experience Home page. Example: –  <aura:component implements=”lightning:homeTemplate“> </aura:component>
  • lightning:recordHomeTemplate – Enables a component to be used as a custom Lightning page template for record pages. Example: –  <aura:component implements=”lightning:recordHomeTemplate“> </aura:component>

 

Reference: – New and Changed Lightning Interfaces