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 12: Display the boat reviews with the component boatReviews
You need to create a new LWC Component
boatReviews. Copy the HTML, JS and CSS contents from the Superbadge page.
- Make the
No Reviews Availableto show only when
reviewsToShowis not available. As in the picture, that needs to be aligned absolutely center. So,
- Wrap the next section with the
templateelement that shows only when
- Add a
lightning-spinnerto show the progress.
- Reviews are listed as feeds. You can refer the Lightning Design System Feed Component Blueprint to get some idea for the rest of the section.
- Make sure to add other 3 classes listed in the superbadge page for the
- Iterate the feed item (
lightning-avatarin the appropriate placeholder.
- Creator’s name is a hyperlink, that holds the
data-record-idattribute with the value from
- Show the
CompanyNamein its placeholders mentioned as comments.
- Display the created date using
- Similarly use,
- Include the
fiveStarRatingcomponent that we completed in Challenge 10.
- Complete the
recordIdgetter and setter method as we have did so far in the older challenges. This time, call the
getReviewsmethod once the value is set.
- In the
getReviewsmethod, you need to use the imperative apex call to get the reviews for the boat. Take a look at the doc under the section “Call an Apex Method Imperatively” on how to implement that.
- Initially, in the
getReviewsmethod, just block the execution, when the
boatIdis empty. Followed by, start the loader. Call the imperative method. Use the
finallykeyword to stop the loader.
reviewsToShowmethod is pretty straight forward from the superbadge. Convert the instruction to code 😉 (Hint! Use ternary operation)
refreshpublic method is just to call
navigateToRecordmethod, that navigates to the Standard Record Page. Remember to extend
NavigationMixinin the class, otherwise, you will land up with this error, that I got into 😒:
That’s it, we are done with the Challenge 12! 👌