Lightning Web Components Specialist Superbadge Solution Similar Boats Component
- Get link
- X
- Other Apps
SIMILAR BOATS COMONENT
similarBoats.html
<template>
<lightning-card title={getTitle} icon-name="custom:custom54">
<lightning-layout multiple-rows="true">
<template if:true={noBoats}>
<p class="slds-align_absolute-center">There are no related boats by {similarBy}!</p>
</template>
<!-- Loop through the list of similar boats -->
<template for:each={relatedBoats} for:item="boat">
<!-- Responsive lightning-layout-item -->
<lightning-layout-item key={boat.Id} padding="around-small" size="12" small-device-size="6"
medium-device-size="4" large-device-size="4">
<!-- Each boat tile goes here -->
<c-boat-tile boat={boat} onboatselect={openBoatDetailPage}></c-boat-tile>
</lightning-layout-item>
</template>
</lightning-layout>
</lightning-card>
</template>
similarBoats.js
import { LightningElement, api, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation'
// import getSimilarBoats
import getSimilarBoats from '@salesforce/apex/BoatDataService.getSimilarBoats';
export default class SimilarBoats extends NavigationMixin(LightningElement) {
// Private
currentBoat;
relatedBoats;
boatId;
error;
// public
@api
get recordId() {
// returns the boatId
return this.boatId;
}
set recordId(value) {
// sets the boatId value
this.setAttribute('boatId', value);
this.boatId = value;
// sets the boatId attribute
}
// public
@api similarBy;
// Wire custom Apex call, using the import named getSimilarBoats
// Populates the relatedBoats list
@wire(getSimilarBoats, { boatId: '$boatId', similarBy: '$similarBy' })
similarBoats({ error, data }) {
if (data) {
this.relatedBoats = data;
this.error = undefined;
} else if(error) {
this.relatedBoats = undefined;
this.error = error;
}
}
get getTitle() {
return 'Similar boats by ' + this.similarBy;
}
get noBoats() {
return !(this.relatedBoats && this.relatedBoats.length > 0);
}
// Navigate to record page
openBoatDetailPage(event) {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: event.detail.boatId,
objectApiName: BOAT_OBJECT,
actionName: 'view'
},
});
}
}
- Get link
- X
- Other Apps
Comments
Post a Comment