Posted in Superbadge, Trailhead

LWC Specialist Superbadge : Challenge 12 Guide

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 Available to show only when reviewsToShow is not available. As in the picture, that needs to be aligned absolutely center. So, slds-align_absolute-center.
  • Wrap the next section with the template element that shows only when reviewsToShow contains value.
  • Add a lightning-spinner to 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 div with slds-feed class.
  • Iterate the feed item (slds-feed__item) using boatReviews variable.
  • Include lightning-avatar in the appropriate placeholder.
  • Creator’s name is a hyperlink, that holds the data-record-id attribute with the value from boatReview.CreatedBy.Id.
  • Show the Name and CompanyName in its placeholders mentioned as comments.
  • Display the created date using lightning-formatted-date-time tag.
  • Similarly use, lightning-formatted-rich-text for comments.
  • Include the fiveStarRating component that we completed in Challenge 10.


  • Complete the recordId getter and setter method as we have did so far in the older challenges. This time, call the getReviews method once the value is set.
  • In the getReviews method, 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 getReviews method, just block the execution, when the boatId is empty. Followed by, start the loader. Call the imperative method. Use the finally keyword to stop the loader.
  • reviewsToShow method is pretty straight forward from the superbadge. Convert the instruction to code 😉 (Hint! Use ternary operation)
  • Again, refresh public method is just to call getReviews method.
  • Use NavigationMixin for the navigateToRecord method, that navigates to the Standard Record Page. Remember to extend NavigationMixin in the class, otherwise, you will land up with this error, that I got into 😒:
    • We can’t find the correct class extension in the component boatReviews JavaScript file. Make sure the component was created according to the requirements.

That’s it, we are done with the Challenge 12! 👌

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s