You need to sign in to do that
Don't have an account?
Kishan Kumar 77
I have created lightning web component which uses lightning data-table to display opportunity. In each row i have added a button that calls a method and performs http callout. But i am getting an error that i cannot rectify.
--------------js file----------------------------------------------
import { LightningElement, track } from 'lwc';
import getOppList from '@salesforce/apex/customSearchController.getOppList';
import {ShowToastEvent} from 'lightning/platformShowToastEvent'
export default class CustomSearch extends LightningElement {
@track opportunity;
sVal='';
receivedMessage;
@track record = [];
@track columns=[
{label: 'Name', fieldName: 'Name',type: 'url',
typeAttributes: {
label: {
fieldName: 'Name'
}
},
sortable: true },
{label: 'Account Name', fieldName: 'AccountId',type: 'url',
typeAttributes: {
label: {
fieldName: 'AccountId.Name'
}
},
sortable: true},
{label: 'Stage Name', fieldName: 'StageName',type: 'picklist'},
{label: 'Type', fieldName: 'Type',type: 'picklist'},
{label: 'Amount', fieldName: 'Amount',type: 'currency'},
{label:'Action',type:'button',typeAttributes: {
label: 'Send Data',
name: 'Send',
disabled: false,
value: 'send',
iconPosition: 'left'
}
}
];
// update sVal var when input field value change
updateSeachKey(event) {
this.sVal = event.target.value;
}
// call apex method on button click
handleSearch() {
// if search input value is not blank then call apex method, else display error msg
if (this.sVal !== '') {
getOppList({
searchKey: this.sVal
})
.then(result => {
// set @track opportunities variable with return contact list from server
this.opportunity = result;
})
.catch(error => {
// display server exception in toast msg
const event = new ShowToastEvent({
title: 'Error',
variant: 'error',
message: error.body.message,
});
this.dispatchEvent(event);
// reset contacts var with null
this.opportunity = null;
});
} else {
// fire toast event if input field is blank
const event = new ShowToastEvent({
variant: 'error',
message: 'Search text missing..',
});
this.dispatchEvent(event);
}
}
handleRowAction(event){
const row = event.detail.row;
switch(actionName) {
case 'Send':
this.record = row;
const calloutURI = 'https://herokuapp.com';
fetch(calloutURI, {
method: "POST",
headers: {
"Accept": "application/json"
},
body: JSON.stringify(record)
})
.then((response) => {
return response.json();
})
.then(responseJSON => {
console.log(responseJSON);
console.log(record);
})
.catch(error => {
const event = new ShowToastEvent({
title: 'Error',
variant: 'error',
message: error.body.message,
});
this.dispatchEvent(event);
});
}
}
}
---------------html file---------
<template>
<div class="slds-m-around_medium">
<div class="slds-m-bottom_small">
<lightning-input type="text"
value={sVal}
label="Search Opportunity"
onchange={updateSeachKey}
></lightning-input>
</div>
<lightning-button label="Search"
onclick={handleSearch}
variant="brand"></lightning-button>
<lightning-datatable data={opportunity} columns={columns} key-field="id" onrowaction={handleRowAction}>
</lightning-datatable>
</div>
</template>
Thanks in advance!!
import { LightningElement, track } from 'lwc';
import getOppList from '@salesforce/apex/customSearchController.getOppList';
import {ShowToastEvent} from 'lightning/platformShowToastEvent'
export default class CustomSearch extends LightningElement {
@track opportunity;
sVal='';
receivedMessage;
@track record = [];
@track columns=[
{label: 'Name', fieldName: 'Name',type: 'url',
typeAttributes: {
label: {
fieldName: 'Name'
}
},
sortable: true },
{label: 'Account Name', fieldName: 'AccountId',type: 'url',
typeAttributes: {
label: {
fieldName: 'AccountId.Name'
}
},
sortable: true},
{label: 'Stage Name', fieldName: 'StageName',type: 'picklist'},
{label: 'Type', fieldName: 'Type',type: 'picklist'},
{label: 'Amount', fieldName: 'Amount',type: 'currency'},
{label:'Action',type:'button',typeAttributes: {
label: 'Send Data',
name: 'Send',
disabled: false,
value: 'send',
iconPosition: 'left'
}
}
];
// update sVal var when input field value change
updateSeachKey(event) {
this.sVal = event.target.value;
}
// call apex method on button click
handleSearch() {
// if search input value is not blank then call apex method, else display error msg
if (this.sVal !== '') {
getOppList({
searchKey: this.sVal
})
.then(result => {
// set @track opportunities variable with return contact list from server
this.opportunity = result;
})
.catch(error => {
// display server exception in toast msg
const event = new ShowToastEvent({
title: 'Error',
variant: 'error',
message: error.body.message,
});
this.dispatchEvent(event);
// reset contacts var with null
this.opportunity = null;
});
} else {
// fire toast event if input field is blank
const event = new ShowToastEvent({
variant: 'error',
message: 'Search text missing..',
});
this.dispatchEvent(event);
}
}
handleRowAction(event){
const row = event.detail.row;
switch(actionName) {
case 'Send':
this.record = row;
const calloutURI = 'https://herokuapp.com';
fetch(calloutURI, {
method: "POST",
headers: {
"Accept": "application/json"
},
body: JSON.stringify(record)
})
.then((response) => {
return response.json();
})
.then(responseJSON => {
console.log(responseJSON);
console.log(record);
})
.catch(error => {
const event = new ShowToastEvent({
title: 'Error',
variant: 'error',
message: error.body.message,
});
this.dispatchEvent(event);
});
}
}
}
---------------html file---------
<template>
<div class="slds-m-around_medium">
<div class="slds-m-bottom_small">
<lightning-input type="text"
value={sVal}
label="Search Opportunity"
onchange={updateSeachKey}
></lightning-input>
</div>
<lightning-button label="Search"
onclick={handleSearch}
variant="brand"></lightning-button>
<lightning-datatable data={opportunity} columns={columns} key-field="id" onrowaction={handleRowAction}>
</lightning-datatable>
</div>
</template>
Thanks in advance!!
handleRowAction(event){
const row = event.detail.row;
let actionName = event.detail.action.name;
switch(actionName) {
Additionally, I would suggest move below callout code to Apex code because using callout in js controller is unsafe. It exposes the callout endpoint and how the request data is built.
const calloutURI = 'https://herokuapp.com';
fetch(calloutURI, {
method: "POST",
headers: {
"Accept": "application/json"
},
body: JSON.stringify(record)