Salesforce Lightning Web Component Development

Install the Salesforce CLI and Visual Studio Code, update the CLI to the latest version, and install the Salesforce extension pack to create lightning web components.

Create a developer account, enable my domain, and enable the dev hub to manage scratch orgs for testing. Use scratch orgs as source-driven, disposable deployments distinct from sandboxes.

Create an svg project and a scratch org with the Salesforce CLI, authorize the dev hub, enable sample data, and open the default scratch org via terminal.

Learn to use sfdx commands for lightning web components and apex, create components, push to a scratch org, and open the default org using the command palette.

Share a review of the Salesforce Lightning Web Component Development course, suggest missed topics, and help future students by leaving feedback.

Create your first lightning web component with the command palette, generating HTML, JS, and a configuration file, then push to scratch org and expose to record, home, and app pages.

Demonstrates data binding in a Lightning web component by creating a hello world component with a reactive greeting property (track) that updates on input change and re-renders.

This lecture demonstrates data binding in an employee detail Lightning web component with name, age, and salary, using track-decorated reactive properties and onchange handlers to reflect changes instantly.

Render dom elements conditionally in lightning web components using the if:true|false directive with a property value to display different dom elements based on true or false.

Create an employee information lightning web component using the if true/false directive to toggle between an input form (name, age, salary) and a details view.

Render a list in a lightning web component using for each or iterator directives, assign a unique key to each item for efficient rerendering, and use iterator first and last.

Learn to render a list in lightning web components using the iterator directive, exposing first and last properties to apply special styling for the first and last items.

Build a simple interest calculator as a lightning web component with inputs for principal, time, and rate; apply the simple interest formula to display the result after calculation.

Build a shape calculator lightning web component to compute areas of square, rectangle, and rhombus using input boxes, three calculate buttons, and track decorator for reactive output.

Explore public properties in Salesforce lightning web components, made reactive by the api decorator, allowing a child's default value to be set by a parent via kebab-case attributes.

Learn the difference between reactive and non-reactive private properties in Salesforce lightning web components. Reactive properties trigger component rerendering, while non-reactive ones do not, affecting what updates on screen.

Learn to pass data from a parent to a child in Lightning web components by using a public @api property, iterating a parent list, and rendering each employee detail.

Expose boolean properties in lightning web components using @api decorator, making them public and reactive with a default false, where parent attribute sets it to true and absence yields false.

Explore the Lightning web component lifecycle from creation to render and removal, detailing the parent and child sequence with constructor, connectedCallback, renderedCallback, and disconnectedCallback.

Explore three ways to communicate between Salesforce lightning web components—parent to child, child to parent, and unrelated components—using methods, custom events, and publish-subscribe patterns.

See how a child component creates and dispatches custom events to communicate with its parent, and how the parent handles them via declarative HTML or JavaScript addEventListener.

Create and dispatch custom events in a child component, then handle them in the parent using declarative HTML or a JavaScript listener, passing event details.

Learn to enable parent-child communication in lightning web components by creating custom events, attaching listeners with addEventListener, enabling bubbles and using detail to update a reactive message.

Explore the publish subscriber model in lightning web components, enabling communication across dom trees between a publisher and subscribers using pubsub.js, current page reference, and fire event with event detail.

Discover how a pub-sub model connects a palette publisher with a canvas subscriber: selecting a color fires a change color event that updates the canvas background.

Explore three methods to access Salesforce data in lightning web components: lightning data service, lightning data service based components, and aura enabled, with base components as the preferred option.

Create a lightning web component that uses lightning data service to create a contact by entering name, email, and phone, then uses the create record API to save it.

Create a lightning web component that uses lightning data service to create a contact and wire getRecord to display last name, phone, and email.

Discover how to work with data using base components in lightning web components to create, read, and update records without apex code, using lightning-record-form, lightning-record-edit-form, and lightning-record-view-form.

Use the lightning record form base component to load an account record in a compact layout, in view mode, by passing record ID, object API name, and layout type.

Learn how to display a record with a custom field layout using the base component Record view form, showing name, phone, industry, and annual revenue in a two-column grid.

Learn to edit or create records with lightning-record-edit-form, using input and output fields, while the component enforces field level security and sharing without Apex code.

Create new records with the lightning-record-edit-form by providing the object name and required fields, then submit to save a new contact.

Learn to create and view Salesforce records with lightning-record-edit-form and lightning-record-view-form, using object API names and the onsuccess handler to capture the new record’s ID and render its details.

Fetch contact data via apex in a lightning web component using a wired aura-enabled method that returns id, last name, and phone with a 20-record limit.

Fetch records via Apex in a lightning web component by passing a number of records to the get contact method and displaying the returned contacts with last name and phone.