Survey Form by using LWC

                 


SurveyForm.Html:-

            <template>
                 <lightning-card>
                      <div style="margin-left:3%;">
                         <strong><p>How satisfied are you with our Services?</p></strong>
                            <lightning-radio-group 
                                name="radioButtonGroup" 
                                onchange={handleChange} 
                                options={options}
                                value={value}
                                required
                                type="radio"></lightning-radio-group>
    
                               <br/>
                             <div if:true={value}>
                               Selected Vlaue: <b>{value}</b>
                         </div>
                </div>
    <div style="margin-left:3%;">
        <strong><p>How likely are you to recommend our App to friends?</p></strong>
    
        <lightning-radio-group 
                                name="1radioButtonGroup" 
                                onchange={handleChange2} 
                                options={options1}
                                value={value2}
                                required
                                type="radio"></lightning-radio-group>
    
        <br/>
        <div if:true={value2}>
                      Selected Vlaue: <b>{value2}</b>
                     </div>
        <strong> <p>Leave us a comment (optional):</p></strong>
                 <div class="slds-size_1-of-2">
                         <lightning-textarea
                                          name="feedback"
                                         value={feedback}
                                         onchange={handleChange3}
                            ></lightning-textarea>
    </div>
      <lightning-button class="btn1" variant="brand" label="Submit" onclick={handleSubmit}></lightning-button>         
    &nbsp; 
      <lightning-button class="btn1" variant="brand"  label="Skip Survey" onclick={skip}></lightning-button>
</div>
</lightning-card>
</template>

SurveyForm.js:-

import { LightningElement, track, wire} from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import SURVEY_OBJECT from '@salesforce/schema/Survey__c';
import SATISFACTION_FIELD from '@salesforce/schema/Survey__c.Satisfaction__c';
import REC_FIELD from '@salesforce/schema/Survey__c.Product_Recommendation__c';
//import feedback_FIELD from '@salesforce/schema/Survey__c.Feedback__c';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

export default class Surveyformcomponent extends NavigationMixin(LightningElement) {
    @track value;
    @track value2;
    feedback;
    options =[];
    options1=[];

    @wire(getObjectInfo, { objectApiName: SURVEY_OBJECT })
    objectInfo;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: SATISFACTION_FIELD})
    TypePicklistValues({data,error})
    {
         if(data)
         {
             let ratingvalue=[];
            for(let i=0; i<data.values.length; i++) {
                ratingvalue.push({
                    label: data.values[i].label,
                    value: data.values[i].value
                })
                  


            }
            this.options=ratingvalue;
                  console.log('options', this.options);

         }else if(error) {
            window.console.log('error ===> '+JSON.stringify(error));
        }


    }

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: REC_FIELD})
    IndustryPicklistValues({data,error}){
        if(data)
         {
             let ratingvalue=[];
            for(let i=0; i<data.values.length; i++) {
                ratingvalue.push({
                    label: data.values[i].label,
                    value: data.values[i].value
                })
                  


            }
            this.options1=ratingvalue;
                  console.log('options', this.options1);

         }else if(error) {
            window.console.log('error ===> '+JSON.stringify(error));
        }


    }

    handleChange(event) {
        this.value = event.detail.value;
    }
    handleChange2(event) {
        this.value2 = event.detail.value;
    }
    handleChange3(event){
        this.feedback=event.target.value;
    }

    handleSubmit(){

        var fields = {

            Satisfaction__c:this.value,
            Product_Recommendation__c:this.value2,
            Feedback__c:this.feedback

        }
        var objRecordInput = {'apiName' : 'Survey__c', fields};
        createRecord(objRecordInput).then(response => {
          const event = new ShowToastEvent({
            title: 'Toast message',
            message: 'Thank You for your valuable feedback',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(event);
        this[NavigationMixin.Navigate]({
          type: 'standard__navItemPage',
          attributes: {
              apiName: 'KProductList'
          }
        });
        })
        .catch(error => {
          const event = new ShowToastEvent({
            title: 'Required Details',
            message: 'Please Enter the details',
            variant: 'Error',
            mode: 'dismissable'
        });
        this.dispatchEvent(event);
      });


    }

    skip(){

       
        this[NavigationMixin.Navigate]({
          type: 'standard__navItemPage',
          attributes: {
              apiName: 'KProductList'
          }
        });


    }
    
}

SurveyForm.js-meta.xml:-

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
 

Comments