Lightning
Lightning Experience?
With Lightning Experience, Salesforce now has many new cloud-based features and a new UI. Sales accounts, campaigns, contacts, leads, opportunities, person accounts, price books and products have been re-organized and given a modern, visual appeal.
The overall intent of the redesign is to make the data and tools more accessible so that Sales Reps can work more effectively and close deals faster with fewer clicks.
Good start App click h ere
@AuraEnabled Annotation
@AuraEnabled annotation enables client- and server-side access to an Apex controller method
The AuraEnabled annotation provides support for Apex methods and properties to be used with the Lightning Component framework. The AuraEnabled annotation is overloaded, and is used for two separate and distinct purposes.
- Use @AuraEnabled on Apex class static methods to make them accessible as remote controller actions in your Lightning components.
- Use @AuraEnabled on Apex instance methods and properties to make them serializable when an instance of the class is returned as data from a server-side action.
VF to lightining:
Javascript buttons not working
Include slds (sld-scope) tags for applying lightning à for Command buttons, PBT buttons, (sld-buttons),
Add below code in apex class to check the buttons are lightening or not
And add in VF page
Use VF pages as a lighting components
Use lighting components in side VF pages using lightining out
https://lightningdesignsystem.com/ for lightings
pageblocktables will not understand by lightning
Include slds
You can update the records as inline editing and automatically update dependent components
VF to Lightning URL: https://developer.salesforce.com/events/webinars/migrating-visualforce-pages-lightning
Q: What is lightning?
A: Lightning is the collection of tools and technologies behind a significant upgrade to the Salesforce platform. Lightning includes:
- Lightening Experience: A set of modern user interfaces optimized for speed. This includes the Lightning Experience, Salesforce1 Mobile app and template-based communities.
- Lightning Component Framework: A JavaScript framework and set of standard components that allow you to build reusable components to customize the Lightning Experience, Salesforce1 Mobile app and template-based communities and build your own standalone apps.
- Visual Building Tools: Drag-and-drop technologies for fast and easy app building & customizations. Use the Lightning App Builder to customize the Lightning Experience and Salesforce1 Mobile app. Use the Community Builder to customize template-based communities.
- Lightning Exchange: A section of the AppExchange where you can find 70+ partner components to jumpstart your development.
- Lightning Design System: Style guides and modern enterprise UX best practices to build pixel perfect apps that match the look and feel of the Lightning Experience and Salesforce1 Mobile app.
Q: How do I use Lightning Components with the Salesforce1 Mobile App?
- A: Create a custom Lightning tab that points to your component and include that tab in your Salesforce1 Mobile navigation.
Q: Which parts of Lightning Components are server-side and which are client-side?
A: Lightning Components can use JavaScript on the client side and Apex on the server side.
Q: Visualforce already has components. How are Lightning Component different and why would I want to use them?
A: Visualforce components are page-centric and most of the work is done on the server.
Lightning Components are client-side centric, which makes them more dynamic and mobile-friendly.
Q: Now that Lightning Components are GA, when would it still be appropriate to use Visualforce?
A: Visualforce provides the facility for delivering template-driven web pages and email messages. In addition, developers wishing to simply utilize a basic container and maintain more control over the lifecycle of the request may choose Visualforce pages. Finally, organizations that can’t use Apex code can’t use Lightning Components, but they can use Visualforce.
Q: What is Aura? Why do I see the aura: namespace in the code?
A: Aura is the open source technology that powers Lightning Components. The aura: namespace contains all of the basic building blocks for defining components and applications.
Q: Where can a component be displayed?
A: After you create a component, you will want to display it somewhere. There are a number of possibilities.
- Lightning Experience: You can edit the home page, edit a record detail page or create/edit a new app page to include it. Alternatively, you can create a custom Lightning tab that references your component and add that tab to your Lightning navigation.
- Salesforce1 Mobile app: Display your component in the Salesforce1 Mobile app by creating a custom Lightning tab that references it and adding that tab in your mobile navigation.
- Template-based community: Display your component in your template-based (e.g. Napili) community using the Community Builder.
- Standalone Lightning app: Create a standalone Lightning app (e.g. myapp.app) and include your component in this app. Access your Lightning app by URL.
Lightening application in salesforce1 Quick contact: https://developerforce.github.io/lightning-components-tutorial/
https://www.udemy.com/salesforce-lightning-components-development-tutorial/
Difference between visual force and lightening:
Lightning Component Bundle includes
Component - Markup language used to structure the layout of the component.
CSS Styling - Used to change the cosmetic look or style of the component.
Controller - Use a JavaScript Controller to handle Client-Side logic processing or use an Apex Controller to handle Server-Side logic processing.
Design File - Used to describe the design-time behavior of the component when used in Lightning Pages, Lightning App Builder, or in Community Builder.
Documentation File - Provides sample code or reference documents for others to use when they get your component.
Renderer - Used to override the default Client-Side render settings of a component.
Helper - Used to store reusable JavaScript functions that are handled by the Renderer or Controller as well as executing Server-Side actions.
Optional: SVG File - Allows you to include custom icons for reference within your component.
Visualforce
UI Generation
- Server-Side
Workflow
- User requests a page
- The server executes the page’s underlying code and sends the resulting HTML to the browser
- The browser displays the HTML
- When the user interacts with the page, return to step one.
Advantages
- Tried and true model
- Easy to implement for greater productivity
- Naturally splits large applications into small, manageable pages
- Has built-in metadata integration
Disadvantages
- Limited interactivity (aside from added JavaScript functionality)
- Higher latency
Lightning
UI Generation
- Client-Side
Workflow
- The user requests an application or a component
- The application or component bundle is returned to the client
- The browser loads the bundle
- The JavaScript application generates the UI
- When the user interacts with the page, the JavaScript application modifies the user interface as needed (return to previous step)
Advantages
- Enables highly interactive and immersive user experiences
- Aligns with Salesforce user interface strategy
- Built on metadata from the foundation, providing an integrated developer experience
- The Developer Console supports Lightning components, so there’s an integrated developer experience
Disadvantages
- Higher learning curve compared to Visualforce
- Higher complexity than Visualforce—you’re building an application, not a page
- Since Lightning components are new, there are still some features that aren’t supported
- There are a limited number of out-of-the-box components
When you should use Lightning
- If you are developing for Salesforce1 Mobile Application you should use Lightning as visualforce characteristics, especially the page-centric orientation, can be a poor match for mobile apps with limited, high-latency network connections and limited compute resources. Lightning components, by contrast, was designed specifically to handle this context.
- If you are building an interactive experience with JavaScript to meet user experience requirements you should use Lightning.
- If you are enabling non-developers to build apps by assembling standard or custom components you should use Lightning App Builder and Lightning components for custom components. Use Visualforce if the required components aren’t yet available.
- If you are adding user interface element for example, say you want to add a tab to a record home. This task is a simple drag-and-drop in Lightning App Builder.
- If you are building a Community for Customers you should use Community Builder to create a Lightning-based community site leveraging Lightning components.
- If you are committed to invest in latest technology you should start using Lightning Components.
- If you are starting a brand new project you should use Lightning Components. If you’re not familiar with them, there’s no better time than now to learn!
Continue using Visualforce
- If you are building a page-centric experience with limited Client-Side logic use Visualforce.
- If you are committed to Javascript Framework such as AngularJS or React continue using Visualforce.
- If you are building an interactive experience with Javascript and you need third party Framework you should use Visualforce as a container for third party Framework.
- If you are building a community for partners continue using Visualforce in Salesforce Classic. Explore using Lightning components with Lightning components for Visualforce.
- If you are exposing a Public-Facing Unauthenticated Website continue using Visualforce. Lightning components don’t support an anonymous (unauthenticated) user context yet.
- If you are rendering pages as PDF in your application use Visualforce. Lightning components don’t support rendering as PDF output yet.
- If you are adding to an existing project with lots of Visualforce Pages continue to use Visualforce. Consider moving to Lightning components using Lightning components for Visualforce.
Module 3: Creating the ContactController Class
Lightning applications make it easy to work with data. In this module, you create an Apex controller that allows your Lightning application to retrieve contacts, or to search contacts by name or by id.
What you will learn
- Create an Apex Controller that exposes data and logic to the client application
Steps
- In Salesforce, click your name in the upper right corner of the screen. In the dropdown menu, click Developer Console.
- In the Developer Console, click File > New > Apex Class. Specify ContactController as the class name and click OK.
- Implement the class as follows:
4. public with sharing class ContactController {5. 6. @AuraEnabled7. public static List<Contact> findAll() {8. return [SELECT id, name, phone FROM Contact LIMIT 50];9. }10. 11. @AuraEnabled12. public static List<Contact> findByName(String searchKey) {13. String name = '%' + searchKey + '%';14. return [SELECT id, name, phone FROM Contact WHERE name LIKE :name LIMIT 50];15. }16. 17. @AuraEnabled18. public static Contact findById(String contactId) {19. return [SELECT id, name, title, phone, mobilephone, Account.Name20. FROM Contact WHERE Id = :contactId];21. }22. 23.}
Code Highlights:
- ContactController is a regular controller class with methods to retrieve contacts (findAll), or to search contacts by name (findByName) or by id (findById).
- The @AuraEnabled method annotation makes a method available to Lightning applications
- Click File > Save to save the file
Module 4: Creating the Lightning Application
In this module, you create the QuickContacts Lightning Application and you use Bootstrap to define a basic layout for the application.
What you will learn
- Create a Lightning Application in the Developer Console
- Use Static Resources in a Lightning Application
- Preview your Lightning Application in the browser
Steps
- In the Developer Console, click File > New > Lightning Application. Specify QuickContacts as the bundle name and click Submit
- Implement the application as follows:
3. <aura:application>4. 5. <link href='/resource/bootstrap/' rel="stylesheet"/>6. 7. <div class="navbar navbar-default navbar-static-top" role="navigation">8. <div class="container">9. <div class="navbar-header">10. <a href="#" class="navbar-brand">Lightning Contacts</a>11. </div>12. </div>13. </div>14. 15. <div class="container">16. <div class="row">17. <div class="col-sm-12">18. Contact list goes here19. </div>20. </div>21. </div>22. 23.</aura:application>
Code Highlights:
- The link tag references the bootstrap style sheet uploaded as a static resource in module 2
- The application uses Bootstrap to implement a basic layout for the application
- Lightning applications can include Lightning components and regular HTML markup
- Click File > Save to save the file
- Click Preview (upper right corner)
- Preview the application in the browser
Module 5: Creating the ContactList Component
In this module, you create a Lightning Component responsible for displaying the list of contacts and you add that component to the QuickContacts application.
What you will learn
- Create a Lightning Component in the Developer Console
- Use component attributes
- Use event handlers
- Use Lightning Components in a Lightning Application
Step 1: Create the Component
- In the Developer Console, click File > New > Lightning Component. Specify ContactList as the bundle name and click Submit
- Implement the component as follows:
3. <aura:component controller="yournamespace.ContactController">4. 5. <aura:attribute name="contacts" type="Contact[]"/>6. <aura:handler name="init" value="{!this}" action="{!c.doInit}" />7. 8. <ul class="list-group">9. <aura:iteration items="{!v.contacts}" var="contact">10. <li class="list-group-item">11. <a href="{! '#contact/' + contact.Id }">12. <p>{!contact.Name}</p>13. <p>{!contact.Phone}</p>14. </a>15. </li>16. </aura:iteration>17. </ul>18. 19.</aura:component>
Make sure you prefix the controller name with your own namespace you created in module 2.
Code Highlights:
- The controller assigned to the component (first line of code) refers to the server-side controller (ContactController) you created in module 3.
- The contacts attribute is defined to hold the list of Contact objects returned from the server.
- The init handler is defined to execute some code when the component is initialized. That code (doInit) is defined in the component's client-side controller (you'll implement the controller in the next step).
- <aura:iteration> is used to iterate through the list of contacts and create an <li> for each contact
- The <a href="{! '#contact/' + contact.Id }"> anchor tag around the contact data is defined to set the page hashtag to #contact/ followed by the contact id. In module 7, the ContactDetails component will use that hashtag to display details information every time the user clicks a new contact.
- Click File > Save to save the file.
Step 2: Implement the Controller
- Click CONTROLLER
- Implement the Controller as follows:
3. ({4. doInit : function(component, event) {5. var action = component.get("c.findAll");6. action.setCallback(this, function(a) {7. component.set("v.contacts", a.getReturnValue());8. });9. $A.enqueueAction(action); // add service side actions in to Q10. }11.})
Code Highlights:
- The controller has a single function called doInit. This is the function the component calls when it is initialized.
- You first get a reference to the findAll() method in the component's server-side controller (ContactController), and store it in the action variable.
- Since the call to the server's findAll() method is asynchronous, you then register a callback function that is executed when the call returns. In the callback function, you simply assign the list of contacts to the component's contacts attribute.
- $A.enqueueAction(action) sends the request the server. More precisely, it adds the call to the queue of asynchronous server calls. That queue is an optimization feature of Lightning.
- Click File > Save to save the file
Step 3: Add ContactList to the Application UI
- In the developer console, go back to the QuickContacts
If you don't see the tab in the developer console, select File > Open Lightning Resources in the Developer Console menu, select QuickContacts > APPLICATION in the dialog, and click the Open Selected button.
- Modify the container div as follows to add the ContactList component to the application layout.
3. <div class="container">4. <div class="row">5. <div class="col-sm-12">6. <yournamespace:ContactList/>7. </div>8. </div>9. </div>
Make sure you prefix ContactList with your own namespace you created in module 2.
- Click File > Save to save the file
- Click Preview or Update Preview
- Preview the application in your browser
Step 4: Style the Component
There is probably too much space above and below the phone number. In this step, you'll add a style to the component to remove the extra space.
- Click STYLE
- Implement the following style:
3. .THIS p {4. margin: 0;5. }
- Click File > Save to save the file
- In the developer console, go back to the QuickContacts application, click Preview or Update Preview to preview the application in your browser
Module 6: Creating the SearchBar Component
In this module, you create a SearchBar component that allows the user to search contacts by name. You could add the search bar to the ContactList component, but that would limit the reusability of the component: depending on specific UI requirements, you may want the search bar to be directly on top of the list (like you'll do here), integrated in the header, or somewhere else. You also want the ContactList component to be able to display a list of contacts independently of the type of search bar you use: regular input field with search button, type ahead search, etc. For these reasons, it's a good idea to decouple the search UI, from the display UI, and create two components: ContactList and SearchBar.
What you will learn
- Create custom Lightning Events
- Communicate between components using events
Step 1: Create the SearchKey Change Event:
Now that we decided to build SearchBar and ContactList as two separate components, we need a way for ContactList to know when the search key changes so that it can retrieve and display the matching contacts. Lightning Events enable that kind of communication between components. In this step, you create a Lightning Event used by the SearchBar component to notify other components when the search key changes.
- In the Developer Console, click File > New > Lightning Event. Specify SearchKeyChange as the bundle name and click Submit
- Implement the event as follows:
3. <aura:event type="APPLICATION">4. <aura:attribute name="searchKey" type="String"/>5. </aura:event>
Code Highlights:
- The event holds one argument: the new searchKey
- Click File > Save to save the file
Step 2: Create the SearchBar Component
- In the Developer Console, click File > New > Lightning Component. Specify SearchBar as the bundle name and click Submit
- Implement the component as follows:
3. <aura:component>4. 5. <input type="text" class="form-control" onkeyup="{!c.searchKeyChange}"6. placeholder="Search"/>7. 8. </aura:component>
Code Highlights:
- This is a simple component with a single input field.
- When the user types in a character (onkeyup), the searchKeyChange() function is executed in the component's client-side controller (you'll code that function in the next step). Using this approach the search is refined every time the user types in a character.
- Click File > Save to save the file
Step 3: Implement the Controller
- Click CONTROLLER (upper right corner in the code editor)
- Implement the Controller as follows:
3. ({4. searchKeyChange: function(component, event, helper) {5. var myEvent = $A.get("e.yournamespace:SearchKeyChange");6. myEvent.setParams({"searchKey": event.target.value});7. myEvent.fire();8. }9. })
Make sure you prefix SearchKeyChange with your own namespace you created in module 2.
Code Highlights:
- The function first gets an instance of the SearchKeyChange event
- It then sets the event's searchKey parameter to the input field's new value
- Finally, it fires the event so that registered listeners can catch it
- Click File > Save to save the file
Step 4: Listen for the SearchKeyChange Event in ContactList
- In the Developer Console, go back to the ContactList component
- Add an event handler for the SearchKeyChange event (right after the init handler):
3. <aura:handler event="yournamespace:SearchKeyChange" action="{!c.searchKeyChange}"/>
Make sure you prefix SearchKeyChange with your own namespace you created in module 2.
Code Highlight:
- The handler is set up to execute the searchKeyChange() function in the controller
- Click CONTROLLER (upper right corner in the code editor)
- Add the searchKeyChange() function implemented as follows:
6. searchKeyChange: function(component, event) {7. var searchKey = event.getParam("searchKey");8. var action = component.get("c.findByName");9. action.setParams({10. "searchKey": searchKey11. });12. action.setCallback(this, function(a) {13. component.set("v.contacts", a.getReturnValue());14. });15. $A.enqueueAction(action);16.}
Make sure you separate the doInit() and the searchKeyChange() functions with a comma
Code Highlights:
- You first get the value of the new searchKey available in the event object.
- You then invoke the findByName() method in the Apex controller you created in module 3.
- When the asynchronous call returns, you assign the list of contacts returned by findByName() to the component's contacts attribute.
- Click File > Save to save the file
Step 5: Add SearchBar to the Application
- In the developer console, go back to the QuickContacts application
- Modify the div container as follows to add the SearchBar component to the user interface
3. <div class="container">4. <div class="row">5. <div class="col-sm-12">6. <yournamespace:SearchBar/>7. <yournamespace:ContactList/>8. </div>9. </div>10.</div>
Make sure you prefix SearchBar and ContactList with your own namespace you created in module 2.
- Click File > Save to save the file
- Click Update Preview to preview the application in the browser
Module 7: Creating the ContactDetails Component
In this module, you create the ContactDetails component. When the user selects a contact in ContactList, ContactDetails automatically displays the details for the selected contact.
What you will learn
- Manage the state of a Lightning application using the URL's hashtag
- Use Lightning's locationChange event
Step 1: Create the ContactDetails Component
- In the Developer Console, click File > New > Lightning Component. Specify ContactDetails as the bundle name and click Submit
- Implement the component as follows:
3. <aura:component controller="yournamespace.ContactController">4. 5. <aura:attribute name="contact" type="Contact" default="{'sobjectType': 'Contact'}"/>6. <aura:handler event="aura:locationChange" action="{!c.locationChange}"/>7. 8. <div class="details">9. <h1>{!v.contact.Name}</h1>10. <h3>{!v.contact.Account.Name}</h3>11. <h3>{!v.contact.Title}</h3>12. <p>{!v.contact.Phone}</p>13. {!v.contact.MobilePhone}14. </div>15. 16.</aura:component>
Make sure you prefix the controller name with your own namespace you created in module 2.
Code Highlights
- The controller assigned to the component (first line of code) refers to the server-side controller (ContactController) you created in module 3.
- The contact attribute is defined to hold the displayed Contact.
- In the ContactList component you created in module 5, you wrapped each contact in the list with a <a href="{! '#contact/' + contact.Id }"> anchor tag that sets the page hashtag to #contact/ followed by the contact id of the clicked contact. In this component, the locationChange handler is defined to listen to hashtag changes, and execute the controller's locationChange() when it happens. The locationChange() function implemented in the next step retrieves and displays the selected contact.
- Click File > Save to save the file
Step 2: Implement the Controller
- Click CONTROLLER (upper right corner in the code editor)
- Implement the Controller as follows:
3. ({4. locationChange : function(component, event, helper) {5. var token = event.getParam("token");6. if (token.indexOf('contact/') === 0) {7. var contactId = token.substr(token.indexOf('/') + 1);8. var action = component.get("c.findById");9. action.setParams({10. "contactId": contactId11. });12. action.setCallback(this, function(a) {13. component.set("v.contact", a.getReturnValue());14. });15. $A.enqueueAction(action);16. }17. }18.})
Code Highlights:
- The function first gets the new value of the hashtag available in the event object.
- It then parses the hashtag to extract the contact id and invokes the findById() method in the Apex controller you created in module 3.
- When the asynchronous call returns, it assigns the contact returned by findById() to the component's contact attribute.
- Click File > Save to save the file
Step 3: Style the Application
- Click STYLE (upper right corner in the code editor)
- Add the following styles
3. .THIS p {4. margin: 20px 0 2px 0;5. }6. 7. .THIS h1 {8. margin: 0 0 10px 0;9. }10. 11..THIS h3 {12. margin: 4px 0;13.}
- Click File > Save to save the file
Step 4: Add ContactDetails to the Application
- In the Developer Console, go back to the QuickContacts application and modify the container layout as follows to add the ContactDetails component to the right of the list (change the class of the first column to col-sm-4 instead of col-sm-12, and add a second column to display ContactDetails):
2. <div class="container">3. <div class="row">4. <div class="col-sm-4">5. <yournamespace:SearchBar/>6. <yournamespace:ContactList/>7. </div>8. <div class="col-sm-8">9. <yournamespace:ContactDetails/>10. </div>11. </div>12.</div>
Make sure you prefix SearchBar, ContactList, and ContactDetails with your own namespace you created in module 2.
- Click File > Save to save the file
- Click Update Preview to run the application in the browser
Convert VF to lightening:
1). <apex:Slds/> : By using this tag you can include lightning css file in your visualforce page. You don’t need to update your resource time to time .
2). To use the SVG spritemap icons, add the attributes xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”to the <html> element. As shown below:
1 2 3 4 5 6 7 8 9 10 11 |
<apex:page> <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"> <!-- write your code --> <span class="slds-icon_container slds-icon-standard-account"> <svg aria-hidden="true" class="slds-icon"> <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use> </svg> <span class="slds-assistive-text">Contact Icon</span> </span> </html> </apex:page> |
3). Wrap your code in a container:
1 |
<div class="slds-scope">...</div> |
Component Hierarchy:
Applications event vs component event.
http://www.sfdcstuff.com/2017/09/application-events-vs-component-events.html
System Events
- These events are fired automatically by the framework such as during component initialization, attribute value change, rendering etc. All Components can register for system events in their HTML markup.
- Few examples of system events are init, aura:waiting, aura:doneWaiting, aura:doneRendering etc.
- If app or component is rerendered, then init event is fired. If server side call is made in init then, aura:waiting event is fired. Once the server call is finished then aura:doneWaiting event is fired. After this aura:doneRendering is fired.
Component Event |
Application Event |
-> Components events can be handled by same component or component which is present in containment hierarchy (component that instantiates or contain component). -> Passing data up the component hierarchy via a component event Consider using a component event for handling low-level UI interactions such as selections and form validation |
-> This kind of events can be handled by any component which is listening to it (have handler defined for event). It is kind of publish-subscribe modal. -> Passing data up and around the component hierarchy via an application component |
<aura:event type="COMPONENT" description="Event template" > <aura:attribute name="msg" type="String" access="GLOBAL"/> </aura:event> |
<aura:event type="APPLICATION" description="Event template" > <aura:attribute name="msg" type="String" access="GLOBAL"/> </aura:event> |
var accidentEvent = component.getEvent("newCarAccident"); accidentEvent.setParams({"msg":"New Message!!!."}); accidentEvent.fire(); |
var appEvent = $A.get("e.c:carAccidentAppEvent"); appEvent.setParams({"msg":"New Message!!!."}); appEvent.fire(); |
Always try to use component events. Component event usage is more localized as these can be used by same component or component in containment hierarchy. |
If you use application events then it may fire system events Use Application events only if components are present in 2 different app or are not in containment hierarchy |