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:

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
andlabel
object for thesearchOptions
variable. It will be used for thelightning-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 eventsearch
to pass theselectedBoatTypeId
. Name the keyboatTypeId
.
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.
One thought on “LWC Specialist Superbadge : Challenge 4 Guide”