LWC Specialist Superbadge : Challenge 11 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 11: Add Reviews to the boats with the component boatAddReviewForm

Create a new LWC component boatAddReviewForm and copy the HTML and JS contents from the superbadge page.

boatAddReviewForm.html

Comments in the HTML file should be much helpful along with the guidance from the superbadge page. You will have to understand lightning-record-edit-form, lightning-input-field and lightning-button for the Lightning Data Service. Remember, the label for Name field should be Review Subject, so we have to use label extensively with the class specified. You can take look at that in the Lightning Design System.

Rest, it is all straight forward, add the input fields and a submit button. You need to import fiveStarRating LWC component that we created in the previous challenge.

boatAddReviewForm.js

• Add the necessary basic imports, ShowToastEvent
• Convert the other import comments to code.
• Code the getter and setter for recordId. This is exactly similar to what we did for boatMap.js in Challenge 6.
• Prevent default submit by adjusting the handleSubmit method and add the the Boat__c and the Rating__c fields before triggering the submit action for lightning-record-edit-form. You can refer the Salesforce documentation for clarity.
• On successful submission, (handleSuccess method) dispatch createreview event and show a success toast event. (Remember to use the constants for title and variant as a best practice, otherwise we get this error. I missed it 😒)
  • We can’t find the handleSuccess function implemented correctly. Make sure the success toast is being dispatched with the correct attributes, the custom event ‘createreview’ is dispatched correctly, and the handleReset() function is being called in the boatAddReviewForm component, with the proper case-sensitivity and quotation.
• Success method calls the reset method that resets the form. Just reused the code from the doc. 😉

That’s it, we have cleared 11th challenge! ✋