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 14: Build a solution using Lightning Web Components to display Similar Boats
This challenge is quite different from others. You can analyze the VF page
SimilarBoats.page and its component
SimilarBoatsComponent.component. We need to imitate the similar picture for this challenge in LWC. Analyzed?
Now you can create a new LWC Component
similarBoats. Copy the HTML and JS contents from the Superbadge page.
Very straight forward, just change the comments to code 😉
- Loop through the
- Add the attributes for the
lightning-layout-item. Use the table from the superbadge page. (Do not forget the
keyattribute, since this is inside the iterator now!)
- Instantiate the
boatTilecomponent that we built in the Challenge 5. Pass the values for the two public attributes and handle the custom event
Again, another easy-peasy… 😋
- Public getter and setter for
recordId. We did this multiple times in
boatAddReviewFormLWC components. Just redo them!
- Wire the
similarByarguments and assign the result to
- Upon clicking the tile (
boatselectevent from the
openBoatDetailPagemethod is called. Capture the
boatIdfrom the event. Navigate to the Lightning Record Page. Use
(Please.. Please.. extend the
Since this component needs to be exposed in the Lightning Record Page. We need to configure this file as well! See the doc to see the available configuration tags.
- Set the
- We need
Propertyfor the component is
String. Add the
Enter the property you want to compare by
- Since this component should be available for the
Boat__crecord page alone, include the tag
That’s it, after rigorous challenges, this one is bit relieving and easy.
You know what? We are done with the Challenge 14 and is the last coding challenge! 🤝