BOAT ADD REVIEW FORM
boatAddReviewForm.html
<template>
<!-- lightning data service code -->
<!-- <lightning-record-edit-form> using boatReviewObject -->
<lightning-record-edit-form object-api-name={boatReviewObject} onsuccess={handleSuccess} onsubmit={handleSubmit}>
<lightning-messages></lightning-messages>
<lightning-layout multiple-rows vertical-align="start">
<lightning-layout-item size="8" padding="horizontal-small">
<div class="slds-form-element">
<!-- review subject field code using nameField -->
<lightning-input-field field-name={nameField}>
</lightning-input-field>
</div>
</lightning-layout-item>
<lightning-layout-item size="4" padding="horizontal-small">
<div class="slds-form-element">
<label class="slds-form-element__label" for="record-name">Rating</label>
<div class="slds-form-element__control">
<!-- add five star rating component -->
<c-five-star-rating onratingchange={handleRatingChanged}></c-five-star-rating>
</div>
</div>
</lightning-layout-item>
<lightning-layout-item padding="horizontal-small">
<!-- review comment field code using commentField -->
<lightning-input-field field-name={commentField}>
</lightning-input-field>
</lightning-layout-item>
</lightning-layout>
<div class="slds-align_absolute-center" style="margin-top: 5px">
<!-- add submit button -->
<lightning-button type="submit" name="save" label="Submit" icon-name="utility:save">
</lightning-button>
</div>
</lightning-record-edit-form>
<!-- </lightning-record-edit-form> -->
</template>
boatAddReviewForm.js
import { LightningElement,api, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import BOAT_REVIEW_OBJECT from '@salesforce/schema/BoatReview__c';
import NAME_FIELD from '@salesforce/schema/BoatReview__c.Name';
import COMMENT_FIELD from '@salesforce/schema/BoatReview__c.Comment__c'
const SUCCESS_TITLE ='Review Created!';
const SUCCESS_VARIANT='success';
export default class BoatAddReviewForm extends LightningElement {
// Private
@track boatId;
rating;
boatreviewId;
boatReviewObject = BOAT_REVIEW_OBJECT;
nameField = NAME_FIELD;
commentField = COMMENT_FIELD;
labelSubject = 'Review Subject';
labelRating = 'Rating';
// Public Getter and Setter to allow for logic to run on recordId change
@api
get recordId() {
return this.boatId;
}
set recordId(value) {
//sets boatId attribute
//sets boatId assignment
this.boatId=value;
}
// Gets user rating input from stars component
handleRatingChanged(event) {
console.log(event.detail.rating);
this.rating=event.detail.rating;
}
// Custom submission handler to properly set Rating
// This function must prevent the anchor element from navigating to a URL.
// form to be submitted: lightning-record-edit-form
handleSubmit(event) {
event.preventDefault();
const fields= event.detail.fields;
fields.Boat__c = this.recordId();
fields.Rating__c = this.rating;
this.template.querySelector('lightning-record-edit-form').submit(fields);
}
// Shows a toast message once form is submitted successfully
// Dispatches event when a review is created
handleSuccess() {
// TODO: dispatch the custom event and show the success message
this.dispatchEvent(new ShowToastEvent({
title:SUCCESS_TITLE,
message: '',
variant:SUCCESS_VARIANT
}));
this.dispatchEvent(new CustomEvent("createreview"));
this.handleReset();
}
// Clears form data upon submission
// TODO: it must reset each lightning-input-field
handleReset() {
const inputFields = this.template.querySelectorAll(
'lightning-input-field'
);
if (inputFields) {
inputFields.forEach(field => {
field.reset();
});
}
}
}
boatAddReviewForm.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>49.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
Comments
Post a Comment