You need to sign in to do that
Don't have an account?
Githa R
Getting error while trying make communicate aura component and lwc in same component hierarchy
I am trying to handle a event fired from lightning web component which is inside aura component, but i am getting below error:
ed.lightning.force.com/lightning/n/modules/c/meetingRoom.js:75:14
here is the code:
MeetingRoomAura.cmp
<aura:component implements="flexipage:availableForAllPageTypes">
<aura:attribute name="meetingRoomInfo" type="List" />
<aura:attribute name="selectedMeetingRoom" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:card title="Meeting Rooms">
<lightning:layout>
<lightning:layoutItem size="4" padding="around-small">
<ul>
<aura:iteration items="{!v.meetingRoomInfo}" var="item">
<li style="padding: 10px">
<c:meetingRoom meetingRoomInfo="{#item}" showRoomInfo="true" ontileclick="{!c.handleTileClick}"></c:meetingRoom>
</li>
</aura:iteration>
</ul>
</lightning:layoutItem>
<lightning:layoutItem size="8" padding="around-small">
You have selected : {!v.selectedMeetingRoom}
</lightning:layoutItem>
</lightning:layout>
</lightning:card>
</aura:component>
MeetingRoomAuraController.js
({
doInit : function(component, event, helper) {
component.set("v.meetingRoomInfo", [
{'roomName':'A-01', 'roomCapacity':'12'},
{'roomName':'A-02', 'roomCapacity':'16'},
{'roomName':'A-03', 'roomCapacity':'12'},
{'roomName':'B-01', 'roomCapacity':'5'},
{'roomName':'B-02', 'roomCapacity':'8'},
{'roomName':'B-03', 'roomCapacity':'10'},
{'roomName':'C-01', 'roomCapacity':'20'}
]);
},
handleTileClick : function(component, event, helper) {
component.set("v.selectedMeetingRoom", event.detail.roomName;
}
})
meetingRoom.html
<template>
<template if:true={showRoomInfo}>
<div class="slds-p-around_medium lgc-bg" onclick={tileClickHandler}>
<lightning-tile label={meetingRoomInfo.roomName} href="/path/to/somewhere">
<p class="slds-truncate" title={meetingRoomInfo.roomCapacity}>Room Capacity:
{meetingRoomInfo.roomCapacity}</p>
</lightning-tile>
</div>
</template>
</template>
meetingRoom.js
import { LightningElement, api, wire } from 'lwc';
import {fireEvent} from 'c/pubsub';
import { CurrentPageReference } from 'lightning/navigation';
export default class MeetingRoom extends LightningElement {
@api meetingRoomInfo = {roomName:'A-01', roomCapacity:'12'}
@api showRoomInfo = false;
@wire(CurrentPageReference) pageReference;
tileClickHandler(){
const tileClicked = new CustomEvent('tileclick', {detail : this.meetingRoomInfo, bubbles :true});
this.dispatchEvent(tileClicked);
fireEvent(this.pageReference, 'pubsubtileclick', this.meetingRoomInfo);
}
}
Someone please help me with this.
ed.lightning.force.com/lightning/n/modules/c/meetingRoom.js:75:14
here is the code:
MeetingRoomAura.cmp
<aura:component implements="flexipage:availableForAllPageTypes">
<aura:attribute name="meetingRoomInfo" type="List" />
<aura:attribute name="selectedMeetingRoom" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<lightning:card title="Meeting Rooms">
<lightning:layout>
<lightning:layoutItem size="4" padding="around-small">
<ul>
<aura:iteration items="{!v.meetingRoomInfo}" var="item">
<li style="padding: 10px">
<c:meetingRoom meetingRoomInfo="{#item}" showRoomInfo="true" ontileclick="{!c.handleTileClick}"></c:meetingRoom>
</li>
</aura:iteration>
</ul>
</lightning:layoutItem>
<lightning:layoutItem size="8" padding="around-small">
You have selected : {!v.selectedMeetingRoom}
</lightning:layoutItem>
</lightning:layout>
</lightning:card>
</aura:component>
MeetingRoomAuraController.js
({
doInit : function(component, event, helper) {
component.set("v.meetingRoomInfo", [
{'roomName':'A-01', 'roomCapacity':'12'},
{'roomName':'A-02', 'roomCapacity':'16'},
{'roomName':'A-03', 'roomCapacity':'12'},
{'roomName':'B-01', 'roomCapacity':'5'},
{'roomName':'B-02', 'roomCapacity':'8'},
{'roomName':'B-03', 'roomCapacity':'10'},
{'roomName':'C-01', 'roomCapacity':'20'}
]);
},
handleTileClick : function(component, event, helper) {
component.set("v.selectedMeetingRoom", event.detail.roomName;
}
})
meetingRoom.html
<template>
<template if:true={showRoomInfo}>
<div class="slds-p-around_medium lgc-bg" onclick={tileClickHandler}>
<lightning-tile label={meetingRoomInfo.roomName} href="/path/to/somewhere">
<p class="slds-truncate" title={meetingRoomInfo.roomCapacity}>Room Capacity:
{meetingRoomInfo.roomCapacity}</p>
</lightning-tile>
</div>
</template>
</template>
meetingRoom.js
import { LightningElement, api, wire } from 'lwc';
import {fireEvent} from 'c/pubsub';
import { CurrentPageReference } from 'lightning/navigation';
export default class MeetingRoom extends LightningElement {
@api meetingRoomInfo = {roomName:'A-01', roomCapacity:'12'}
@api showRoomInfo = false;
@wire(CurrentPageReference) pageReference;
tileClickHandler(){
const tileClicked = new CustomEvent('tileclick', {detail : this.meetingRoomInfo, bubbles :true});
this.dispatchEvent(tileClicked);
fireEvent(this.pageReference, 'pubsubtileclick', this.meetingRoomInfo);
}
}
Someone please help me with this.
I think you are trying to get roomname info the way it is used for doing for the lightning web component.
When are handling an event fired from lightning web component in aura component ,you need to use getParam method to get the details from an event, you will have to make changes in MeetingRoomAuraController.js in handleTileClick event handler and replace with component.set("v.selectedMeetingRoom", event.getParam('roomName')).
({
doInit : function(component, event, helper) {
component.set("v.meetingRoomInfo", [
{'roomName':'A-01', 'roomCapacity':'12'},
{'roomName':'A-02', 'roomCapacity':'16'},
{'roomName':'A-03', 'roomCapacity':'12'},
{'roomName':'B-01', 'roomCapacity':'5'},
{'roomName':'B-02', 'roomCapacity':'8'},
{'roomName':'B-03', 'roomCapacity':'10'},
{'roomName':'C-01', 'roomCapacity':'20'}
]);
},
handleTileClick : function(component, event, helper) {
component.set("v.selectedMeetingRoom", event.getParam('roomName'));
}
})
try this.
All Answers
I think you are trying to get roomname info the way it is used for doing for the lightning web component.
When are handling an event fired from lightning web component in aura component ,you need to use getParam method to get the details from an event, you will have to make changes in MeetingRoomAuraController.js in handleTileClick event handler and replace with component.set("v.selectedMeetingRoom", event.getParam('roomName')).
({
doInit : function(component, event, helper) {
component.set("v.meetingRoomInfo", [
{'roomName':'A-01', 'roomCapacity':'12'},
{'roomName':'A-02', 'roomCapacity':'16'},
{'roomName':'A-03', 'roomCapacity':'12'},
{'roomName':'B-01', 'roomCapacity':'5'},
{'roomName':'B-02', 'roomCapacity':'8'},
{'roomName':'B-03', 'roomCapacity':'10'},
{'roomName':'C-01', 'roomCapacity':'20'}
]);
},
handleTileClick : function(component, event, helper) {
component.set("v.selectedMeetingRoom", event.getParam('roomName'));
}
})
try this.
For more details, drop us a note at https://www.etggs.com/contact-etg/
Thanks,
Samir
ETG Global Services
www.etggs.com