Skip to main content Join us at TDX in San Francisco or on Salesforce+ on March 5-6 for the Developer Conference for the AI Agent Era. Register now.

Dear all 

i have checked the link as below but still not solve the problem

https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007erH1vSAE

 

error is below 

In the boatPicker controller, we can’t find the proper configuration of which additional fields to display.

 

it looks like the problem comes from controller so i only shared my code as below , anyone who has passed the challenge please kindly give me some advices  

 

by the way 

i created the new playground , but still unsolve it .

the lwc works good in home page

Get Hands-on with Lightning-Record-Picker  in Winter '24 New Lightning Record Picker Component - Challenge Part 3 - cannot validate

 

截屏2024-11-20 11.05.41.png

 

 thanks in advanced 

 

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 boatPicker extends LightningElement {   

    boatId;

    get showBoat() {

        return this.boatId != null;

    }

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

    boatDetail;

 

    displayInfo = {

        primaryField: 'Name',

        additionalFields: ['BoatType__r.Name'],

    };

    matchingInfo = {

        primaryField: { fieldPath: 'Name' },

        additionalFields: [{ fieldPath: 'BoatType__r.Name' }],

    };

    // 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}')`;

        }

    }

    handleChange(event) {

        this.boatId = event.detail.recordId;

        console.log("Selected Value: " + this.boatId);

        console.log("Selected: " + JSON.stringify(event.detail));

    }

}

 

#Trailhead Challenges

25 answers
  1. Nov 28, 2024, 5:40 PM

    HI @peng tang 

    I am a member of the Trailhead Help team. Apologies for the inconvenience caused.

     

    There was an issue with the JS1 Maintenance module, but it has now been resolved. Could you please try re-doing the module in a new playground?

     

    Thank you!

  2. Nov 20, 2024, 8:10 AM

    @Zackary Frazier

    thanks for your reply 

    i have submit the case to trailhead team and let's see if the treaihead team can help us fix this problem. if there is any update i will share with you .

  3. Nov 20, 2024, 6:20 AM

    @peng tang,

    Can you please copy-paste the exact same code as below and then try to validate it?

    HTML:

    <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"

    object-api-name="Boat__c"

    value={boatId}

    display-info={displayInfo}

    matching-info={matchingInfo}

    onchange={handleChange}>

    </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>

    JS:

    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;

    displayInfo = {

    primaryField: 'Name',

    additionalFields: ['BoatType__r.Name'],

    };

    matchingInfo = {

    primaryField: { fieldPath: 'Name' },

    additionalFields: [{ fieldPath: 'BoatType__r.Name' }],

    };

    // 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}')`;

    }

    }

    handleChange(event) {

    this.boatId = event.detail.recordId;

    console.log("Selected Value: " + this.boatId);

    console.log("Selected: " + JSON.stringify(event.detail));

    }

    }

    CSS:

    .tile {

    width: 100%;

    height: 220px;

    padding: 1px !important;

    background-position: center;

    background-size: cover;

    border-radius: 5px;

    }

    Js-meta.xml

    <?xml version="1.0"?>

    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>61.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

    <target>lightning__HomePage</target>

    </targets>

    </LightningComponentBundle>

    Make sure that you have added the component to the Service App Home page.    

  4. Nov 27, 2024, 1:18 AM

    finally the issues seemed to be fix by trailhead 

    nothing has changed in my source but  it passed 

    finally the issues seemed to be fix by trailhead nothing has changed in my source but it passed

  5. Nov 20, 2024, 8:26 AM

    @Tushar Jadav

    thanks for your reply

    i deployed the source you shared with me  into the "testdev" playground.

    and the lwc works great but it can not help me pass the challenge.

  6. Nov 20, 2024, 7:14 AM

    @Tushar Jadav

    thanks for your share, i copied your source and deploied into  my org.  i make sure  add the component into the service home page.

    but the same error happened (|-|)

    thanks for your share, i copied your source and deploied into my org. i make sure add the component into the service home page.but the same error happened (|-|)thanks for you reply .

    截屏2024-11-20 14.56.01.png@Divya Chauhan

    thanks for you reply .

    i think i deploied into the correct org , after i deploied  the source ,

    i used  sfdx cmd [open default org ] to check  the  url   if the same environment with i check the challenge  .

     

    today  i created the new playground for this challenge . after i created the component and tried to check the challenge it doesn't work. 

     

    i don't know if anyone else is having the same problem

    or it just happened on my environment. (|-|)

0/9000