Posted in Superbadge, Trailhead

LWC Specialist Superbadge : Challenge 7 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 7: Build the component boatsNearMe and display boats near you

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

boatsNearMe.html

  • Add lightning-spinner, that shows only if data is Loading.
  • Add lightning-map, that shows only if data has finished Loading. (Use template if false😉)

boatsNearMe.js

  • Call the method getLocationFromBrowser from the renderedCallback. Make sure the map is called only once. RenderedCallback is triggered multiple times. Use isRendered variable as a flag.
  • For getLocationFromBrowser method, follow this method for getCurrentPosition method.
  • Create a wire method for getBoatsByLocation and follow the instructions for that method from the Superbadge page (Pretty straight forward).
    • Note: Separate the DispatchEvent and ShowToastEvent. (Challenge not recognizing the single line statement)
  • Change the properties of the variables – public for boatTypeId, Lat & Long.
  • For createMapMarkers utilize the documentation:
    • First return in the map with the boat local variable (Geolocation__Latitude__s, Geolocation__Longitude__s)
    • Second unshift – utilize the public variable (latitude and longitude)
    • Don’t forget to assign newMarkers to mapMarkers.

That’s it, we are done with the Challenge 7! 😎

2 thoughts on “LWC Specialist Superbadge : Challenge 7 Guide

  1. I would like to add here:

    Do really use Array unshift and not use array desctructuring in the method
    createMapMarkers

    It will result int the following error

    We can’t find the correct configurations for the renderedCallback() function in the component boatsNearMe JavaScript file. Make sure the component was created according to the requirements.

    For full discussion have a look here:
    https://trailblazers.salesforce.com/answers?id=9064S000000DTdPQAW

    Like

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