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

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

After completing this component, it should appear something like this:

Boat Search Form : LWC Component – how it looks in App Page

boatSearchForm.html:

For the lightning-layout you can utilize the horizontal-align property to align the contents center. For the lightning-combobox you need to add options, value and onchange attributes. It is pretty straightforward.

boatSearchForm.js:

Import the necessary headers whichever needed as we go. For sure, you need to import LightningElement from the lwc package.

• Wire the getBoatTypes method. (You need an import statement here!)
• Return the value and label object for the searchOptions variable. It will be used for the lightning-combobox.
• Since the searchOptions is used in a nested method, you need to add @track when the variable is declared.
• For the handleSearchOptionChange method, you need to dispatch a custom event search to pass the selectedBoatTypeId. Name the key boatTypeId.

This component needs to be added in the boatSearch LWC component to show that in the App Page. We create this component only at Challenge 9. However, you can create now and reference this component to preview the component. I did that before 😉 Don’t worry too much now, but if you are interested to, here is what I did:

• Just created a boatSearch LWC component. Copied the code from the Superbadge page, referenced the component in its placeholder. Need to expose the component in the meta page.
• Created a Lightning App Page and added the component to it.