Get Ready for the Hands-on Challenge

Learning Objectives:

After completing this unit, you’ll be able to:

Prepare your playground with metadata and data so that you can implement the lightning-record-picker in Unit 3.

In our upcoming hands-on challenge, you’ll revisit the scenario from the LWC Specialist Superbadge. All of your stakeholders are thrilled with the application you delivered. When you heard about the lightning-record-picker, you couldn’t help but think about how it could be used to provide an additional way for customers to search the boat inventory. Your plan is to build a proof of concept in your own playground, reveal it during your next meeting, and convince your team to integrate it into the full application.

Create a new Trailhead Playground now to follow along and try out the steps in this module. Scroll to the bottom of this page, click the playground name, and then select Create Playground. It typically takes 3–4 minutes for Salesforce to create your Trailhead Playground.

Yes, we really mean a brand-new Trailhead playground! If you use an existing org or playground, you can run into problems completing the challenges.

Launch the org you'll use for the hands-on challenge, then do the following.

Install the same unlocked package (04t6g000008ateoAAA) that you used for the Superbadge. It contains the schema you need to build your proof of concept. If you have trouble installing this unlocked package, follow the steps in Trailhead Playground Management.

Create a Lightning web component.

Name: boatPicker

Replace the contents of boatPicker.js with the following code, which uses wire service to populate a boatDetail property and includes getters to make it easy to display information about the selected boat. You modify this file during the Hands-on Challenge.

import { LightningElement, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';


import BOAT_PICTURE_FIELD from "@salesforce/schema/Boat__c.Picture__c";
import BOAT_NAME_FIELD from "@salesforce/schema/Boat__c.Name";
import BOAT_OWNER_FIELD from "@salesforce/schema/Boat__c.Contact__r.Name";
import BOAT_PRICE_FIELD from "@salesforce/schema/Boat__c.Price__c";
import BOAT_TYPE_FIELD from "@salesforce/schema/Boat__c.BoatType__r.Name";


const BOAT_FIELDS = [BOAT_PICTURE_FIELD, BOAT_NAME_FIELD,BOAT_OWNER_FIELD, BOAT_PRICE_FIELD, BOAT_TYPE_FIELD];


export default class Boats extends LightningElement {
    

    

    boatId;
    get showBoat() {
        return this.boatId != null;
    }


    @wire(getRecord, { recordId: '$boatId', fields: BOAT_FIELDS  })
    boatDetail;


    // BEGIN GETTERS FOR BOAT FIELDS
    get boatPicture() {
        return getFieldValue(this.boatDetail.data, BOAT_PICTURE_FIELD);
    }
    get boatName() {
        return getFieldValue(this.boatDetail.data, BOAT_NAME_FIELD);
    }
    get boatOwner() {
        return getFieldValue(this.boatDetail.data, BOAT_OWNER_FIELD);
    }
    get boatPrice() {
        return getFieldValue(this.boatDetail.data, BOAT_PRICE_FIELD);
    }
    get boatType() {
        return getFieldValue(this.boatDetail.data, BOAT_TYPE_FIELD);
    }
    // END GETTERS FOR BOAT FIELDS


    get backgroundStyle() {
        if (!this.showBoat) {
            return '';
        } else {
            return `background-image:url('${this.boatPicture}')`;
        }
    }


}

Replace the contents of boatPicker.html with the following, which includes a lightning-record-picker. You modify this file during the Hands-on Challenge as the picker has not yet been fully configured.

<template>
    <lightning-card title="Boat Browser">
        <div  class="slds-var-p-horizontal_medium">
            <div class="slds-var-m-bottom_medium">
                <lightning-record-picker
                    label="Browse our inventory"
                    placeholder="Search by boat name or type" >
                </lightning-record-picker>
            </div>
            <div lwc:if={showBoat}>
                <div class="tile slds-var-m-vertical_medium" >
                    <div style={backgroundStyle} class="tile"></div>
                </div>
                <div class="slds-text-heading_medium slds-border_bottom slds-var-m-bottom_medium">{boatName}</div>
                <div>Captain: {boatOwner}</div>
                <p>Price: <lightning-formatted-number maximum-fraction-digits="0" value={boatPrice} format-style="currency" currency-code="USD"></lightning-formatted-number></p>
                <div>Type: {boatType}</div>
            </div>
        </div>
         

    </lightning-card>
</template>

Create a file boatPicker.css to style the component.

.tile { width: 100%; height: 220px; padding: 1px !important; background-position: center; background-size: cover; border-radius: 5px; }

¿Necesita ayuda?

Descubrir más

Get Ready for the Hands-on Challenge

Learning Objectives: