Posted in Superbadge, Trailhead

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

You need to create a new LWC Component boatSearchResults. Copy the HTML and JS contents from the Superbadge page.

boatSearchResults.html

  • Tab 1:
    • Update the attributes of Lightning tabset, Lightning Layout with the comments – pretty straight forward.
    • Update the attributes of Layout item with the table from the Super badge page.
    • Call the boatTile LWC component. Make sure to pass the value to both the public variables and handle the boat select event dispatched from the child component.
    • Loop the component using boats variable.
    • Use the isLoading variable with spinner. (Challenge requires this to pass)
  • Tab 2:
    • Add lightning-datatable with these attributes – data, columns, onsave, key-field, and hide-checkbox-column for the datatable. When you miss any of this attribute, you end up with this error:
      • We can’t find the proper settings for the Boat Editor in the component boatSearchResults. Make sure the component was created according to the requirements, including the lightning-datatable, the key field, columns being displayed or hidden, data, and the onsave event.
  • Tab 3:
    • Call the boatsNearMe LWC component that we completed in the previous challenge and pass the value for the public variable boatTypeId.

boatSearchResults.js

  • Datatable:
    • Add columns to the columns variable. (4 columns Name, Length, Price, and Description)
    • For handleSave method, utilize this documentation.
      • Most of the items are available in the snippet provided in the superbadge page. Just develop them.
      • Instead of using refreshApex directly, use the refresh method already provided.
      • Rather than using then and catch, utilize the promise method provided.
      • refresh method should use aync method. Remember to make the method public.
      • notifyLoading method – check isLoading and assign loading or doneloading. Dispatch a custom event.
      • searchBoats method is straight forward. Just turn the comments to code.
  • Tiles:
    • updateSelectedTile method is again straight forward. Remember it is an event from boatTile component where we sent boatId in Challenge 5
    • sendMessageService – Just publish the message service.
    • Remember the imports 😉

That’s it, we are done with the Challenge 8! 😃

One thought on “LWC Specialist Superbadge : Challenge 8 Guide

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