Posts

16.1 how to make our First SF LWC available in app builder ?

 how to make our SF LWC available in app builder ? ChaTo make your Salesforce Lightning Web Component (LWC) available in the App Builder, you need to expose it properly by configuring the component's metadata fil 1. Update the Component’s Metadata File Every LWC has a metadata configuration file with the suffix .js-meta.xml . Open this file and ensure it contains the required configurations. Here’s an example of a basic configuration for App Builder: xml Copy code <?xml version= "1.0" encoding= "UTF-8" ?> < LightningComponentBundle xmlns = "http://soap.sforce.com/2006/04/metadata" fqn = "YourComponentName" > < apiVersion > 58.0 </ apiVersion > <!-- Use the API version of your Salesforce org --> < isExposed > true </ isExposed > < targets > < target > lightning__AppPage </ target > < target > lightning__RecordPage </ target > ...

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;">