LWC Specialist Superbadge : Challenge 13 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 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 label labelPleaseSelectABoat.
  • This needs to be align centered (SLDS class) along with another class provided in the css file: no-boat-height.
• 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 built boatSearchResults 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 label labelFullDetails. (Hint! Use slot=actions in the button to get it aligned. See the docs.)
    • Use the lightning-record-view-form to list BoatType__c, Length__c, Price__c, Description__c fields from the Boat__c object. Remember to use the compact density for listing. (Requirement says so 😉)
  • Tab 2:
    • This tab is named using labelReviews.
    • Instantiate boatReviews component, pass boatId as recordId.
  • Tab 3:
    • This tab is named using labelAddReview.
    • Instantiate boatAddReviewForm component. If you remember in challenge 11, we created an event createreview. You need to handle it here using handleReviewCreated.

boatDetailTabs.js

• Import the necessary Custom Labels and Schema mentioned in the code comments.
• Get Boat records from getRecord method utilizing the uiRecordApi. 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 from BOAT_NAME_FIELD. Utilize the getFieldValue method.
• detailsTabIconName method returns utility:anchor or null based on the wiredRecord.data. Use ternary operator.
• Wire the MessageContext just as we did for boatMap 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 using querySelector.
  • Then refreshes the boatReviews component. Call the refresh method that we created in the previous challenge. You can use querySelector to call the Child Methods.

That’s it, we are done with the Challenge 13! 👏