Quick Start: Explore the LWC Recipes Sample App

Deploy the LWC Recipes App

Deploy the Lightning Web Components Recipes sample app. Learn three recipes.
  • Lightning Web Components leverage web standards to accelerate development on the Salesforce Platform.
  • LWC Recipes app helps developers get a feel for what LWCs can do.
    • It contains many small components that illustrate how to accomplish certain tasks:
      • How to tie your component to a server-side Apex controller
      • How to create a new-record form
    • Also contains code to give you a head start on developing your own LWCs
  • Installed by following the steps at the Project README:
    1. Set Up Environment
      • Enable Dev Hub in Trailhead Playground
      • Install Salesforce CLI, Visual Studio Code, Visual Studio Code Salesforce extensions
    2. Clone the repository and enter the directory
      • git clone https://github.com/trailheadapps/lwc-recipes
      • cd lwc-recipes
    3. Authorize hub org and provide an alias
      • sfdx auth:web:login -s -a mydevorg
    4. Assign the recipes permission set to the default user
      • sfdx force:user:permset:assign -n recipes
    5. Import some sample data
      • sfdx force:data:tree:import -p ./data/data-plan.json
    6. Open the org
      • sfdx force:org:open -u mydevorg
    7. In setup, under Themes and Branding, activate the Recipes Lite or Recipes Blue theme
    8. In the App Launcher, select the LWC app

Get to Know the Sample App

  • Recipes app is divided into tabs by topic:
    • Basic Framework Functionality (Hello tab)
    • Data Service
    • Apex
    • Composition
    • Child-to-Parent
    • Parent-to-Child
    • Message Service
    • Aura Interop
    • Wire
    • Navigation
    • Misc
    • 3rd Party Libs

Create new Records with LWC and the Lightning Data Service

  • Reference ldsCreateRecord.js included on GitHub:
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { createRecord } from 'lightning/uiRecordApi';
import { reduceErrors } from 'c/ldsUtils';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class LdsCreateRecord extends LightningElement {
    accountId;

    name = '';

    handleNameChange(event) {
        this.accountId = undefined;
        this.name = event.target.value;
    }

    createAccount() {
        const fields = {};
        fields[NAME_FIELD.fieldApiName] = this.name;
        const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
        createRecord(recordInput)
            .then((account) => {
                this.accountId = account.id;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account created',
                        variant: 'success'
                    })
                );
            })
            .catch((error) => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: reduceErrors(error).join(', '),
                        variant: 'error'
                    })
                );
            });
    }
}

Communicate Information from Child to Parent (or Grandparent)

  • With LWC, child to parent communication happens with events.
    • EventWithData (parent) contains a list of ContactListItem (child) components
  • The child component:
    1. Fires an OnClick handler
    2. Instantiates a custom event named ‘Select’
    3. Populates the custom event’s detail property with contact’s id
    4. Dispatches (fires) the event
  • In the parent component:
    1. The handleSelect(event) method is called. Method must be named handle<customEventName>
    2. The handleSelect method passes the incoming details from the event to display the contact’s details

  • Reference eventWithData.html, included on GitHub
<template>
    <lightning-card title="EventWithData" icon-name="standard:logging">
        <template if:true={contacts.data}>
            <lightning-layout class="slds-var-m-around_medium">
                <lightning-layout-item>
                    <!-- c-contact-list-item emits a non-bubbling event so each element must have a listener-->
                    <template for:each={contacts.data} for:item="contact">
                        <c-contact-list-item
                            class="slds-show slds-is-relative"
                            key={contact.Id}
                            contact={contact}
                            onselect={handleSelect}
                        ></c-contact-list-item>
                    </template>
                </lightning-layout-item>
                <lightning-layout-item class="slds-var-m-left_medium">
                    <template if:true={selectedContact}>
                        <img
                            src={selectedContact.Picture__c}
                            alt="Profile photo"
                        />
                        <p>{selectedContact.Name}</p>
                        <p>{selectedContact.Title}</p>
                        <p>
                            <lightning-formatted-phone
                                value={selectedContact.Phone}
                            ></lightning-formatted-phone>
                        </p>
                        <p>
                            <lightning-formatted-email
                                value={selectedContact.Email}
                            ></lightning-formatted-email>
                        </p>
                    </template>
                </lightning-layout-item>
            </lightning-layout>
        </template>
        <template if:true={contacts.error}>
            <c-error-panel errors={contacts.error}></c-error-panel>
        </template>
        <c-view-source source="lwc/eventWithData" slot="footer">
            Child-to-parent communication using a custom event that passes data
            to the parent component. Click an item in the list to see the recipe
            in action.
        </c-view-source>
    </lightning-card>
</template>

Compose Components with Components

  • LWC components are put together to build a page, but you can also put components together to make other components
    • Ex: use base components provided by Salesforce to add UI elements like cards and buttons to the components you’re building.
    • Base Components