LWC Course Template

001 LWC Course Template Trainer Reference

-- 1. Introduction ---
  * Basics: http://www.salesforce-interviewquestions.com/2019/09/lightning-web-components-salesforce-key.html
  * LWC Local Development Server: https://www.youtube.com/watch?v=yEV6MLmRmp4&t=1s&ab_channel=SrinuSFDC
  * Salesforce Advanced Code Searcher Chrome Plugin
-- 2. contactInfo : https://gist.github.com/sriniind19/59e5c3f30c93e9b62ffa63642d28cd38 ---
  -- Topics Covered ---
    1. LWC Bundle
    2. Private Reactive Properties 
    3. Private Non Reactive Properties 
    4. @track decorator
    5. Calling JS Methods
    6. Browser Events
    7. LWC Local Development Server 
    8. LWC Chrome extension
    9. targets to make LWC available in App Builder 
    10. Properties to allow configuring the public properties
    11. @api decorator
    12. Using LWC inside Aura
    13. Restricting LWC component to a specific object
    14. Showing configurable properties in the App Builder
    15. Wire Property
    16. uiRecordApi
    17. template:if
-- 3. wireApexDemo : https://gist.github.com/sriniind19/7a4d30949216d6c9714d9a2f5e82f512 ---
 -- Topics Covered ---
   1. Calling Apex Method using wire
   2. standard datatable 
   3. Limiting the lwc component to only a specific object
-- 4. renderedCallbackDemo : https://gist.github.com/sriniind19/bffbfba06b115e13a54711bb59162422 ---
 -- Topics Covered ---
   1. Using data-id
   2. Use of renderedCallback
   3. template if 
   4. try catch
   5. template for each  
-- 5. ImperativeApexDemo: https://docs.google.com/document/d/1NkGZLpPnrnOrj6I5bPfxfZknZbNrL2HfhZjPA7wkyuI/edit ---
 -- Topics Covered ---
   1. Pagination
   2. get Methods 
   3. firing Custom Event
   4. Listening to the Custom Event using on and addEventListener
   5. Dealing with spinner
   6. Search functionality for the data table
   7. imperative apex method call 
   8. Using promises
   9. Optional Chaining
   10. Short Circuiting with ||
-- 6. passingPublicPropertyDemo < ifAndIterationDemo: https://gist.github.com/sriniind19/b4f597258d1e995e848c3c9aa09121f7 ---
 -- Topics Covered ---
   1. if 
   2. for each and for item
   3. iterator 
   4. Supplying public boolean property
   5. Named Slot
-- 7. contacts < contactDetail: https://gist.github.com/sriniind19/7f5eeeecaeadb3b2b95d88329d05a6f7 ---
 -- Topics Covered ---
   1. Named Slots 
   2. Unnamed Slots 
   3. Public property from parent to child
-- 8. publicMethodParent < publicMethodChild: https://gist.github.com/sriniind19/3be549937354c3b8807663a39fa453ac ---
 -- Topics Covered ---
   1. Calling the public methods of the child from the parent component
   2. JavaScript Find 
   3. JavaScript Spread Operator
   4. Shadow DOM
-- 9. lifecycleContainer < lifecycleParent < lifecycleChild: https://gist.github.com/sriniind19/6045602f0066c2f747fedf0d20f9426e ---
 -- Topics Covered ---
   1. Lifecycle Hooks
   2. Constructor, connectedCallback, render, renderedCallback, disconnectedCallback
-- 10. invokeUtility < utility: https://gist.github.com/sriniind19/2819247200254d13df2f8eb5b8f67714 ---
 -- Topics Covered ---
   1. Reusable javaScript methods (Define methods to export)
   2. Importing the methods
-- 11. ldsCreateDemo: https://gist.github.com/sriniind19/52fdeec8bb7a0d9db9665db44f686cfd ---
 -- Topics Covered ---
   1. Lightning Data Service (LDS) using uiRecordApi
   2. getRecord and createRecord
   3. Promise
   4. Async Await
   5. Enhanced Object Literals
   6. get and wire
-- 12. recordEditViewForm | lwcRecordForm: https://gist.github.com/sriniind19/8f743de16959e729bffb7bb31a675767 ---
 -- Topics Covered ---
   1. RecordEditForm
   2. RecordViewForm
   3. RecordForm
-- 13. lwcTablewithRowActions: https://gist.github.com/sriniind19/2b9f9d4fac2c63cece8ecdf1032ec112 ---
 -- Topics Covered ---
   1. Imperative Apex
   2. Toast Messages
   3. Navigation Actions
   4. Importing Static Resources 
   5. Promises 
   6. dataset from javaScript
   7. SLDS Custom Datatable
-- 14. lmsLwcPublisher | lmsLwcSubscriber: https://gist.github.com/sriniind19/239d2561ffa87e998bab8ba373ce62e4 ---
 -- Topics Covered ---
   1. Lightning Message Channel
   2. Lightning Message Service
   3. Communication b/w Visualforce, Aura and LWC
-- 15. ObjectInfoApi: https://gist.github.com/sriniind19/43d1955857a74608aca0bb6926932bab ---
 -- Topics Covered ---
   1. To get Object Info and Child Relationships Info dynamically
   2. To get the picklist values of a field dynamically
   3. To get the picklist values dynamically based on the record type
-- 16. Mini Project (Place Order for Products): https://docs.google.com/document/d/1mJWw5Y_uUlHe0ILhoA1DfD_7J9Xz778oJTeDKOzXhWc/edit ---
 -- Topics Covered ---
   1. Search Feature within javaScript
   2. Public Property, Custom Event
   3. Product Tile
   4. forEach
   5. Wire
   6. ES6 filter, map
   7. Promise, Toast Message
-- 17. JEST (JavaScript Tests): https://gist.github.com/sriniind19/d1f6e85c861b5f22fcc1f2229eacb6e8 ---
 -- Topics Covered ---
   1. Installation and Basics (https://gist.github.com/sriniind19/ab836911bb006c2e33ad8569d0380d3d)
   2. Playing with DOM in Console 
   3. JEST for basic LWC Component (helloWorld or lwcBasics)
   4. Testing Data Binding and Events (customEventTesting)
   5. Show/Hide Example (showOrHideTesting)
   6. for loop / iteration (loopsTesting)
   7. Testing Wire Data (wireDataTesting)
   8. Imperative Apex Method Call Testing (imperativeApexTesting)
-- 18. Getting Custom Meta Data without Apex: customMetaDataDemo (https://gist.github.com/sriniind19/a7b7087d5d5aff9dcf0afb05fd45b2c5)
-- 19. Excercises for practice -
   1. Create a Custom Lookup LWC Component
   2. Navigate to New Record screen with default field values
   3. Datable relationship fields with hyper links
   4. Display Icon in Datatable
   5. Sorting in Datatable 
   6. Inline Editing in Datatable
   7. Map in LWC
--

002 LWC Course Template Students

-- 1. Introduction ---
  * Basics: http://www.salesforce-interviewquestions.com/2019/09/lightning-web-components-salesforce-key.html
  * LWC Local Development Server: https://www.youtube.com/watch?v=yEV6MLmRmp4&t=1s&ab_channel=SrinuSFDC
  * Salesforce Advanced Code Searcher Chrome Plugin
-- 2. contactInfo  ---
  -- Topics Covered ---
    1. LWC Bundle
    2. Private Reactive Properties 
    3. Private Non Reactive Properties 
    4. @track decorator
    5. Calling JS Methods
    6. Browser Events
    7. LWC Local Development Server 
    8. LWC Chrome extension
    9. targets to make LWC available in App Builder 
    10. Properties to allow configuring the public properties
    11. @api decorator
    12. Using LWC inside Aura
    13. Restricting LWC component to a specific object
    14. Showing configurable properties in the App Builder
    15. Wire Property
    16. uiRecordApi
    17. template:if
-- 3. wireApexDemo ---
 -- Topics Covered ---
  1. Calling Apex Method using wire
  2. standard datatable 
  3. Limiting the lwc component to only a specific object
-- 4. renderedCallbackDemo ---
 -- Topics Covered ---
   1. Using data-id
   2. Use of renderedCallback
   3. template if 
   4. try catch
   5. template for each
-- 5. ImperativeApexDemo < lwcPagination: https://docs.google.com/document/d/1mJWw5Y_uUlHe0ILhoA1DfD_7J9Xz778oJTeDKOzXhWc/edit?usp=sharing ---
 -- Topics Covered ---
   1. Pagination
   2. get Methods 
   3. firing Custom Event
   4. Listening to the Custom Event using on and addEventListener
   5. Dealing with spinner
   6. Search functionality for the data table
   7. imperative apex method call 
   8. Using promises
   9. Optional Chaining
   10. Short Circuiting with ||
-- 6. passingPublicPropertyDemo < ifAndIterationDemo:  ---
 -- Topics Covered ---
   1. if 
   2. for each and for item
   3. iterator 
   4. Supplying public boolean property
   5. Named Slot
-- 7. contacts < contactDetail: ---
 -- Topics Covered ---
   1. Named Slots 
   2. Unnamed Slots 
   3. Public property from parent to child
-- 8. publicMethodParent < publicMethodChild: ---
 -- Topics Covered ---
   1. Calling the public methods of the child from the parent component
   2. JavaScript Find 
   3. JavaScript Spread Operator
   4. Shadow DOM
-- 9. lifecycleContainer < lifecycleParent < lifecycleChild:  ---
 -- Topics Covered ---
   1. Lifecycle Hooks
   2. Constructor, connectedCallback, render, renderedCallback, disconnectedCallback
-- 10. invokeUtility < utility:  ---
 -- Topics Covered ---
   1. Reusable javaScript methods (Define methods to export)
   2. Importing the methods
-- 11. ldsCreateDemo: ---
 -- Topics Covered ---
   1. Lightning Data Service (LDS) using uiRecordApi
   2. getRecord and createRecord
   3. Promise
   4. Async Await
   5. Enhanced Object Literals
   6. get and wire
-- 12. recordEditViewForm | lwcRecordForm: ---
 -- Topics Covered ---
   1. RecordEditForm
   2. RecordViewForm
   3. RecordForm
-- 13. lwcTablewithRowActions: ---
 -- Topics Covered ---
   1. Imperative Apex
   2. Toast Messages
   3. Navigation Actions
   4. Importing Static Resources 
   5. Promises 
   6. dataset from javaScript
   7. SLDS Custom Datatable
-- 14. lmsLwcPublisher | lmsLwcSubscriber: ---
 -- Topics Covered ---
   1. Lightning Message Channel
   2. Lightning Message Service
   3. Communication b/w Visualforce, Aura and LWC
-- 15. objectInfoApiDemo: ---
 -- Topics Covered ---
   1. To get Object Info and Child Relationships Info dynamically
   2. To get the picklist values of a field dynamically
   3. To get the picklist values dynamically based on the record type
-- 16. Mini Project (Place Order for Products): https://docs.google.com/document/d/1mJWw5Y_uUlHe0ILhoA1DfD_7J9Xz778oJTeDKOzXhWc/edit ---
 -- Topics Covered ---
   1. Search Feature within javaScript
   2. Public Property, Custom Event
   3. Product Tile
   4. forEach
   5. Wire
   6. ES6 filter, map
   7. Promise, Toast Message
-- 17. JEST (JavaScript Tests): ---
 -- Topics Covered ---
   1. Installation and Basics (https://gist.github.com/sriniind19/ab836911bb006c2e33ad8569d0380d3d)
   2. Playing with DOM in Console 
   3. JEST for basic LWC Component (helloWorld or lwcBasics)
   4. Testing Data Binding and Events (customEventTesting)
   5. Show/Hide Example (showOrHideTesting)
   6. for loop / iteration (loopsTesting)
   7. Testing Wire Data (wireDataTesting)
   8. Imperative Apex Method Call Testing (imperativeApexTesting)
-- 18. Getting Custom Meta Data without Apex: customMetaDataDemo

003 Important Points

LWC -
@api myVar 

Aura -
<c:myCmp myVar="{#myVar}"/>
Note: {!myVar} won't work
--------

<template> <c-custom-card> <div class="title">{title}</div> </c-custom-card> </template>
Ans: it rendered as it is not in the shadow dom of the custom component

<c-todo-app>
  #shadow-root
    <div>
        <p>Your To Do List</p>
    </div>
    <c-todo-item>
      #shadow-root
        <div>
            <p>Go to the store</p>
        </div>
    </c-todo-item>
</c-todo-app>

CSS
CSS styles defined in a parent component don’t leak into a child. In our example, a p style defined in the todoApp.css style sheet doesn’t style the p element in the c-todo-item component, because the styles don’t reach into the shadow tree. 

-----------

<apex:includeLightning/> --> To load the javaScript file used by lightning component in Visualforce

-----------
Jest uses jsdom to provide an environment that behaves much like a browser's DOM or document. Each test file gets a single instance of jsdom, and changes aren't reset between tests inside the file. It's a best practice to clean up between tests so that a test's output doesn't affect any other test.
---