Skip to main content
3월 5~6일에 샌프란시스코의 TDX 또는 Salesforce+에서 열리는 AI 에이전트 시대를 위한 개발자 컨퍼런스에 참여하세요. 지금 등록하기.

예상 시간

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.

Note

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.

  1. 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.
  2. Create a Lightning web component.
    1. Name: boatPicker
    2. 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}')`;
              }
          }
      
      }
    3. 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>
    4. 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;
        }

실습 과제

+500 포인트

준비

실무 조직에서 이 유닛을(를) 완료하게 됩니다. Launch(실행)를 클릭하여 시작하거나 조직 이름을 클릭하여 다른 항목을 선택하세요.

내 과제

Prepare your playground for the Hands-on Challenge
The package you installed includes metadata that you’ll need to complete the challenge, including the Boat and Boat Type custom objects. In this step, we’ll verify that you completed all of the prework from this unit. Then, we will populate your playground with sample data to set you up for success when you complete your implementation in the next unit.
  • Complete all of the steps from the prework.
Salesforce 도움말에서 Trailhead 피드백을 공유하세요.

Trailhead에 관한 여러분의 의견에 귀 기울이겠습니다. 이제 Salesforce 도움말 사이트에서 언제든지 새로운 피드백 양식을 작성할 수 있습니다.

자세히 알아보기 의견 공유하기