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
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));
}
}
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!
HI @Sai Sharath Chandra Kalikota, @peng tang@Zackary Frazier I'm from trailhead help team.
There is a know issue with the badge. I'll update here once its get resolved.
your patience is valued.
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 .
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.
finally the issues seemed to be fix by trailhead
nothing has changed in my source but it passed
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.
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 .
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. (|-|)
Hi @Sonali M
Can you please create a case with us using below link to help you further on the issue. ?
Link :
https://help.salesforce.com/s/Thank you!
@Sai Kiran Reddy Karingula - I am still having this issue in spite of trying it in 2 new Trailhead Playgrounds. Any help on this would be great!
I'm still getting this error, very annoying. Already created 3rd environment...