© FOCUSONFORCE User Interface Describe the Lightning Component framework, its benefits, and the types of content that can be contained in a Lightning web component. Pen gece See oe cn ey Table of Contents @ Lishinine Component Framework @ Framework Benents © Content Twesin Aura Components © Content Twnesin Lightning Web Components © Uestinewinuraw @ Static Resources Permissions. and Examples © sostat wotincations (6 rocusoyrorce eee 5] Table of Contents @ Modal Component © Pusttomeverts s.(@ rocusoyroRce After studying this topic, you should be able to: Describe what the Lightning Component framework is, Detern ve what a Lightning web component is Describe the types of content that can be contained in a Lightning web component Identity resources that can be accessed within a Lightning web ‘component e@ e000 (@ rocusovrorce Identify the benefits of the Lightning Component framework fy ightning Comp

component. APPEXCHANGE ‘Components can also be published on the ‘AppExchange and shared with others. (@ roousovronce © Multiple Use Cases MOBILE ACCESS ‘Components can be accessed from the sie navigation menu in the Salesforce Mobile App. LIGHTNING APP BUILDER \dard and custom components can be(@ rocusovronce added to Lightning pages using the Lightni EXPERIENCE BUILDER Experience Builder can be used to add ‘components to a community. (@ roousovrance Rich Ecosystem of Components ‘Awide range of builtin Lightning components, and additional custom or third-party components can be used to build or assemble applications quickly. © STANDARD COMPONENTS: Bi CUSTOM COMPONENTS ‘Custom Lightning components can be developed and can also be ‘configured using Lightning App Builder or Experience Builder. THIRD-PARTY COMPONENTS ‘AppExchange apps can be downloaded and used in assembling an application together with the other Lightning components. incomponens sport responsive deen whihveans apps EES not need tobe optimized fo deen devices (@ rocusovrorce Increased Performance Lightning components run on stateful and stateless architecture and use resources efficiently Ea INCREASED EFFICIENCY Oy) SERVER REQUESTS, Increases efficiency by utilizing server, browser, devices, and network intelligently. & i] toit only when necessary. Client calls the server or only sends requests STATEFUL & STATELESS RESPONSE DATA Utilizes stateful cient and stateless server architecture. the client. Server only sends the data that is needed by CLIENT-SIDE JAVASCRIPT Based on JavaScript on the client side to ‘manage UI component metadata and data. DATA FORMAT server. JSON JavaScript Object Notation) format is Used to exchange data between client and. Reduced Development Time Components can be used as reusable building blocks and accelerate app development.© CROSS-PLATFORM Pre-defined or out-of-the-box components work with both desktop and mobile devices, which facilitates parallel design and improves development efficiency. @ ENCAPSULATION 7 Encapsulated components allow developers to change internal details ‘while insulating component consumers from those changes. (@ rocusovronce 20| Extensive Compat ity Lightning components support latest browser technologies and adapt well on different devices @ BROWSER SUPPORT Cross-browser compatible and supports latest browser technology such as HTML5, CSS3, and touch events, @ RESPONSIVE DESIGN Responsive design makes apps compatible with different devices, MOBILE-OPTIMIZED Provides an enjoyable user experience on mobile devices. (@ rocusovrorce 2s Content Types in Aura Components (@ rocusovtonce 2| Saas a1ypes ur wumen = The following lists the different types of content that can be contained in an Aura component (or app). HTML (emp or “app) Configuration File (“design) Contains the HTML markup or presentation Defines metadata and design configuration for layer ofthe component or app Lightning App Builder or Experience Builder Controller (‘js) = 55 (xess) Contains the das or lient-ide controller that includes property and function definitions ‘Adds encapsulated styingto the Lightning component using standard CSS Gj ‘4 ow @ Helper (3s) Renderer (is) Contains helper functions Watcanbeivoked =) Used tooveride the default ‘rom any JavaScript codein the bundle rendering othe component Documentation (:auradoc) ® SVG leon ("sve) May contain description. specifistions ‘Uzedar the cstors Confer the component in ‘example usage, references, ete Lightning App Bilder or Experience Builder Im (© rocusonrorce a Aura Component Bundle When using the Aura Component programming model to build an application, an Aura Component bundle is created. BUNDLE CONTENTS ‘At the most, an Aura component bundle may contain up to eight different types of resources. APPORCOMPONENT Abundecan tect acomponent or ppaton tat both. A Lightning App (*.app) is created to make the application available outsi Lining eapreceesestndolnespponcvitneetcomU, whereas a Lightning component (*.cmp) is built to exist within the Lightning Experience environment. A Lightning app may contain Lightning components but i cannot contain another Lightning app. (@ rocusovronce Aura Component Bundle The description of each resource in the bundle is summarized below: © LAYOUT Itcontains the component or application markup that defines its layout, © FILES It is used to include or reference files such as stylesheet and JavaScript. © ATTRIBUTES Itcontains optional system attributes that instruct the framework haw to configure the app. @ REQUIRED It isthe onlv reauired file in the comoonent bundle.(@ Focusoyron 2s| Aura Component Bundle oro nae) =a DEFINE ACTIONS Itis the client-side controller used for defining the function for allof the component's actions. HANDLE EVENTS Ithandles client-side events in the component markup. @ KEY-VALUE PAIRS Itrepresents a JavaScript object containing a map of key-value pairs, in which the key represents a client function and the value contains the code for the associated action. (@ rocusovronce Aura Component Bundle ACTION PARAMETERS Each action in the controller takes three parameters: cmp. the component to which the controller belongs event ‘the event being handled by the action helper ‘the component's helper (@ rocusoyron a| Aura Component Bundle @ FUNCTIONS ‘The helper resource contains utility or shared JavaScript functions. @ ACCESSIBLE |(@ rocusovroree | It can be called by any JavaScript code in the Aura component bundle. | —_ (@ rocusoyroRce | Aura Component Bundle Ita} Es] | STYLING ‘The stylesheet contains CSS that is readily available to the component markup. MARKUP. ‘The styling only affects the markup resource with which itis Included. Aura Component Bundle @) DESIGN (“design) =o CONFIGURATION OPTIONS. “The design resource contains configuration options for the Aura component. }@ CUSTOM ATTRIBUTES “These are used for creating custom attributes with values that can be edited in tools such as Lightning App Builder. / DEVICE SUPPORT Itcan be used to control which type of devices the component will only support. | PAGE SUPPORT Itcan be used to restrict the component to display only in the record page of a standard or ‘custom object. (@ rocusovrorce Ea Aura Component Bundle ele IS Ue ETT)| DOCUMENTATION “This resource contains technical documentation about the Aura component. 1 ACCESS VIAURL ‘The content is accessible through: |httpss// lightning force.com/componentReference/sulte.app (@ rocusoyrorce o Aura Component Bundle aN | MODIFY DOM The Renderer resource contains code that can modify the DOM elements generated by the ‘Aura component. @ RENDER PHASES ‘The rendering phases are render, rerender, afterRender, and unrender, and they are executed inthe same order. (@ rocusovrorce x Aura Component Bundle SCALABLE VECTOR GRAPHIC (*svg) =] |}@ CUSTOM ICON “The SVG resource is used to set a custom icon for the component using SVG. | COMPONENT PANE ‘The custom icon is visible in the component pane in Lightning App Builder. (@ rocusoyrorce Aura Component ExampleIne Torlowing Is an example markup of an Aura component tnat allows Users To aaa checklist ems ana specify due dates. doesent tion fase te) war ct aie (© Focusovrorce x Current Aura Component Controller The following shows the available methods in the client-side controller. « con cepnent orn tegar trongeiomh() +1) + «mages ‘ety gtostsCcmanety sent Rages // populate (W.1eme) ncaa cogent, evn hg) ar ation = copes ge( ener Se nine Esra et are ce 111 pats yarnaters to sever on epee) 2 i bacon mga wear ne encounter" “ees it eas = grt Sforcettetost" “sh penege Ssepese geetenormive) {Sr edtips “rtapoaectatorntue) cotsetares(( pe” oesthye, ae pe Brenaentetionection: » (@ rocusovrorce ss| Current Aura Component Helper ‘The following shows the helper of the Aura component which contains a method that is called during its initialization. aneton(conponent, events heipeyg vor action = component. get('e lowsteen) 5 sce setcelbace ens, tunceLon(responey$ =a seceme ‘sr ene = respons. getReturveiee(); ‘Spancne-fetq seen eens) pease 2 hn aren was nsountent")s bs shoenqumsaseton(acton): »(@ rocusoyroRce 16] Content Types in Lightning Web Components (@ roousoiraRce a Types of Content The following lists the different types of content that can be contained in a Lightning web component. Javascript File (+s) Configuration File (“xm a HTML File (:htmi) CSSFile (“ess) _HTML File (htm 3 ae contanetneconperenttTa. "Ea ba FB) sessencapniaredsning ote ‘markup or presentation layer component using standard CSS @ Types of Lightning Web Components ‘There are currently two types of Lightning Web components: UICOMPONENT This type of Lightning Web Component is acustom component that users ms, canineract witha avserinerteceaichascickingenatuton ling | | oma ‘out a field on a form, etc. This type of component will require an HTML 7 fe, JavaSeit fle, andetadata configuration le. » \ 2 SERVICE COMPONENT (LIBRARY) % & This type of Lightning Web Component serves a helper library and is 2that can be shared between components. This type of component only called a service component. Its created to have variables or functions A requires a JavaScript file and metadata configuration file. (@ rocusovronce x Directory Structure A folder contains all the files needed in a Lightning web component. The folder and its files must have the same name. Below is a sample Lightning web component called modulePath: a) be ‘The modulePath” component is contained ‘5 meade % ina folder called “modulePath’ Sana : Sthscrtige maton (@ Focusonrorce 0 Component HTML File The HTML file serves as the presentation layer of the Lightning web component. Unlike service components, Ul components require this file =a ROOT TAG ‘The root tagiin the HTML file is