Lwc presentation
0 likes2,701 views
This document provides an overview of Lightning Web Components (LWC) including why LWC was introduced, the pillars of web components, LWC anatomy, lifecycle methods, calling Apex methods from LWC, using Lightning Data Services in LWC, handling events in LWC, coexistence of LWC and Aura components, and some miscellaneous topics like refreshing Apex data and sharing JS between LWC and Aura. The agenda covers these topics at a high level with examples provided for key concepts like creating a web component, calling Apex, handling events, and using Lightning Data Services to create a record in JavaScript.
Ad
More Related Content
What's hot (20)
Similar to Lwc presentation (20)
Ad
Recently uploaded (20)
Ad
Lwc presentation
- 1. Lightning Web Components - Nithesh Nekkanti
- 2. • Why Lightning Web Components (LWC) ? • Web Components • Lightning Web Components • Lifecycle Methods • Call Apex methods • Lightning Data Services • Events • LWC and Aura Co-existence and Communication between them. • Misc. Agenda
- 3. Back in 2014 Why LWC? In 2018-19 Salesforce’s LWC
- 5. • Import • Template • Custom Element • Shadow DOM Pillars of Web Components
- 6. “ Demo of a UserCard Web Component @ https://pentagonal-yard.glitch.me/
- 8. • constructor() • connectedCallback() • disconnectedCallback() • render() • renderedCallback()* • errorCallback()* LifeCycle Methods
- 10. Import the Apex Method Name from the controller as a module import findContacts from '@salesforce/apex/ContactController.findContacts’; import <method-name> from '@salesforce/apex/<controller-name>.<method-name>' Actual Server Call @wire(findContacts, { searchKey : <param value> }) results({error, data }){ if(data){ this.contacts = data; } else if(error) { console.error(error); } } (or) @wire(findContacts) contacts; Call Apex from LWC
- 11. Lightning Data Services in LWC Record Creation in JS : import { createRecord } from 'lightning/uiRecordApi';
- 12. Lightning Data Services in LWC Record Creation in JS import { createRecord } from 'lightning/uiRecordApi’; const fields = {}; fields.Name = this.name; const recordInput = { apiName: Account, fields }; createRecord(recordInput) .then(account => { console.log(account.id); }) .catch(error => { console.error(error.body.message); });
- 13. Events (Dispatch) * No Application Events in Lightning Web Components Simple Event Dispatch: this.dispatchEvent(new CustomEvent(‘event-name’)); Advanced One: new CustomEvent('event-name', { bubbles: true, composed: false, detail: { <payload> } } });
- 14. Events (Handling) In simpleContactCard component’s JS this.dispatchEvent(new CustomEvent('notify')); In The Container App <template> <c-my-component onnotify={handleNotify}></c-my-component> </template> In the Container App’s JS function handleNotify(e) { console.log(e.detail); }
- 15. Events (Handling) In simpleContactCard component’s JS this.dispatchEvent(new CustomEvent('notify')); In The Container App <template> <c-my-component onnotify={handleNotify}></c-my-component> </template> In the Container App’s JS function handleNotify(e) { console.log(e.detail); }
- 16. Aura & LWC Coexistence <aura:component> <!-- This is an LWC component --> <c:lwcApp onfilterchange="{!c.handleFilterChange}"/> </aura:component>
- 17. Misc.
- 18. Misc. • refreshApex(<reactive-property>); • No Aura:Ids && ids • Salesforce Modules - https://developer.salesforce.com/docs/component-library/documentation/lwc/reference_salesforce_modules • Template Directives - https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_directives • Share JS Between LWC & Aura
- 19. Misc.