Even though I correctly setup the
lightning-record-picker
lwc with
matchingInfo = {
primaryField: { fieldPath: 'Name' },
additionalFields: [{ fieldPath: 'BoatType__r.Name' }],
};
I get
In the boatPicker controller, we can’t find the proper configuration of which additional fields to search.
This seems to be a bug in the challenge checker.
Hello @Amit Nihala and @Harald Proksch,
- Create a brand-new Trailhead playground.
- Install the unlocked package (04t6g000008ateoAAA)
- Create a Lightning web component called "boatPicker" as mentioned in the module.
Your component looks like this:
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.
I had the same error as well originally:
- I updated my API Version to 61
- Made sure displayInfo was defined and listed directly underneath boatDetail (no lines between them)
- Made sure matchingInfo was defined after the displayInfo with a space between them
Do all this allowed the challenge to finally pass the check.
I agree, this is most certainly a bug.
Got this from SF:
"Our team has identified a bug causing the issue and this has been taken up to the concerned team and is currently being reviewed. This should be resolved soon.
I will keep you posted as soon as I hear back. Thanks for understanding."
So seem that this will be fixed now.
I'm also getting same errorI have used the below code
<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>
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));
}
}
.tile {
width: 100%;
height: 220px;
padding: 1px !important;
background-position: center;
background-size: cover;
border-radius: 5px;
}
Got the below from SF:
"We appreciate your patience. A hot fix has been implemented to resolve the issue.
Can you please try verifying the challenge now and confirm back.
Please feel free to reach out if you have any further queries/issues or if the issue is resolved, please open the https://help.salesforce.com/s/support page and navigate to the My Cases view and close the case from your end. Always happy to assist you."
But the issue still persists . Tried in new instance too.
Same here - ran init() from GenerateDate, copied exact code from what was suggested by accepted answer, set suggested order of matching and display info params and methods, set version to 61.0. None is helping.
It's not working. I tried two different new playgrounds. Initially they both got the controller problem. Then after I tried the second playground. The first one for the cant find data problem even I didnt change anything.
That's 100% a bug. Raised a case with Salesforce to see what they say.
i just checked challenge .
a good news -> error message changed
from
In the boatPicker controller, we can’t find the proper configuration of which additional fields to display.
to
In the boatPicker controller, we can’t find the proper configuration of which additional fields to search.
bad news not fix