This is not a complete solution for challenges, but will guide you when you are stuck! Read the superbadge page completely. Most of the challenges are interlinked and the text is not in the same order of the challenge.
For other challenges, visit the Guide to Challenges.
Challenge 8: Build the component boatSearchResults
You need to create a new LWC Component
boatSearchResults. Copy the HTML and JS contents from the Superbadge page.
- Tab 1:
- Update the attributes of Lightning tabset, Lightning Layout with the comments – pretty straight forward.
- Update the attributes of Layout item with the table from the Super badge page.
- Call the
boatTileLWC component. Make sure to pass the value to both the public variables and handle the boat select event dispatched from the child component.
- Loop the component using
- Use the
isLoadingvariable with spinner. (Challenge requires this to pass)
- Tab 2:
lightning-datatablewith these attributes – data, columns, onsave, key-field, and hide-checkbox-column for the datatable. When you miss any of this attribute, you end up with this error:
- We can’t find the proper settings for the Boat Editor in the component boatSearchResults. Make sure the component was created according to the requirements, including the lightning-datatable, the key field, columns being displayed or hidden, data, and the onsave event.
- Tab 3:
- Call the
boatsNearMeLWC component that we completed in the previous challenge and pass the value for the public variable
- Call the
- Add columns to the columns variable. (4 columns Name, Length, Price, and Description)
handleSavemethod, utilize this documentation.
- Most of the items are available in the snippet provided in the superbadge page. Just develop them.
- Instead of using
refreshApexdirectly, use the refresh method already provided.
- Rather than using then and catch, utilize the promise method provided.
refreshmethod should use aync method. Remember to make the method public.
notifyLoadingmethod – check
doneloading. Dispatch a custom event.
- searchBoats method is straight forward. Just turn the comments to code.
That’s it, we are done with the Challenge 8! 😃