Apex Code Development You need to sign in to do that
Don't have an account?
Thiago Barbosa 1 Uncaught Action failed: c:Geolocation$controller$itemSelected [Cannot read property 'getAttribute' of null]
<aura:component implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId" controller="GeolocationLgtController" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="modalOpp" type="String" />
<aura:attribute name="lstCampaign" type="List" />
<aura:attribute name="visita" type="String"/>
<aura:attribute name="stateList" type="List"/>
<aura:attribute name="lstAccounts" type="List"/>
<aura:attribute name="lstStageName" type="List"/>
<aura:attribute name="resume" type="Boolean"/>
<aura:attribute name="modalOpportunities" type="Boolean"/>
<aura:attribute name="modalCampanhas" type="Boolean" />
<aura:attribute name="modalVisita" type="Boolean" />
<aura:attribute name="visit" type="String" />
<aura:attribute name="pageClientes" type="String"/>
<aura:attribute name="menuPaiItem" type="Boolean" default="false"/>
<aura:attribute name="lgtWrapper" type="GeolocationLgtWrapper"/>
<aura:attribute name="habilitaNovaVisita" type="Boolean"/>
<aura:attribute name="habilitaVisita" type="Boolean"/>
<aura:attribute name="menuItemAttrEstado" type="Boolean" default="false"/>
<aura:attribute name="menuItemAttrStage" type="Boolean" default="false"/>
<aura:if isTrue="{!v.modalOpportunities}">
<div class="demo-only" style="height: 640px;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
<lightning:icon iconName="utility:close" size="xx-small" class="slds-page-header__icon"/>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Oportunidades</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Opportunity Name">Nome da Oportunidade</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Account Name">Etapa</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Close Date">Data de Fechamento</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Stage">Valor</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
<aura:iteration items="{!v.lstOpportunity}" var="opp">
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">{!opp.Name}</a></div>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">{!opp.StageName}</div>
</td>
<td data-label="Close Date">
<div class="slds-truncate" title="4/14/2015"><lightning:formattedText linkify="true" value="" />{!opp.CloseDate}</div>
</td>
<td data-label="Prospecting">
<div class="slds-truncate" title="Prospecting">{!opp.BI_BR_Valor_Nao_recorrente__c}</div>
</td>
</tr>
</aura:iteration>
</table>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral">Fechar</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</aura:if>
<aura:if isTrue="{!v.filterCampaign}">
<ul class="slds-grid slds-page-header__detail-row">
<aura:iteration items="{!v.lstAccounts}" var="cliente">
<li role="presentation" class="slds-page-header__detail-block" onclick="">
<div class="slds-media__body">
<div class="slds-lookup__result-text"><a onclick="">{!cliente.accName}</a></div>
<span class="slds-lookup__result-meta slds-text-body--small" style="font-size:12px;">{!cliente.accStreet}</span>
</div>
</li>
</aura:iteration>
</ul>
</aura:if>
<aura:if isTrue="{!v.modalCampanhas}">
<div class="demo-only" style="height: 640px;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
<lightning:icon iconName="utility:close" size="xx-small" class="slds-page-header__icon"/>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Campanhas</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Opportunity Name">Nome da Campanha</div>
</th>
</tr>
</thead>
<tbody>
</tbody>
<aura:iteration items="{!v.lstCampaign}" var="camp" />
<tr>
<th scope="row" data-label="Opportunity Name">
<div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">{!camp.campName}</a></div>
</th>
</tr>
</table>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral">Fechar</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</aura:if>
<aura:if isTrue="{!v.modalVisita}">
<div class="demo-only" style="height: 640px;">
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
<lightning:icon iconName="utility:close" size="xx-small" class="slds-page-header__icon"/>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Nova Visita</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<lightning:formattedText linkify="true" value="" />
<lightning:outputField fieldName="Name" value="{!v.visit.BI_BR_Assunto_Visita__c}" />
<lightning:outputField fieldName="Name" value="{!v.visit.StartDateTime}" />
<lightning:outputField fieldName="Name" value="{!v.visit.EndDateTime}"/>
<lightning:outputField fieldName="Name" value="{!v.visit.BI_BR_Status__c}"/>
<lightning:outputField fieldName="Name" value="{!v.visit.BI_BR_Motivo__c}"/>
<lightning:outputField fieldName="Name" value="{!v.visit.BI_BR_Observacao__c}"/>
</div>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral">Salvar</button>
<button class="slds-button slds-button_neutral">Cancelar</button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</aura:if>
<div class="slds-m-left_xx-large" style="margin-left:300px;">
<div class="slds-page-header">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning:icon iconName="custom:custom15" size="medium" class="slds-page-header__icon"/>
</span>
</div>
<div class="slds-media__body">
<h1 class="slds-page-header__title slds-truncate slds-align-middle">Clientes</h1>
<p class="slds-text-body_small slds-line-height_reset"><button class="slds-button slds-button_neutral">Ver</button></p>
</div>
</div>
<div class="slds-grid slds-grid_align-end">
<button class="slds-button slds-button--neutral" style="font-size:12px;">Sair</button>
<aura:if isTrue="{!v.habilitaNovaVisita}">
<button class="slds-button slds-button--neutral" style="font-size:12px;">NovaVisita</button>
</aura:if>
<aura:if isTrue="{!v.habilitaVisita}">
<button class="slds-button slds-button--neutral" style="font-size:12px;">Visita</button>
</aura:if>
</div>
<ul class="slds-grid slds-page-header__detail-row">
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Endereço">Endereço</p>
<p style="font-size:11px;">{!v.lgtWrapper.resumeAcc.BillingStreet}</p>
</li>
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Telefone">Telefone</p>
<p style="font-size:11px;">{!v.lgtWrapper.resumeAcc.Phone}</p>
</li>
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Identificador fiscal">Identificador fiscal</p>
<p style="font-size:11px;">{!v.lgtWrapper.resumeAcc.BI_No_Identificador_fiscal__c}</p>
</li>
<li class="slds-page-header__detail-block">
<p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Segmento">Segmento</p>
<p style="font-size:11px;">{!v.lgtWrapper.resumeAcc.Segmento_do_Cliente__c}</p>
</li>
</ul>
</div>
</div>
<div aura:id="sairMenu" class="slds-grid slds-grid_vertical-align-start slds-is-open" style="margin-top:-130px;" aria-haspopup="true">
<lightning:layout horizontalAlign="space">
<div class="demo-only" style="height: 10rem;">
<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-unique-id-1">Busca:</label>
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" aria-expanded="true" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input aura:id="searchAcc" type="text" class="slds-input slds-combobox__input" id="combobox-unique-id-1" aria-controls="listbox-unique-id" onkeyup="{!c.buscaFiltro}" />
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
<lightning:icon iconName="utility:search" size="xx-small"/>
</span>
</div>
<div id="listbox-unique-id" role="listbox">
<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
<aura:iteration items="{!v.lgtWrapper.lstAccount}" var="wpr" indexVar="i">
<li data-selectedIndex="{!wpr.id}" onclick="{!c.itemSelected}" value="{!v.lgtWrapper.lstAccount}" role="presentation" class="slds-listbox__item">
<div id="listbox-option-unique-id-01" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
<span class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-account">
<lightning:icon iconName="standard:account" size="xx-small"/>
</span>
</span>
<span class="slds-media__body">
<span class="slds-listbox__option-text slds-listbox__option-text_entity">{!wpr.Name}</span>
<span class="slds-listbox__option-meta slds-listbox__option-meta_entity">{!wpr.BillingStreet}</span>
</span>
</div>
</li>
</aura:iteration>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</aura:component>
({
doInit : function(component, event, helper) {
helper.getStateListHlp(component);
helper.getStateListOpp(component);
helper.searchClientesHlp(component, event);
},
buscaFiltro : function(component, event, helper){
helper.searchClientesHlp(component, event);
},
itemSelected : function(component, event, helper){
helper.itemSelected(component, event, helper);
},
mostraMenuPai : function(component, event, helper) {
var menu = component.find("menulistPai");
$A.util.toggleClass(menu, "slds-is-open");
},
mostraMenuEstado : function(component, event, helper){
var menuItemAttrEstado = component.get("v.menuItemAttrEstado");
component.set("v.menuItemAttrEstado", !menuItemAttrEstado);
},
mostraMenuStage : function(component, event, helper){
var menuItemAttrStage = component.get("v.menuItemAttrStage");
component.set("v.menuItemAttrStage", !menuItemAttrStage);
}
})
({
getStateListHlp : function(component) {
var action = component.get("c.getStateList");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var returnValue = response.getReturnValue();
component.set("v.stateList", returnValue);
}
else if (state === "INCOMPLETE" || state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " + errors[0].message);
}
} else {
console.log("Erro desconhecido.");
}
}
});
$A.enqueueAction(action);
},
getStateListOpp : function(component) {
var action = component.get("c.getLstStageName");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var returnValue = response.getReturnValue();
component.set("v.lstStageName", returnValue);
}
else if (state === "INCOMPLETE" || state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " + errors[0].message);
}
} else {
console.log("Erro desconhecido.");
}
}
});
$A.enqueueAction(action);
},
searchClientesHlp : function(component, event) {
var action = component.get("c.searchClientes");
var searchCmp = component.find("searchAcc").getElement();
var searchValue = ((!searchCmp) ? null : searchCmp.value);
var conta = event.target;
var idAcc = ((!conta) ? null : conta.dataset.rowIndex);
console.log('Conta selecionada -> ' + conta);
console.dir(conta);
console.log('Id Conta selecionada -> ' + idAcc);
action.setParams({
idAcc : idAcc,
searchAcc : searchValue
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var returnValue = response.getReturnValue();
console.log("Retorno Search Cliente");
console.dir(returnValue);
component.set("v.lgtWrapper", returnValue);
}
else if (state === "INCOMPLETE" || state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " + errors[0].message);
}
} else {
console.log("Erro desconhecido.");
}
}
});
$A.enqueueAction(action);
},
itemSelected : function(component, event, helper){
var target = event.target.getAttribute('value');
console.log('Target' + target);
var selectedIndex = helper.getIndexFrmParent(target,helper,"data-selectedIndex");
if(selectedIndex) {
var resultadoServer = component.get("v.lgtWrapper");
var selItem = resultadoServer[selectedIndex];
if(selItem.val){
component.set("v.lgtWrapper", selItem);
component.set("v.lgtWrapper", resultadoServer);
}
component.set("v.lgtWrapper", null);
}
},
getIndexFrmParent : function(target,helper,attributeToFind){
var SelIndex = target.getAttribute(attributeToFind);
while(!SelIndex){
target = target.parentNode ;
SelIndex = helper.getIndexFrmParent(target,helper,attributeToFind);
}
return SelIndex;
},
})
var target = event.target.getAttribute('value');should be because you are passing the target the getIndexFrmParent helper methodConsider this example
<li role="presentation" class="slds-listbox__item" onclick="{!c.selectedRecordRowClick}" data-index="{!index}">
In the component controller
selectedRecordRowClick : function (component, event, helper) {
//event triggered on lookup row selection
//fetching the details of selected row and it's index
var targetSource = event.currentTarget; var selectedIndex = targetSource.dataset.index;
console.log(targetSource,selectedIndex);
}
The data param in the HTML part is Index which is marked in bold. The data param should be same in both HTML and event target reference.
Please mark this as best answer if your issue has been resolved with this.
And Visit my blog https://techevangel.com/author/anilsomasundaran/
instead of <ul> tag u can use the lightning select and give aura id
and get value in this way to
component.find("aura,.id").get("v.value");