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 forboatMap.js
in Challenge 6. - Prevent default submit by adjusting the
handleSubmit
method and add the theBoat__c
and theRating__c
fields before triggering the submit action forlightning-record-edit-form
. You can refer the Salesforce documentation for clarity. - On successful submission, (
handleSuccess
method) dispatchcreatereview
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! ✋