Posted in Superbadge, Trailhead

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:

Component boatSearchForm, with the title equal to Find a Boat, a dropdown box in the middle for the boat types, and a button on the upper right corner of the component, with the label equal to New Boat. The button is white, and the text is blue.
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.

One thought on “LWC Specialist Superbadge : Challenge 4 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