LWC Scenario
O/P
Data Table Component
<template>
<lightning-card title = "Search Accounts" icon-name = "custom:custom63">
<div class = "slds-m-around_medium">
<template if:true = {accounts}>
<div style="height: 300px;">
<lightning-datatable key-field="id"
data={accounts}
columns={columns}
hide-checkbox-column="true"
show-row-number-column="true"
onrowaction={callRowAction}>
</lightning-datatable>
</div>
</template>
<template if:true = {error}>
{error}>
</template>
</div>
</lightning-card>
</template>
JSJS Code
/* eslint-disable no-console */
import { LightningElement, wire ,track} from 'lwc';
import{CurrentPageReference} from 'lightning/navigation';
import{fireEvent} from 'c/pubsub';
import fetchleads from '@salesforce/apex/LeadController.fetchleads';
const columns = [
{ label: 'Id', fieldName: 'Id' },
{ label: 'Model', fieldName: 'Model__c' },
{ label: 'Type', fieldName: 'Type__c' },
{ label: 'Prospect__c', fieldName: 'Prospect__c' },
{ label: 'Status', fieldName: 'Status__c' },
{ label: 'Assigned_To_Dealership', fieldName: 'Assigned_To_Dealership__c' },
{type: "button", typeAttributes: {
label: 'Edit',
name: 'Edit',
title: 'Edit',
disabled: false,
value: 'edit',
iconPosition: 'left'
}}
];
export default class dataTableComponent extends LightningElement {
@track accounts;
@track error;
@track columns = columns;
/* @wire(fetchleads) accounts;
accounts; */
@wire(fetchleads)
wiredContacts({ error, data }) {
if (data) {
this.accounts = data;
console.log('this accounts'+JSON.stringify(this.accounts));
this.error = undefined;
} else if (error) {
this.error = error;
this.accounts = undefined;
}
}
@wire(CurrentPageReference) pageRef;
callRowAction( event ) {
console.log('event clicked');
const recId = event.detail.row.Id;
const actionName = event.detail.action.name;
if ( actionName === 'Edit' ) {
fireEvent(this.pageRef,'pubsubevent',recId);
}
}
}
Lead Card
<template>
<template if:true={lead.data}>
<div>
<div>
<img
src={lead.data.fields.Model__c.value}
class="product"
alt="Product picture"
height="100"
width="100"
/>
</div>
{lead.data.fields.Type__c.value}
<div>
{lead.data.fields.Status__c.value}
</div>
<div>
{lead.data.fields.Outcome__c.value}
</div>
<div>
</div>
</div>
</template>
</template>
Lead Card
/* eslint-disable no-console */
/* eslint-disable no-alert */
import { LightningElement, wire } from 'lwc';
import{registerListener,unregisterAllListeners} from 'c/pubsub';
import{CurrentPageReference} from 'lightning/navigation';
import { NavigationMixin } from 'lightning/navigation';
import { getRecord } from 'lightning/uiRecordApi';
/* SCHEMA */
import LEAD_OBJECT from '@salesforce/schema/Lead';
import Model_Field from '@salesforce/schema/Lead.Model__c';
import Type_Field from '@salesforce/schema/Lead.Type__c';
import Status_Field from '@salesforce/schema/Lead.Status__c';
import Outcome_Field from '@salesforce/schema/Lead.Outcome__c';
/* field s to load */
const fields = [
Model_Field,Type_Field,Status_Field,Outcome_Field
]
export default class LeadCard extends LightningElement {
/** Id of Product__c to display. */
recordId;
@wire(CurrentPageReference) pageRef;
@wire(getRecord, { recordId: '$recordId', fields })
lead;
connectedCallback(){
registerListener('pubsubevent',this.handleCallback,this);
}
disconnectedCallback(){
unregisterAllListeners(this);
}
handleCallback(detail)
{
this.recordId = detail;
console.log('event clicked');
alert('parameter from publicsher'+detail);
}
handleNavigateToRecord() {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.recordId,
objectApiName: LEAD_OBJECT.objectApiName,
actionName: 'view'
}
});
}
get noData() {
return !this.lead.error && !this.lead.data;
}
}
PubSub Comp
/**
* A basic pub-sub mechanism for sibling component communication
*
* TODO - adopt standard flexipage sibling communication mechanism when it's available.
*/
const events = {};
const samePageRef = (pageRef1, pageRef2) => {
const obj1 = pageRef1.attributes;
const obj2 = pageRef2.attributes;
return Object.keys(obj1)
.concat(Object.keys(obj2))
.every(key => {
return obj1[key] === obj2[key];
});
};
/**
* Registers a callback for an event
* @param {string} eventName - Name of the event to listen for.
* @param {function} callback - Function to invoke when said event is fired.
* @param {object} thisArg - The value to be passed as the this parameter to the callback function is bound.
*/
const registerListener = (eventName, callback, thisArg) => {
// Checking that the listener has a pageRef property. We rely on that property for filtering purpose in fireEvent()
if (!thisArg.pageRef) {
throw new Error(
'pubsub listeners need a "@wire(CurrentPageReference) pageRef" property'
);
}
if (!events[eventName]) {
events[eventName] = [];
}
const duplicate = events[eventName].find(listener => {
return listener.callback === callback && listener.thisArg === thisArg;
});
if (!duplicate) {
events[eventName].push({ callback, thisArg });
}
};
/**
* Unregisters a callback for an event
* @param {string} eventName - Name of the event to unregister from.
* @param {function} callback - Function to unregister.
* @param {object} thisArg - The value to be passed as the this parameter to the callback function is bound.
*/
const unregisterListener = (eventName, callback, thisArg) => {
if (events[eventName]) {
events[eventName] = events[eventName].filter(
listener =>
listener.callback !== callback || listener.thisArg !== thisArg
);
}
};
/**
* Unregisters all event listeners bound to an object.
* @param {object} thisArg - All the callbacks bound to this object will be removed.
*/
const unregisterAllListeners = thisArg => {
Object.keys(events).forEach(eventName => {
events[eventName] = events[eventName].filter(
listener => listener.thisArg !== thisArg
);
});
};
/**
* Fires an event to listeners.
* @param {object} pageRef - Reference of the page that represents the event scope.
* @param {string} eventName - Name of the event to fire.
* @param {*} payload - Payload of the event to fire.
*/
const fireEvent = (pageRef, eventName, payload) => {
if (events[eventName]) {
const listeners = events[eventName];
listeners.forEach(listener => {
if (samePageRef(pageRef, listener.thisArg.pageRef)) {
try {
listener.callback.call(listener.thisArg, payload);
} catch (error) {
// fail silently
}
}
});
}
};
export {
registerListener,
unregisterListener,
unregisterAllListeners,
fireEvent
};
Comments
Post a Comment