Log a Call custom quick action using Lightning Web Components

Quick actions are not supported yet by LWC as per salesforce documents. As a workaround we need to create a container Lightning aura component and add the LWC components to it and the Lightning aura component can be added to quick actions.

To add lightning component to a quick action go to setup-> Object manager -> Object -> Buttons & Actions and add the lightning component. The component should have the force:lightningQuickActionWithoutHeader interface

LogACall.cmp

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" access="global">
    <c:LogaCall_LWC recordId="{!v.recordId}" onsave ="{!c.saveFromLWC}"/>
</aura:component>

LogACall.js

({
saveFromLWC : function(component, event, helper) {
         $A.get('e.force:refreshView').fire();
}
})

The lightning aura component will call the LWC component and also we are passing a custom even from LWC component to refresh the page after action is complete. I am refreshing it from lightning aura component instead of LWC since I couldn't find a way to refresh from LWC.

Also , we are passing the record id to LWC component which will be captured from the lightning aura component associated to the quick action from the record page.

Here are the detail of LWC

LogaCall_LWC.html

<template>
    <lightning-card title="Log a Call" icon-name="action:call" >
     
            <div class="slds-m-around_medium">
             
                <div class="dropdown">
                    <lightning-combobox
                        name="Subject"
                        label="Search Subject"
                        value={rec.Subject}
                        placeholder="Select Subject"
                        options={options}
                        onchange={subjectChange} >
                    </lightning-combobox>
                </div>
                <lightning-input type="text" label="Comments" value={rec.Description}  onchange={descChange}></lightning-input>
                <lightning-input type="checkbox" label="Public" value={rec.IsVisiblePortal} onchange={visibleChange}></lightning-input>
                           
             
                <div class="slds-m-top_medium">
                    <lightning-button type="submit" variant="brand"
                                label="Log a call"
                                class="slds-m-top_medium"
                                onclick={handleLAC}>
                    </lightning-button>
                </div>
            </div> 
         
     
    </lightning-card>

</template>

LogaCall_LWC.js

import { LightningElement,api, track } from 'lwc';
import SUB_FIELD from '@salesforce/schema/Task.Subject';
import COMMENT_FIELD from '@salesforce/schema/Task.Description';
import PUBLIC_FIELD from '@salesforce/schema/Task.IsVisibleInSelfService';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import logACallInit from '@salesforce/apex/LogaCallController.logACallInit';

/* eslint-disable no-console */
export default class LogaCall_LWC extends LightningElement {

    @api recordId;
    @track subject = SUB_FIELD;
    @track description = COMMENT_FIELD ;
    @track isVisiblePortal =PUBLIC_FIELD ;
    @track success;
    @track error;

    @api rec = {
        Subject : this.subject,     
        Description : this.description,     
        IsVisiblePortal: this.isVisiblePortal,
    }

    get options() {
        return [         
            {label:'Call Inbound',value:'Call Inbound'},         
            {label:'Call Outbound',value:'Call Outbound'},
       ];
    }
 
 
    subjectChange(event) {
        console.log('SUBJECT ::'+event.target.value);
        this.rec.Subject = event.target.value;     
    }

    descChange(event) {
        console.log('Comment ::'+event.target.value);
        this.rec.Description = event.target.value;
    }

    visibleChange(event) {
        console.log('Visible to Portal::'+event.target.value);
        this.rec.IsVisiblePortal = event.target.value;
    }

 
    handleLAC(){
     
        createLAC({           
            tsk: this.rec
            })
            .then(result => {
                    this.message = result;
                    this.error = undefined;
                    if(this.message !== undefined) {
                     
                        this.rec.Subject = '';
                        this.rec.Description = '';
                        this.rec.IsVisiblePortal = false;
                        this.dispatchEvent(
                            new ShowToastEvent({
                                title: 'Success',
                                message: 'Record successfully created',
                                variant: 'success',
                            }),
                        );
                     
                    }
                 
                    const buttonEvent = new CustomEvent('save');
                    // Fire the custom event
                    this.dispatchEvent(buttonEvent);
                 
                    console.log(JSON.stringify(result));
                    console.log("result", this.message);
            })
            .catch(error => {
                                     
                this.error = error;
                this.message = undefined;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                         message: error.body.message,
                        variant: 'error',
                    }),
                );
                console.log("error", JSON.stringify(this.error));
            });

         
         
    }
}

LogaCallController.apxc

public class LogaCallController {
@AuraEnabled
    public static String logACallInit(Task tsk) {
         
        try{
          tsk.whatId= object.Id;
          tsk.RecordTypeId=recordType.id;
          tsk.Status ='Completed';
          tsk.Type='Call';
          insert tsk;
          return 'Success';
        }catch(Exception ex){
          return 'Exception :'+ex.getMessage()+'Line # :'+ex.getLineNumber();
        }
     
    }

}