Master Lightning Web Component in 21 hours - Salesforce Dev

Troubleshoot VS Code connection to your Salesforce org by authorizing the org, letting changes load, changing the default browser, and validating the CLI and SFTP setup.

Discover how to retrieve apex classes from your Salesforce org into VS Code and deploy local changes back to the org using the retrieve and deploy workflow.

Retrieve apex class changes from your Salesforce org into VS Code, edit locally, and deploy updates back to the org using the deploy option, verifying success via deployment status.

Use VS Code to create and deploy apex classes, generating code with a pre-populated constructor and methods, while maintaining a consistent force-app structure.

Create and deploy your first lightning web component from VS code, expose it on a record page, and add it to a case page using app builder.

Explore building a Salesforce lightning card using base components, customize title, icon, and body, copy code from the component library, then deploy and preview in your org.

Learn data binding in a lightning web component by adding a display message that updates when a button is clicked, using a JavaScript property and an onClick handler.

Learn to capture user input with a text box, handle on change and on click events, and display a hello message by binding the input value to a message property.

Toggle the email input by conditionally rendering DOM elements with a checkbox in a lightning web component. Use onchange handling to show or hide the field based on user opt-in.

Learn to conditionally render a list of contact names in a lightning web component, showing the list only when a checkbox is checked and hiding it otherwise.

Hardcode a contacts list and render it as a bulleted unordered list in a lightning web component using for:each with a unique key and styling.

Master rendering multiple templates in a single lightning web component by toggling between first and second HTML templates via a user button, using import, show template, and conditional logic.

Learn how to embed a child lwc inside a parent lwc, expose both components, render the child in the parent, and apply kebab-case naming and exposure rules.

Discover how a parent component passes data to a child in Lightning web components by exposing a public property with the @api decorator, enabling seamless parent-to-child communication.

Engage in a hands-on exercise to build a Lightning web component that lists contacts in a card layout, displaying name, email, and phone by passing data from parent to child.

Build a parent and child lwc that pass a list of contact records from parent to child and enable child-to-parent communication via a custom event, with hands-on vs code setup.

Learn how to send a message from a child LWC to its parent by dispatching a custom event with a detail payload and handling it in the parent.

Learn to call a parent method from a child LWC by dispatching a custom event, listening in the parent, and invoking the parent method to update messages.

Explore parent-to-child data sharing via @api properties and child-to-parent messaging with custom events in Lightning web components. Engage in a hands-on exercise exchanging messages between components.

Learn to implement toast messages in lightning web components to indicate successful child-to-parent communication, using showToast with title, message, and variant options.

Demonstrates building a parent and child lightning web components that update a list: enter a value, click add, and display the new entry in the child list.

Make a private collection reactive with the track decorator, expose a child method via api, and update the list using query selector in a lightning web component.

Discover how to fetch Salesforce data in a lightning web component using base components built on Lightning Data Service, then expand with Wire Service or Apex methods as needed.

Explore lightning data service (LDS) and how it improves performance by progressively loading data, caching results on the client, and reducing server calls via bulkification and deduplication.

Explore the lightning data service and user interface api delivering data and metadata in response. Use lightning-record-form to display and edit case records with object name, record id, and fields.

Learn to implement a lightning record form in Salesforce with @api exposed record ID and object name, controlling fields, layout type, and mode for create, view, or edit.

Explore lightning record form and record view form to display record data with read-only fields, labels, and field-level security and sharing, then decide when to customize versus use out-of-the-box forms.

Learn how to convert a record form to an edit form by swapping output for input fields and using a submit button to handle saves.

Explore wire service in lightning web components to fetch Salesforce data beyond base components, learn wire adapter concepts, and the syntax with decorators for dynamic data access.

Wire a lightning web component using the get record adapter from the lightning record API, with dynamic record ids via dollar syntax and a getter for case status.

Discover how to implement the lightning web component wire service as a function, compare it with a property, and handle data and errors using track and template logic.

Learn to call Apex methods from a lightning web component with the wire service, importing and exposing methods, and using wire as property or function with cacheable true.

Learn how to control data retrieval in lightning web components by imperatively calling Apex methods, choosing when to invoke based on user actions like submitting a form and selecting industry.

Discover when to call Apex methods imperatively over wire in Lightning web components, including not cacheable methods, DML operations, and user interface API limitations, with a button-driven contact list example.

Build a lightning web component in this hands-on part 1 that fetches accounts by industry using an imperative apex method, with a picklist and a submit button.

Develop a lightning web component that displays account records by industry using apex calls and dynamically populated industry picklist via get picklist value and object info, with a submit action.

Learn to build a lightning web component that calls Apex method imperatively to fetch accounts by industry, render results with a for-each loop, and show no records found when empty.

Learn to create a lightning data table in a lwc component to display account records with multiple columns, custom headers, and typed fields such as text, currency, and url.

Explore how to implement navigation in a Lightning web component using the Lightning/navigation module and navigation mixin, creating page references for record pages, apps, and external URLs.

Explore the coexistence of aura and lw component, embedding lw in aura, why lw cannot contain aura, and when to choose lw, aura, or Visualforce for new versus old requirements.

Learn to embed a Lightning web component in an Aura parent, pass a message from parent to child, and expose the child to record pages with c:ComponentName.

Explore parent aura to child lwc communication by exposing a child property with @api, passing a message from parent, and updating the ui.

Learn how a child lwc component communicates with a parent aura component by dispatching a custom event with a detail payload and having the parent handle it with a listener.

Learn how a parent aura component calls a method on a child lwc by exposing the method with api, assigning an aura id, and invoking it with component.find.

Explore exposing lightning web components across record, home, and app pages using dot js-meta.xml target configs, manage object-level visibility, and enable admin configurable properties.

Expose a lightning web component on a custom tab and in a lightning app by configuring targets in the metadata xml and deploying via the app builder.

Expose a lightning component to a screen flow by configuring meta.xml targets, exposing a flow property, and deploying, then verify the flow displays the passed value.

Explore how to expose a lightning web component as headless or screen quick actions, implement invoke methods, and build interactive quick actions with a smart contact update form.