Posted in Superbadge, Trailhead

LWC Specialist Superbadge : Challenge 14 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 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.

similarBoats.html

Very straight forward, just change the comments to code 😉

  • Loop through the relatedBoats
  • Add the attributes for the lightning-layout-item. Use the table from the superbadge page. (Do not forget the key attribute, since this is inside the iterator now!)
  • Instantiate the boatTile component that we built in the Challenge 5. Pass the values for the two public attributes and handle the custom event boatselect.

similarBoats.js

Again, another easy-peasy… 😋

  • Public getter and setter for recordId. We did this multiple times in boatMap, boatReview, and boatAddReviewForm LWC components. Just redo them!
  • Wire the getSimilarBoats, pass boatId and similarBy arguments and assign the result to relatedBoats.
  • Upon clicking the tile (div), on boatselect event from the boatTile component, openBoatDetailPage method is called. Capture the boatId from the event. Navigate to the Lightning Record Page. Use NavigationMixin.
    (Please.. Please.. extend the NavigationMixin class, otherwise you will receive this error: We can’t find the correct class extension in the component similarBoats JavaScript file. Make sure the component was created according to the requirements.)

similarBoats.js-meta.xml

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 target as lightning__RecordPage.
  • We need targetConfig for the lightning__RecordPage.
  • Public Property for the component is similarBy of type String. Add the
    • datasource as Type,Price,Length.
    • label as Enter the property you want to compare by
  • Since this component should be available for the Boat__c record page alone, include the tag Object.

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! 🤝

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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