Posted in Superbadge, Trailhead

LWC Specialist Superbadge : Challenge 9 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 9: Build the component boatSearch

Create a new LWC component boatSearch and copy the HTML and JS contents from the superbadge page. (In the case you haven’t created in Challenge 4)

boatSearch.html

  • Add lightning-card, lightning-button within action slot (Hint! add attribute slot=actions).
  • Instantiate the boatSearchForm component that we created in the Challenge 4. Don’t miss the search event for the attribute.
  • lightning-spinner enclosed within the isLoading template. Never forget this or you will end up with an error like this:
    • We can’t find the right settings for the template using if:true = { isloading } in the component boatSearch. Make sure the component was created according to the requirements.
    • Ensure that you are providing the values for variant and alternative-text to avoid this error: We can’t find the correct settings in the component boatSearch HTML. Review the template tag related to the lightning-spinner, and make sure the component was created according to the requirements, including the proper tag and variant.
  • Instantiate the boatSearchResults component that we created in the previous challenge. Required attributes are already in the comment!

boatSearch.js

  • handleLoading and handleDoneLoading methods are pretty straight forward. Just play with the boolean values for isLoading variable.
  • searchBoats method calls the child method of boatSearchResults. Argument should be boatTypeId, that is received from the boatSearchForm component.
  • Add Navigation Mixin to open standard new object page Boat__c when we click the ‘New Boat’ button that triggers createNewBoat method.
  • Don’t forget to import the necessary packages and Navigation Mixin. Hopefully you won’t forget extending NavigationMixin class just like me 😁

That’s it, we have cleared 9th challenge! We are mid-way thru 💪

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