JavaScript Developer I Certification Maintenance Summer 24 | Salesforce Trailhead

[@salesforceagent]

Task - 3
boatPicker.html
-------------------------










{boatName}
Captain: {boatOwner}
Price:
Type: {boatType}




>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
boatPicker.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;
displayInfo = {
primaryField: 'Name',
additionalFields: ['BoatType__r.Name'],
};
matchingInfo = {
primaryField: {fieldPath: 'Name'},
additionalFields: [{fieldPath:'BoatType__r.Name'}],
};
handleChange(event){
this.boatId = event.detail.recordId;
}
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}')`;
}
}
}

[@user-mn3ch7oi1v]

I am not able to select the inside boatpicker component. Did everthing as you said. Anything do I hvae missed?

[@ANUJSAINI-q5h]

Updated
HTML:










{boatName}
Captain: {boatOwner}
Price:
Type: {boatType}




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;
displayInfo = {
primaryField: 'Name',
additionalFields: ['BoatType__r.Name'],
};
matchingInfo = {
primaryField: {fieldPath: 'Name'},
additionalFields: [{fieldPath:'BoatType__r.Name'}],
};
handleChange(event){
this.boatId = event.detail.recordId;
}
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}')`;
}
}
}
XML:
60.0
true

lightning__AppPage
lightning__HomePage
lightning__RecordPage

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

[@ANUJSAINI-q5h]

Boat_c = Boat__c
BoatType_r = BoatType__r

[@ashwinimeshram4623]

its show this error "force-app\main\default\lwc\boatPicker\boatPicker.js Invalid reference Boat_c.BoatType_r.Name of type sobjectClass in file boatPicker.js
Invalid reference Boat_c.Contact_r.Name of type sobjectClass in file boatPicker.js"

[@AnisInAction]

Above failing lines needs to be corrected to have double underscore in the api names of the object, it's a copy paste error

[@pswati7742]

Please download the Boat__c, BoatReview__c, BoatType__c, Contact objects from Org Browser in VS code and try to deploy again

[@javeriyafarhat6001]

Js file
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;
displayInfo = {
primaryField: 'Name',
additionalFields: ['BoatType__r.Name'],
};
matchingInfo = {
primaryField: {fieldPath: 'Name'},
additionalFields: [{fieldPath:'BoatType__r.Name'}],
};
handleChange(event){
this.boatId = event.detail.recordId;
}
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}')`;
}
}
}