You need to sign in to do that
Don't have an account?
LWC Specialist Superbadge - Spinner Doesn't Stop
Hi everyone, looking for some assistance if possible please.
I have been doing the Lightning Web Components Superbadge and have managed to get through to Challenge 10. However, my page is not functioning quite as it should be.. The initial page loads and everything seems fine, but once I change the Boat Type selection it just keeps spinning.
I have found some resources online and checked the answers I could find from other Trailblazers, but this has now got me quite stumped and I'd appreciate any help I could get.
I think the problem is coming from the searchBoatResults component. I have pasted the code I have below.
<template> <lightning-tabset variant="scoped"> <lightning-tab label="Gallery"> <template if:true={boats.data}> <div class="slds-scrollable_y"> <lightning-layout horizontal-align="center" multiple-rows> <template for:each={boats.data} for:item="boat"> <lightning-layout-item key={boat.Id} padding="around-small" size="12" small-device-size="6" medium-device-size="4" large-device-size="3" > <c-boat-tile boat={boat} selected-boat-id={selectedBoatId} onboatselect={updateSelectedTile} ></c-boat-tile> </lightning-layout-item> </template> </lightning-layout> </div> </template> </lightning-tab> <lightning-tab label="Boat Editor"> <template if:true={boats.data}> <div class="slds-scrollable_y"> <lightning-datatable key-field="Id" data={boats.data} columns={columns} onsave={handleSave} draft-values={draftValues} hide-checkbox-column show-row-number-column ></lightning-datatable> </div> </template> </lightning-tab> <lightning-tab label="Boats Near Me"> <!-- boatsNearMe component goes here --> <c-boats-near-me boat-type-id={boatTypeId}></c-boats-near-me> </lightning-tab> </lightning-tabset> </template>
import { LightningElement, api, wire } from "lwc"; import { updateRecord } from "lightning/uiRecordApi"; import { ShowToastEvent } from "lightning/platformShowToastEvent"; import { refreshApex } from "@salesforce/apex"; import { publish, MessageContext } from "lightning/messageService"; import getBoats from "@salesforce/apex/BoatDataService.getBoats"; import BOATMC from "@salesforce/messageChannel/BoatMessageChannel__c"; export default class BoatSearchResults extends LightningElement { isLoading = false; boatTypeId = ""; boats; selectedBoatId; // Declare the columns to be used for the datatable. columns = [ { label: "Name", fieldName: "Name", editable: "true" }, { label: "Length", fieldName: "Length__c", type: "number", editable: "true" }, { label: "Price", fieldName: "Price__c", type: "currency", editable: "true" }, { label: "Description", fieldName: "Description__c", editable: "true" } ]; // wired message context @wire(MessageContext) messageContext; // Get the boats using apex. @wire(getBoats, { boatTypeId: "$boatTypeId" }) wiredBoats(result) { this.notifyLoading(false); this.boats = result; if (result.error) { console.log(result.error.message); } this.notifyLoading(false); } // public function that updates the existing boatTypeId property // uses notifyLoading @api searchBoats(boatTypeId) { this.notifyLoading(true); this.boatTypeId = boatTypeId; } // this public function must refresh the boats asynchronously // uses notifyLoading @api async refresh() { this.notifyLoading(true); await refreshApex(this.boats); this.notifyLoading(false); } // this function must update selectedBoatId and call sendMessageService updateSelectedTile(event) { this.selectedBoatId = event.detail.boatId; this.sendMessageService(this.selectedBoatId); } // Publishes the selected boat Id on the BoatMC. sendMessageService(boatId) { publish(this.messageContext, BOATMC, { recordId: boatId }); } handleSave(event) { this.notifyLoading(true); const recordInputs = event.detail.draftValues.slice().map((draft) => { const fields = Object.assign({}, draft); return { fields }; }); // For each record. const promises = recordInputs.map((recordInput) => { updateRecord(recordInput); // Updates the record. }); Promise.all(promises) .then(() => { this.dispatchEvent( new ShowToastEvent({ title: "Success", message: "Ship It!", variant: "success" }) ); return this.refresh(); }) .catch((error) => { this.dispatchEvent( new ShowToastEvent({ title: "Error", message: error.message, variant: "error" }) ); this.notifyLoading(false); }) .finally(() => { this.draftValues = []; }); } // Check the current value of isLoading before dispatching the doneloading or loading custom event notifyLoading(isLoading) { this.isLoading = isLoading; if (this.isLoading) { this.dispatchEvent(new CustomEvent("loading")); } else { this.dispatchEvent(new CustomEvent("doneloading")); } } }
https://trailhead.salesforce.com/help?support=home#
https://trailhead.salesforce.com/help
So that our trailhead support engineers will look into it and get back to you.
I hope you find the above information is helpful. If it does, please mark as Best Answer to help others too.
Regards,
Salesforce Support.
All Answers
https://trailhead.salesforce.com/help?support=home#
https://trailhead.salesforce.com/help
So that our trailhead support engineers will look into it and get back to you.
I hope you find the above information is helpful. If it does, please mark as Best Answer to help others too.
Regards,
Salesforce Support.
Challenge Not yet complete... here's what's wrong:
We can’t find the component boatSearchForm. Make sure the component was created according to the requirements.
even though I have created and saved (and it works) the component and it is named properly.