Tuesday 31 December 2019

Passing parameters to apex class from LWC with imperative method

Hi ,

I am going to explain how to pass two parameters into an apex class method using imperative method.

Apex Class:
public with sharing class CalculatorController {
    public CalculatorController() {

    }
    @AuraEnabled(cacheable=true)
    public static Integer calculate2Numbers(integer firstNumber,integer secondNumber){
     
        return (firstNumber+secondNumber);
    }
}


HTML File (Template):

<template>
   <lightning-card title="Calculator with apex class" icon-name="custom:custom63">
      <p class="slds-p-horizontal_small">
        <lightning-input label="First Number" name="fNumber" type="number"
value={fNumber} onchange={handledChange}></lightning-input>
        <lightning-input label="Second Number" name="sNumber" type="number"
value={sNumber} onchange={handledChange}></lightning-input>
        <lightning-input label="Result" type="number" value={resultsum}>
</lightning-input> </br>
        <lightning-button label="Submit" onclick={handleClick}>
</lightning-button>
       </p>
    </lightning-card>
</template>



Javascript File:

The below javascript file has example to invoke method from apex class:
Syntax:
import <nameofthemethod> from '@salesforce/apex/<apex class Name>.<methodName>'
import { LightningElement,wire,trackfrom 'lwc';
import calculate2Numbers from '@salesforce/apex/CalculatorController.calculate2Numbers';
export default class Calculatorwithapex extends LightningElement {
    fNumber;
    sNumber;
    @track resultsum;
    handledChange(event){
        if(event.target.name==='fNumber'){
            console.log('handle Change'+event.target.value);
            this.fNumber = event.target.value;
        }
        else if(event.target.name==='sNumber'){
            console.log('handle Change'+event.target.value)
            this.sNumber = event.target.value;    
        }
       
    }
    handleClick(){
        console.log('hi::button invoked'+this.fNumber+'--'+this.sNumber);
        calculate2Numbers({ firstNumber: this.fNumber,secondNumber:this.sNumber })
        .then(result => {
            this.resultsum = result;
            console.log('hi::'+result);
           // this.error = undefined;
        })
        .catch(error => {
            this.resultsum = undefined;
            //this.error = error;
        });
        
    }
   
   
   

}



Meta File (Configuration File):
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__Tab</target>
    </targets>    
</LightningComponentBundle>

Referece:
https://www.youtube.com/channel/UCipDch4PvPqm0uY4SK7mi1A

No comments:

Post a Comment

How to include a screen flow in a Lightning Web Component

 Hi, Assume  you have a flow called "Quick Contact Creation" and API Name for the same is "Quick_Contact_Creation". To i...