Apex Code Development You need to sign in to do that
Don't have an account?
Thiago Barbosa 1 How I do to view the map in the page ?I created the function and attributes, but don't get to view the map in the page...
<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="lstAccounts" type="List"/>
<aura:attribute name="visit" type="String" />
<aura:attribute name="stateList" type="List"/>
<aura:attribute name="stageList" type="List"/>
<aura:attribute name="modalOpportunities" type="Boolean"/>
<aura:attribute name="modalCampanhas" type="Boolean" />
<aura:attribute name="modalVisita" type="Boolean" />
<aura:attribute name="lgtWrapper" type="GeolocationLgtWrapper"/>
<aura:attribute name="menuItemAttrState" type="Boolean" default="false"/>
<aura:attribute name="menuItemAttrStage" type="Boolean" default="false"/>
<aura:attribute name="map" type="Object"/>
<ltng:require styles="/resource/leaflet/leaflet.css" />
<ltng:require scripts="/resource/leaflet/leaflet.js"
afterScriptsLoaded="{!c.jsLoaded}" />
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_1-of-5" style="z-index:90">
<div aura:id="sairMenu" class="slds-is-open" aria-haspopup="true">
<lightning:layout horizontalAlign="space">
<div class="demo-only" style="height: 1rem;">
<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-unique-id-3">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="accountName" type="text" class="slds-input slds-combobox__input" id="combobox-unique-id-1" aria-controls="listbox-unique-id" onkeyup="{!c.filterAccountName}" />
<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:if isTrue="{! v.lgtWrapper.lstAccount.length > 0}">
<aura:iteration items="{!v.lgtWrapper.lstAccount}" var="wpr">
<li role="presentation" class="slds-listbox__item" onclick="{!c.filterAccountId}" data-index="{!wpr.Id}">
<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="small"/>
<span class="slds-assistive-text">{!wpr.Name}</span>
</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>
<aura:set attribute="else">
<li>
<div>
Nenhum resultado encontrado
</div>
</li>
</aura:set>
</aura:if>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div aura:id="filterListId" class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-hide" style="margin-top:21px;">
<button class="slds-button slds-button--icon-border-filled" aria-haspopup="true" onclick="{!c.toggleFilterList}">
<lightning:icon iconName="utility:filterList" size="xx-small"/>
</button>
<div class="slds-dropdown slds-dropdown--left slds-dropdown--medium">
<ul class="dropdown__list" role="menu">
<li class="slds-dropdown__item">
<a href="javascript:void(0)" role="menuitem" onclick="{!c.filterAll}">
<p class="slds-truncate">Todos os Clientes</p>
</a>
</li>
<li class="slds-dropdown__item">
<a href="javascript:void(0)" role="menuitem" onclick="{!c.searchCampaigns}">
<p class="slds-truncate">Filtro por Campanha</p>
</a>
</li>
<li class="slds-dropdown__item slds-has-submenu" role="presentation">
<a role="menuitem" href="javascript:void(0);" aria-haspopup="true" aria-expanded="{!v.menuItemAttrState}" tabindex="-1" onclick="{!c.showMenuState}">
<span class="slds-truncate" title="Menu Item Three">Filtro por Estado</span>
<lightning:icon iconName="utility:right" size="xx-small"/>
</a>
<div class="slds-dropdown slds-dropdown_submenu slds-dropdown_submenu-right slds-dropdown_length-with-icon-5">
<ul class="slds-dropdown__list" role="menu">
<aura:iteration items="{!v.stateList}" var="state">
<li class="slds-dropdown__item" role="presentation" aria-haspopup="true" onclick="{!c.filterState}" data-index="{!state}">
<a href="javascript:void(0);" role="menuitem" tabindex="0">
<span class="slds-truncate">{!state}</span>
</a>
</li>
</aura:iteration>
</ul>
</div>
</li>
<li class="slds-dropdown__item" onclick="{!c.filterVisited}">
<a href="javascript:void(0)" role="menuitem">
<p class="slds-truncate">Visitado</p>
</a>
</li>
<li class="slds-dropdown__item" onclick="{!c.filterNotVisited}">
<a href="javascript:void(0)" role="menuitem">
<p class="slds-truncate">Não Visitado</p>
</a>
</li>
<li class="slds-dropdown__item slds-has-submenu" role="presentation">
<a role="menuitem" href="javascript:void(0);" aria-haspopup="true" aria-expanded="{!v.menuItemAttrStage}" tabindex="-1" onclick="{!c.showMenuStage}">
<span class="slds-truncate" title="Menu Item Three">Fases da Oportunidade</span>
<lightning:icon iconName="utility:right" size="xx-small"/>
</a>
<div class="slds-dropdown slds-dropdown_submenu slds-dropdown_submenu-right slds-dropdown_length-with-icon-5">
<ul class="slds-dropdown__list" role="menu">
<aura:iteration items="{!v.stageList}" var="stage">
<li class="slds-dropdown__item" role="presentation" onclick="{!c.filterStage}" data-index="{!stage}">
<a href="javascript:void(0);" role="menuitem" tabindex="0">
<span class="slds-truncate">{!stage}</span>
</a>
</li>
</aura:iteration>
</ul>
</div>
</li>
</ul>
</div>
</div>
</lightning:layout>
</div>
</div>
<div class="slds-col slds-size_4-of-5">
<div class="slds-col slds-size_1-of-1">
<div class="slds-page-header">
<div class="slds-grid">
<div class="slds-col_bump-right">
<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>
</div>
</div>
<div>
<div style="margin-top: 5px; margin-left: 45px;">
<aura:if isTrue="{!v.lgtWrapper.resumeAcc.Id != null}">
<button class="slds-button slds-button_neutral" onclick="{!c.openAccount}">Ver</button>
</aura:if>
{!v.lgtWrapper.resumeAcc.Name}
</div>
</div>
</div>
<div>
<aura:if isTrue="{!v.lgtWrapper.resumeAcc.Id != null}">
<button class="slds-button slds-button--neutral" style="font-size:12px;" onclick="{!c.novaVisita}">Nova Visita</button>
</aura:if>
<aura:if isTrue="{!v.lgtWrapper.resumeAcc.Id != null}">
<button class="slds-button slds-button--neutral" style="font-size:12px;" onclick="{!c.visita}">Visita</button>
</aura:if>
<button class="slds-button slds-button--neutral" style="font-size:12px;" onclick="{!c.onExit}">Sair</button>
</div>
</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.BI_BR_Organizacao__c}</p>
</li>
</ul>
</div>
</div>
<b><div class="slds-col slds-size_1-of-1" style="margin-top: 15px">
<div class="map" id="map"></div>
</div></b>
</aura:component>
({
doInit : function(component, event, helper) {
helper.getStateListHlp(component, event, helper);
helper.getStageListHlp(component, event, helper);
helper.searchAccounts(component, event, helper, {});
window.addEventListener('click', function(e){
if(component.find('filterListId'))
{
if (component.find('filterListId').getElement().contains(e.target)){
//console.log("Clicked in Box");
} else{
//console.log("Clicked outside Box");
}
}
})
},
filterAccountName : function(component, event, helper){
var searchCmp = component.find("accountName").getElement();
var accountName = ((!searchCmp) ? null : searchCmp.value);
helper.searchAccounts(component, event, helper, {accountName : accountName});
},
filterAccountId : function(component, event, helper){
var targetSource = event.currentTarget;
var accId = targetSource.dataset.index;
helper.searchAccounts(component, event, helper, {accId : accId});
},
toggleFilterList : function(component, event, helper) {
helper.toggleFilterList(component);
},
filterAll : function(component, event, helper){
helper.toggleFilterList(component);
helper.searchAccounts(component, event, helper, {});
helper.resetSearch(component);
},
searchCampaigns : function(component, event, helper){
helper.toggleFilterList(component);
helper.searchCampaigns(component, event, helper);
},
filterCampaign : function(component, event, helper){
helper.filterCampaign(component, event, helper);
},
toCloseCampaign : function(component, event, helper){
component.set("v.modalCampanhas", false);
helper.resetSearch(component);
},
showMenuState : function(component, event, helper){
var menuItemAttrEstado = component.get("v.menuItemAttrState");
component.set("v.menuItemAttrState", !menuItemAttrEstado);
},
filterState : function(component, event, helper){
helper.toggleFilterList(component);
var targetSource = event.currentTarget;
var state = targetSource.dataset.index;
helper.searchAccounts(component, event, helper, {state : state});
helper.resetSearch(component);
},
filterVisited : function(component, event, helper){
helper.toggleFilterList(component);
helper.searchAccounts(component, event, helper, {"visitado" : "true"});
helper.resetSearch(component);
},
filterNotVisited : function(component, event, helper){
helper.toggleFilterList(component);
helper.searchAccounts(component, event, helper, {"visitado" : "false"});
helper.resetSearch(component);
},
showMenuStage : function(component, event, helper){
var menuItemAttrStage = component.get("v.menuItemAttrStage");
component.set("v.menuItemAttrStage", !menuItemAttrStage);
},
filterStage : function(component, event, helper){
helper.toggleFilterList(component);
var targetSource = event.currentTarget;
var stage = targetSource.dataset.index;
helper.searchAccounts(component, event, helper, {stage : stage});
helper.resetSearch(component);
},
onExit : function (component, event, helper) {
var url = window.location.protocol + '//' + window.location.host + '/home/home.jsp'
console.log('url : ' + url);
var urlEvent = $A.get("e.force:navigateToURL");
urlEvent.setParams({
"isredirect": true,
"url": url
});
urlEvent.fire();
},
openAccount : function (component, event, helper) {
var accId = component.get("v.lgtWrapper.resumeAcc.Id");
var navEvt = $A.get("e.force:navigateToSObject");
navEvt.setParams({
"recordId": accId,
"slideDevName": "detail"
});
navEvt.fire();
},
novaVisita : function(component, event, helper){
helper.novaVisita(component, event, helper);
},
fillAccountResume : function(component, event, helper){
helper.fillAccountResume(component, event, helper);
},
toCloseVisita : function(component, event, helper){
component.set("v.modalVisita", false);
},
toCancelVisita : function(component, event, helper){
component.set("v.modalVisita", false);
},
toCloseOpp : function(component, event, helper){
component.set("v.modalOpportunities", false);
},
jsLoaded: function(component, event, helper) {
var map = L.map('map', {zoomControl: false, tap: false})
.setView([37.784173, -122.401557], 14);
L.tileLayer(
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
{
attribution: 'Tiles © Esri'
}).addTo(map);
component.set("v.map", map);
}
})
<aura:component> <aura:attribute name="map" type="Object"/> <ltng:require styles="/resource/leaflet/leaflet.css" scripts="/resource/leaflet/leaflet.js" afterScriptsLoaded="{!c.jsLoaded}" /> <div id="map"></div> </aura:component>({ jsLoaded: function(component, event, helper) { var map = L.map('map', {zoomControl: false, tap: false}) .setView([37.784173, -122.401557], 14); L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © Esri' }).addTo(map); component.set("v.map", map); } })Refer this link for example
https://trailhead.salesforce.com/projects/account-geolocation-app/steps/lc-app-06