Here is the LWC component, can be added to record page. Apex Class public class MultipleFilesDownLoadController {     @AuraEnabled()     public static  List<ContentDocumentLink> retriveFiles(String sLinkEntityId) {         system.debug('sLinkEntityId--'+sLinkEntityId);                List<ContentDocumentLink> listOfDocumentLink = [Select Id,ContentDocument.LatestP ..read more

There are 3 phase of LWC component  1. Mounting  A. constructor, B. connnectedCallback C. render D. renderedCallback 2. UnMounting  A. disconnectedcallback 3. Error  A.errorcallback Note - render is not lifecycle hook, it is protected method of Lightning element class. Mounting Phase LWC Creation and Render Life cycle Constructor Method·      This method called when component is instantiated and It flows from parent to child component. ·       Need to call Super() inside constructor metho ..read more

We can not straight forward map relationship filed from apex to LWC data table. When we get query results related object information comes  as different object itself. So we need to traverse the query results and map the way we want to. Hers is your controller method @AuraEnabled(cacheable=true)     public static List<Associated_Healthcare_Center__c> getAssociatedFacility(Id sLeadId,Id sAccountId){             return [SELECT id,Signature_Healthcare_Center__c,Signature_Healt ..read more

 Following are the ways we can apply in CSS in LWC. 1. Inline CCS Inline CSS is not recommended approaches, it is take highest priority among all CSS. is inline CSS added to div <template>     <lightning-card title="Inline CSS">         <div>             <div style="color:green;font-size:10px;">This is inline Style div</div>         </div>     </lightning-card> </template>  2. External CSS style can be applied to an elements such as h1, p,div sa ..read more

 To access elements rendered by component we need to use template property. Access element from tag. <h1>Element Inside H1 Tag </h1> const h1Element = this.template.querySelector('h1'); Console.log(h1Element.innerText ); // It will print "Element Inside H1 Tag" We can apply style sheet after getting DOM element dynamically.  h1Element.style = 'color:red;border-style: solid;' Accessing element using class. const userElements =  this.template.querySelectorAll('.name'); It will return node list (multiple items that is why  querySelectorAll is being used.) We can ..read more

 What is DOM ? DOM - Document Object Model is a programming API for HTML or XML component, It defines logical structure of documents and the way document is accessed and manipulated. Basically the DOM is tree structure representation of web page. What is Shadow DOM ? Shadow DOM brings encapsulation concept to DOM. It enables to link hidden separate DOM to an element. Benefits: DOM query, CCS rules and event propagation does not cross shadow boundary, hence creating encapsulation. Basically when we try fetch all the DOM using query selectors, we will not get DOM elements for child componen ..read more

 Adding one LWC component within body of another LWC component  is known as component composition. It allows building complex component from simper building block component. How to refer child component from parent component ? 1. childComponent            <c-child-component></c-child-component> 2. childComponentDemo       <c-child-component-demo></c-child-component-demo> 3. childComponentLWC         <c-child-component-l-w-c></c-child-component-l-w-c> This naming convection k ..read more

 There are 2 types of template looping in LWC 1. for:each 2. iterator For Each <template for:each={array} for:item="currentItem" for:index="index"> // we can add repeatable components </template> Note-  1. for:each attribute take array as input 2. for item represent the current item of the loop, currentItem is the alias name, we can name to anything. 3. for:index holds index of current element of an array. Importance of Key attribute in Template loop Key is a special string/integer attribute required to be included to first element inside template when creating list ..read more

 There are 2 special directive which is being used for conditional rendering of DOM element.   1. if:true    2. if:false  <template if:true={expression}>     Render when expression is true  </template>     <template if:false={expression}>     Render when expression is false  </template> Notes -  1. Expression can be JavaScript property 2. Can be property of an object defined in JavaScript. example {employee.name} 3. Ternary operator can not be used inside expression. 4. Array also can not be u ..read more

 LWC template/component does not allow expression or any manipulation or array expression. To solve this problem "Getter" is solution. It atomically bind data from Java scripts to template. Error = Invalid expression {employee[0]} - LWC1038: Template expression doesn't allow computed property accesslwc  <div >            {employee[0]} <p> The sum of {num1} and {num2} is {num1+num2}  </div> Component code <template>     <lightning-card title="Getters in LWC">         <div class="sl ..read more