LWC at a glance, most frequently used tags, methods & styles | LWC Tutorial #3 | With real time project



Before start with real time projects and further, lets have look on the most frequently use tags, methods, terms and styles which will help us further. For more details of each concepts you can learn from LWC Guide.
So this content is categorised as below:
  • Create Lightning Web Components
    • HTML
      • Main file - <template> ... </template>
      • Render - <namespace-component-name>. Eg. myComponent.html renders as  <c-my-component> "c" denotes namespace for component
      • Data binding  - use curly braces - {propertyName/Javascript function}
      • Render HTML conditionally - add the if:true|false directive to a nested <template> | if:true|false={property}
      • Render List of items - for:each | iterator. for:each, for:item, for:index. To assign a key to the first element in the nested template, use the key={uniqueId} directive. 
    • Decorators
      • @api - To mark a property as public, annotate it with the @api decorator. Public properties are reactive. If the value of a reactive property changes, the component’s template rerenders any content that references the property.
      • @track - To track a private property’s value and rerender a component when it changes, decorate the property with @track.
        • You can use @track to decorate a property only; you can’t use it to decorate an object. You can decorate multiple properties with  @track, but each property can have only one decorator. For example, you can’t decorate a property with both @track and @api.
      • @wire - To read Salesforce data, Lightning web components use a reactive wire service. 
    • Javascript
      • A private property can be used only by the JavaScript class that defines it. Don’t use a private property in a template as private properties aren’t reactive and don’t rerender on change.
      • Private properties aren’t reactive. If you want to use an internal property in the template, make it a reactive property instead by adding the @track decorator.
      • Example of private, public & reactive
        • @api itemTitle = ''; // public
        • itemId = '';         // private
        • @track state = { x: 100, y: 100 };   // internal and reactive
      • Reflect JavaScript Properties to HTML Attributes
        • All HTML attributes are reactive by default.
        • When you take control of an attribute by exposing it as a public property, the attribute no longer appears in the HTML output by default. To pass the value through to the rendered HTML as an attribute (to reflect the property), define a getter and setter for the property and call the  setAttribute() method
        • To hide HTML attributes from the rendered HTML, call removeAttribute().
      • Share JavaScript Code (two ways)
        • A module can export a single default function or variable.
        • A module can also export named functions or variables.
      • Use Third-Party JavaScript Libraries (cannot directly use by giving link)
        • Download JS file and upload to Salesforce org as a static resources. 
        • Import that static resources : import resourceName from '@salesforce/resourceUrl/resourceName';
    • Access Static Resources, Labels, Internationalization Properties, and User IDs
      • Access Static Resources
        • Static resources can be archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files.
        • import myResource from '@salesforce/resourceUrl/resourceReference';
          • myResource—A name that refers to the static resource.
          • resourceReference—The name of the static resource.
      • Access Content Asset Files
        • Convert a Salesforce file into a content asset file to use the file in custom apps and Community templates.
        • import myContentAsset from '@salesforce/contentAssetUrl/contentAssetReference';
          • myContentAsset—A name that refers to the asset file.
          • contentAssetReference—The name of the asset file.
      • Access Labels
        • Use custom labels to create multilingual applications that present information (for example, help text or error messages) in a user’s native language.
        • import labelName from '@salesforce/label/labelReference';
          • labelName—A name that refers to the label.
          • labelReference—The name of the label in your org in the format namespace.labelName
      • Access Internalization Properties. 
        • Lightning web components have internationalization properties that you can use to adapt your components for users worldwide, across languages, currencies, and timezones.
        • import internationalizationPropertyName from @salesforce/i18n/internationalizationProperty
          • internationalizationPropertyName—A name that refers to the internationalization property. 
          • internationalizationProperty—An internationalization property. (lang, locale, currency, dateTime.shortDateFormat)
      • Get the Current User’s ID
        • import userId from '@salesforce/user/Id';
    • Component Lifecycle
      • Lifecycle Flow
      • Below diagram shows what happens when a component instance is removed from the DOM.
      • Run Code When a Component Is Created
        • The constructor() method fires when a component instance is created. Don’t add attributes to the host element during construction.
        • The first statement must be super() with no parameters.
        • Don’t use a return statement inside the constructor body
        • Don’t use the document.write() or document.open() methods
      • Run Code When a Component Is Inserted or Removed from the DOM
        • The connectedCallback() lifecycle hook fires when a component is inserted into the DOM. 
        • The  disconnectedCallback() lifecycle hook fires when a component is removed from the DOM.
      • Run Code When a Component Renders
        • The renderedCallback() is unique to Lightning Web Components. Use it to perform logic after a component has finished the rendering phase.
      • Handle Component Errors
        • The errorCallback() is unique to Lightning Web Components. Implement it to create an error boundary component that captures errors in all the descendent components in its tree during one of their lifecycle hooks.
  • Communicate with Events
    • Create and Dispatch Events
      • To create an event, use the CustomEvent() constructor.
      • To dispatch an event, call the EventTarget.dispatchEvent() method.
      • Example Previous & Next pagination. See example here 
    • Handle Event
      • Check example here
    • Configure Event Propagation
      • Bubbles
        • A Boolean value indicating whether the event bubbles up through the DOM or not. Defaults to false.
      • Composed
        • A Boolean value indicating whether the event can pass through the shadow boundary. Defaults to false.
      • For more about this click here
  • Work with Salesforce Data
    • Lightning Data Service
      • To work with data and metadata for Salesforce records, use components, wire adapters, and JavaScript functions built on top of Lightning Data Service (LDS) and User Interface API.
      • use @wire to specify a Lightning Data Service wire adapter.
    • Create a Form to Work with Records
      • lightning-record-edit-form—Displays an editable form.
      • lightning-record-view-form—Displays a read-only form.
      • lightning-record-form—Supports edit, view, and read-only modes.
        • view
          • Loads the form using output fields with inline editing enabled. Editable fields have edit icons. If a user clicks an edit icon, all fields in the form become editable, and the form displays Submit and Cancel buttons.
        • read-only
          • Read-only mode loads the form with output fields only. The form doesn’t include edit icons, Submit and Cancel buttons.
    • Create a Data Table with Inline Editing
      • To display Salesforce data in a table, use the lightning-datatable component.
      • key-field attribute maps each row to a contact record
      • data attribute holds the data retrieved via the wire service from either an Apex method or a wire adapter
      • column attribute maps the columns to record fields and customizes the behavior of the columns.
      • When a user edits a cell, the updated value is stored in  draft-values.
    • Use the Wire Service to Get Data
      • Components use @wire in their JavaScript class to read data from one of the wire adapters in the lightning/ui*Api modules.
      • adapterId (Identifier)—The identifier of the wire adapter.
      • adapterModule (String)—The identifier of the module that contains the wire adapter function, in the format  namespace/moduleName. Take another look at the format! To import a module in JavaScript, use lightning/ui*Api instead of lightning-ui-*-api.
      • adapterConfig (Object)—A configuration object specific to the wire adapter. Configuration object property values can be either strings or references to objects and fields imported from @salesforce/schema. Properties in the  adapterConfig object can’t be undefined. If a property is undefined, the wire service doesn’t provision data.
      • propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or  error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property.
      • Click here to visit and read this topic in details
    • Call Apex Methods
      • The imported methods are functions that the component can call either via  @wire or imperatively.
      • import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference'; 
        • apexMethodName—An imported symbol that identifies the Apex method.
        • apexMethodReference—The name of the Apex method to import.
        • Classname—The name of the Apex class.
        • Namespace—The namespace of the Salesforce organization. Specify a namespace unless the organization uses the default namespace (c), in which case don’t specify it.
    • Wire an Apex Method to a Property
      • import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';
      • @wire(apexMethod, { apexMethodParams }) 
      • propertyOrFunction;
        • apexMethod—The imported symbol that identifies the Apex method.
        • Classname—The name of the Apex class.
        • Namespace—The namespace of the Salesforce organization. Specify a namespace unless the organization uses the default namespace (c), in which case don’t specify it.
        • apexMethodParams—An object with parameters for the apexMethod, if needed. If a parameter value is null, the method is called. If a parameter value is undefined, the method isn’t called.
        • propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property or an  error property.
      • Click here to visit and read this topic in details
  • Security with Lightning Locker
    • JavaScript Strict Mode Enforcement
      • In JavaScript, strict mode is enforced in modules but optional in regular programs. However, Lightning Locker implicitly enables JavaScript strict mode everywhere. You don’t need to specify "use strict" in your code. JavaScript strict mode makes code more secure, robust, and supportable.
    • DOM Access Containment
      • Lightning web components can’t use the window or document global properties to query for DOM elements. For example, use this.template.querySelector() instead of  document.querySelector().
    • Restricted Access to Salesforce Global Variables
      • Lightning web components don't have access to:
        • $A
        • Aura
        • Sfdc
        • sforc
  • Use Components in Salesforce Experiences
    • <component>.js-meta.xml file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder
      • masterLabel - To set the friendly name to component that will be visible in App Builder
      • To see the component in different layout and pages use following tags in xml file
        • <target>lightning__RecordPage</target>
        • <target>lightning__AppPage</target>
        • <target>lightning__HomePage</target>
        • <target>lightningCommunity__Page</target>
        • <target>lightningCommunity__Default</target>
    • Display a Toast Notification
      • import { ShowToastEvent } from 'lightning/platformShowToastEvent';
  • Debug Lightning Web Components
    • Enable Debug Mode in Salesforce
      • Setup >> Debug Mode Users >> Enable for selected user
    • Debug Using Chrome DevTools
      • To open DevTools on Windows and Linux, press Control-Shift-I in your Google Chrome browser. On Mac, press Option-Command-I.
      • To quickly find which line of code is failing, enable the Pause on all exceptions option before running your code
  • Test Lightning Web Components
    • use lwc-jest for testing
    • Click here to know more about this
  • Reference
Reactions

Post a Comment

0 Comments