Posts

Showing posts from November, 2024

21 - createRecord a standard method is LWC javascript

 is createRecord a standard method is LWC javascript ? ChatGPT said: ChatGPT Yes, createRecord is a standard method provided by the lightning/uiRecordApi module in Lightning Web Components (LWC). It allows you to create a new record in Salesforce from JavaScript code in your LWC component. Here's how you can use createRecord : Import createRecord : Import it from the lightning/uiRecordApi module. Specify Object API Name and Fields : Provide the object API name and the fields with values you want to set. Example of using createRecord Here’s a simple example that creates a new Contact record: HTML <template> <lightning-card title="Account Manager"> <lightning-layout> <lightning-layout-item size="6" padding="around-small"> <lightning-card title="Create A New Account"> <lightning-input name="Account Name" label="Name" onchange={acco...

20 . Component Lifecycle / INTER COMPONENT COMMUNICATION

 import { LightningElement } from 'lwc'; export default class LifecycleDemo extends LightningElement {     constructor () {         super();         console.log('Constructor Called WHEN INSTANCE IS CREATED--1.NO DOM MANUPULATION 2.NO ATTRIBUTE VALUES ASSIGNEMENT POSSIBLE');     }          connectedCallback (){         console.log('Component Connected Callback is called --Now DOM is Inserted so 1.CAN ASSIGN ATTRIBUTE VALUES 2. CANNOT call querylocater and CANNOT MANUPULATE THE DOM here because DOM is NOT RENDERED yet');     }     renderedCallback (){         console.log('Component Rendered Callback is called---1 DOM is RENDERED so we can use querySelector 2. CAN ALSO MANUPULATE THE DOM');     }          disconnectedCallback (){         console.log('Component DisConnected Callback is ca...

19 - @api / parent-child and child -parent communication / @track

 In Lightning Web Components (LWC), the @api decorator primarily allows parent components to access and modify properties or call methods defined in the child component . However, it does not work in the reverse direction – a child component cannot directly access the parent’s properties or methods using @api . Here's a summary of how @api works: Child Properties Accessible by Parent : When you use @api on a property or method in the child component, it makes that property or method "public" so the parent component can access and set it . For example, a child component might expose a property with @api , which allows the parent to pass values to it. javascript Copy code // childComponent.js import { LightningElement , api } from 'lwc' ; export default class ChildComponent extends LightningElement { @api childProperty; // Exposed to parent @api childMethod ( ) { // Exposed method that parent can call console . log ( 'Child m...

18 - LWC - BEST PRACTICES - For accessing HTML elements and their values in JavaScript

 In Lightning Web Components (LWC) , best practices for accessing HTML elements and their values in JavaScript involve using template.querySelector , template.querySelectorAll , and data-* attributes. Here’s a guide to help you follow these best practices effectively: 1. Use template.querySelector and template.querySelectorAll Since IDs can be unpredictable in LWC , the template.querySelector method is generally preferred. You can use CSS selectors , including class names, tag names, and data-* attributes, to locate elements. html Copy code <!-- template.html --> < lightning-input class = "my-input" data-id = "specialInput" value = "Sample Value" > </ lightning-input > javascript Copy code // component.js // Accessing the element const inputElement = this . template . querySelector ( '.my-input' ); // Getting the value const inputValue = inputElement. value ; 2. Use data-* Attributes for Specific Identifiers For ele...

Challenges Listing

 1) Unable to customize the Sales Homepage to add a new LWC ..What permisssions are needed ?

17 - LWC - Project structure / Javascript / Databinding / CSS

Image
 Javascript knowledge : Github-JS DirectFile ONLY MANDATORY FILES XXX.js-meta.xml XXX.js ------------------- LWC Databinding HTML To JS --> Eventhandler (onchange) JS To HTML --> @track HTML ---> <div>Hello {myGreeting}</div>  JS ---> @track myGreeting = 'World'; CSS .greeting-class{     color: Red; } div{     border : 5px solid blue; } :host{     border : 7px solid red; } <div class="greeting-class"> <div style="color: red; background:black;">

16 - vs code - SFDX Commands

SFDX Commands : The Salesforce CLI ( sfdx ) provides a range of commands to manage Salesforce environments and automate development tasks. Here’s a breakdown of some commonly used sfdx commands:   EXAMPLE : sfdx commands ┌──────────────────────────────────┬────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │ Id │ Summary │ ├──────────────────────────────────┼────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤ │ alias list │ List all aliases currently set on your local computer. │ │ alias set │ Set one or more aliases on your local computer. │ │ alias unset │ Unset one or more aliases that are currently set on your local computer. │ │ analytics generate template │ Generate a simple Analyti...