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 13: Display boat details and reviews with boatDetailTabs
You need to create a new LWC Component boatDetailTabs
. Copy the HTML, JS and CSS contents from the Superbadge page.
boatDetailTabs.html
This component has two sections defined already in the snippet, one when there is no record and other when record exists.
- No Record:
- Use the
lightning-card
with a single span tag that displays the labellabelPleaseSelectABoat
. - This needs to be align centered (SLDS class) along with another class provided in the css file:
no-boat-height
.
- Use the
- Record Exists:
- We need to use
lightning-tabset
for this section to display tabs. If you remember, we had this similar tabset requirement when we builtboatSearchResults
component in challenge 8. But it came by default in the snippet from the superbadge page. - Tab 1:
- This tab is named using
labelDetails
. - Add a redirection button that resides in the top right corner of the
lightning-card
with the labellabelFullDetails
. (Hint! Useslot=actions
in the button to get it aligned. See the docs.) - Use the
lightning-record-view-form
to listBoatType__c
,Length__c
,Price__c
,Description__c
fields from theBoat__c
object. Remember to use thecompact
density for listing. (Requirement says so 😉)
- This tab is named using
- Tab 2:
- This tab is named using
labelReviews
. - Instantiate
boatReviews
component, passboatId
asrecordId
.
- This tab is named using
- Tab 3:
- This tab is named using
labelAddReview
. - Instantiate
boatAddReviewForm
component. If you remember in challenge 11, we created an eventcreatereview
. You need to handle it here usinghandleReviewCreated
.
- This tab is named using
- We need to use
boatDetailTabs.js
- Import the necessary Custom Labels and Schema mentioned in the code comments.
- Get Boat records from
getRecord
method utilizing theuiRecordApi
. I missed this step and landed into the following error:- We can’t find the correct settings for the wired method getRecord() in the component boatDetailTabs JavaScript file. Make sure the method is being called according to the requirements, including the @wire, recordId attribution from ‘$boatId’, and BOAT_FIELDS, using the correct case-sensitivity.
boatName
method returns the value fromBOAT_NAME_FIELD
. Utilize thegetFieldValue
method.detailsTabIconName
method returnsutility:anchor
ornull
based on thewiredRecord.data
. Use ternary operator.- Wire the
MessageContext
just as we did forboatMap
component and subscribe to the message channel. Mostly similar to what we did in Challenge 6. - Navigate to Boat record view page using
NavigationMixin
. handleReviewCreated
method- Sets ‘Reviews’ as the active tab. You can set the value for the
activeTabValue
usingquerySelector
. - Then refreshes the
boatReviews
component. Call therefresh
method that we created in the previous challenge. You can usequerySelector
to call the Child Methods.
- Sets ‘Reviews’ as the active tab. You can set the value for the
That’s it, we are done with the Challenge 13! 👏