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:
lightning-layout you can utilize the
horizontal-align property to align the contents center. For the
lightning-combobox you need to add
onchange attributes. It is pretty straightforward.
Import the necessary headers whichever needed as we go. For sure, you need to import
LightningElement from the
- Wire the
getBoatTypesmethod. (You need an import statement here!)
- Return the
labelobject for the
searchOptionsvariable. It will be used for the
- Since the
searchOptionsis used in a nested method, you need to add
@trackwhen the variable is declared.
- For the
handleSearchOptionChangemethod, you need to dispatch a custom event
searchto pass the
selectedBoatTypeId. Name the key
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
boatSearchLWC 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.