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.
Comments in the HTML file should be much helpful along with the guidance from the superbadge page. You will have to understand
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.
- Add the necessary basic imports,
- Convert the other import comments to code.
- Code the getter and setter for
recordId. This is exactly similar to what we did for
boatMap.jsin Challenge 6.
- Prevent default submit by adjusting the
handleSubmitmethod and add the the
Rating__cfields before triggering the submit action for
lightning-record-edit-form. You can refer the Salesforce documentation for clarity.
- On successful submission, (
createreviewevent 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! ✋