Apex Code Development You need to sign in to do that
Don't have an account?
Need help fixing lightning component
I'm pretty new to lightning and working on adjusting an existing lightning component bundle, but I'm stuck against an issue I can't seem to work my way around.
Essentially what I need to do is pull in two optional user supplied date values to the server-side controller so I can use it to filter query results, yet apparently I'm not passing them correctly, because each time I run a test my debug statements come back that they're null.
Markup:
Thanks.
Essentially what I need to do is pull in two optional user supplied date values to the server-side controller so I can use it to filter query results, yet apparently I'm not passing them correctly, because each time I run a test my debug statements come back that they're null.
Markup:
<aura:component controller="TBN_Dashboard" access="global" implements="flexipage:availableForAllPageTypes">
<ltng:require styles="/resource/SLDSv213/assets/styles/salesforce-lightning-design-system.css"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:registerEvent name="DashboardEvent" type="c:DashboardEvent"/>
<aura:attribute name="selRoles" type="String[]" />
<aura:attribute name="selRoleList" type="String[]" />
<aura:attribute name="selReports" type="String[]" />
<aura:attribute name="dteTo" type="String" />
<aura:attribute name="dteFrom" type="String" />
<div class="slds" style="min-height: 500px; max-width:1300px; width:1300px;">
<div class="slds-grid paddingTop">
<div style="max-width:90%">
<div class=" slds-text-align--left">
<div class="slds-grid">
<div class="slds-col">
<div class="slds-form-element roleDiv" style="min-width: 110px">
<div class="slds-form-element__label">Level: </div>
<div>
<ui:inputSelect class="slds-select" aura:id="InputSelectRole" change="{!c.onRoleChange}" >
<aura:iteration items="{!v.selRoles}" var="roleName">
<ui:inputSelectOption text="{!roleName}"/>
</aura:iteration>
</ui:inputSelect>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-form-element hierarchyDiv paddingleft" style="min-width: 170px">
<div class="slds-form-element__label">Role Hierarchy: </div>
<ui:inputSelect class="slds-select" aura:id="InputSelectRoleHierarchy" change="{!c.onRoleHierarchyChange}" disabled="true">
<aura:iteration items="{!v.selRoleList}" var="roleVal">
<ui:inputSelectOption text="{!roleVal}"/>
</aura:iteration>
</ui:inputSelect>
</div>
</div>
<div class="slds-col">
<div class="slds-form-element reportDiv paddingleft" style="min-width: 270px">
<div class="slds-form-element__label">Dashboard:</div>
<div>
<ui:inputSelect class="slds-select" change="{!c.onReportChange}" aura:id="InputSelectReport">
<aura:iteration items="{!v.selReports}" var="roleVal">
<ui:inputSelectOption text="{!roleVal}"/>
</aura:iteration>
</ui:inputSelect>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-form-element reportDiv paddingleft" style="min-width: 100px">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Date from:</label>
<div class="slds-form-element__control">
<ui:inputText aura:id="InputDateFrom" class="slds-input" value="{!v.dteFrom}"
placeholder="Choose a starting date Ex:(7/1/17)" />
</div>
</div>
</div>
</div>
<div class="slds-col">
<div class="slds-form-element reportDiv paddingleft" style="min-width: 100px">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Date to:</label>
<div class="slds-form-element__control">
<ui:inputText aura:id="InputDateTo" class="slds-input" value="{!v.dteTo}"
placeholder="Choose a starting date Ex:(7/1/17)" />
</div>
</div>
</div>
</div>
<div class="slds-col paddingleft paddingTop">
<div class="slds-form-element">
<lightning:button aura:id="searchButton" label="Go" onclick="{!c.showChart}"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="Charts">
<c:TBN_VisualCharts />
</div>
</div>
</aura:component>
Controller:
({
doInit : function(component, event, helper) {
helper.getRole(component);
helper.getReport(component);
component.find("InputSelectRole").set("v.value", 'National'),
component.find("InputSelectReport").set("v.value", 'Accounts without Activity for 30 days'),
component.find("InputSelectRoleHierarchy").set("v.value", '--None Selected--')
},
showChart : function(component, event, helper) {
var inputCmp = component.find("InputSelectRoleHierarchy");
if(component.find("InputSelectRole").get("v.value") != 'National' && (component.find("InputSelectRoleHierarchy").get("v.value") == '--None Selected--' || component.find("InputSelectRoleHierarchy").get("v.value") == null)){
console.log('>>>>>>>');
inputCmp.set("v.errors", [{message:"Please select picklist value "}]);
}
else{
inputCmp.set("v.errors", null);
console.log('=======here----1---');
var appEvent = $A.get("e.c:DashboardEvent");
appEvent.setParams({
"selRole" : component.find("InputSelectRole").get("v.value"),
"selReport" : component.find("InputSelectReport").get("v.value"),
"selRoleName" : component.find("InputSelectRoleHierarchy").get("v.value"),
"dteFrom" : component.find("InputDateFrom").get("v.value"),
"dteTo" : component.find("InputDateTo").get("v.value")
});
appEvent.fire();
}
},
onRoleChange : function(component, event, helper) {
helper.disableSelectRole(component);
helper.getRoleNamePicklist(component);
},
onRoleHierarchyChange : function(component, event){
var inputSelReport = component.find("InputSelectReport");
setTimeout(function(){ inputSelReport.focus(); }, 20);
},
onReportChange : function(component, event){
var searchbutton = component.find("searchButton");
setTimeout(function(){ searchbutton.focus(); }, 20);
}
})
Helper:
({
getRole : function(component) {
var action = component.get("c.getRoleNames");
action.setCallback(this, function(response) {
var state = response.getState();
console.log('=====state======',state);
if (component.isValid() && state === "SUCCESS") {
var stringItems = response.getReturnValue();
component.set("v.selRoles", stringItems);
component.set("v.selRoleList", '--None Selected--');
}
else if (state === "ERROR") {
console.log("===>>>=== ", response.getError());
}
});
$A.enqueueAction(action);
},
getReport : function(component){
var action1 = component.get("c.getReportNames");
action1.setCallback(this, function(response) {
var state = response.getState();
console.log('=====state====1==',state);
if (component.isValid() && state === "SUCCESS") {
var stringItems = response.getReturnValue();
component.set("v.selReports", stringItems);
}
else if (state === "ERROR") {
console.log("===>>>=== ", response.getError());
}
});
$A.enqueueAction(action1);
},
getRoleNamePicklist : function(component){
//this.disableSelectRole(component, event);
var action = component.get("c.getRoles");
var InputSelectRole = component.find("InputSelectRole").get("v.value");
action.setParams({
"selRole" : component.find("InputSelectRole").get("v.value")
});
action.setCallback(this, function(response) {
var state = response.getState();
console.log('=====state======',state);
if (component.isValid() && state === "SUCCESS") {
var stringItems = response.getReturnValue();
component.set("v.selRoleList", stringItems);
var selRole =component.find("InputSelectRoleHierarchy");
selRole.set("v.value", "--None Selected--");
}
else if (state === "ERROR") {
console.log("===>>>=== ", response.getError());
}
});
$A.enqueueAction(action);
},
disableSelectRole : function(component){
var inputSelReport = component.find("InputSelectReport");
var inputSel = component.find("InputSelectRoleHierarchy");
var searchbutton = component.find("searchButton");
if(component.find("InputSelectRole").get("v.value") == 'National'){
inputSel.set("v.disabled", true);
setTimeout(function(){ inputSelReport.focus(); }, 20);
}
else{
inputSel.set("v.disabled",false);
setTimeout(function(){ inputSel.focus(); }, 20);
}
}
})
Apex Controller method:
@AuraEnabled
public static string getReportVals(string selRole, string selRoleName, string selReport, String dteFrom, String dteTo) {
try{
date dateFromFilter = date.parse(dteFrom);
}
catch(Exception ex){
system.debug('Parse error or no date entered: ' + dteFrom);
}
try{
date dateToFilter = date.parse(dteTo);
}
catch(Exception ex){
system.debug('Parse error or no date entered: ' + dteTo);
}
String JsonString ;
//calls the method based on selReport value and assigns result to JsonString.
if(selReport == 'Accounts without Activity for 30 days'){
JsonString = getAccountWithoutActivity(selRole, selRoleName);
}
else if(selReport == 'PD Monthly Meeting' || selReport == 'QBR Tracking'){
JsonString = getDashboardData(selRole, selRoleName, selReport);
}
else if(selReport == 'Risk Account'){
JsonString = getRiskAccount(selRole, selRoleName);
}
return JsonString;
}
Everything else is working as intended, it's just when I'm trying to pass those dteFrom and dteTo variables in the controller method that I'm hitting a snag, so any help would be appreciated.Thanks.
public static string getReportVals(string selRole, string selRoleName, string selReport, string dteFrom, string dteTo) {All Answers
var action1 = component.get("c.getReportNames");
public static string getReportVals(string selRole, string selRoleName, string selReport, String dteFrom, String dteTo) {
It lacks the code of getReportNames or the call to c.getReportVals for any help.
Regards.
I have this controller function:
showChart : function(component, event, helper) { // helper.toggleSpinner(component); //press="{!c.toggleSpinner}" // helper.loading(component); var inputCmp = component.find("InputSelectRoleHierarchy"); if(component.find("InputSelectRole").get("v.value") != 'National' && (component.find("InputSelectRoleHierarchy").get("v.value") == '--None Selected--' || component.find("InputSelectRoleHierarchy").get("v.value") == null)){ console.log('>>>>>>>'); inputCmp.set("v.errors", [{message:"Please select picklist value "}]); } else{ inputCmp.set("v.errors", null); //helper.showChartData(component); console.log('=======here----1---'); var appEvent = $A.get("e.c:DashboardEvent"); appEvent.setParams({ "selRole" : component.find("InputSelectRole").get("v.value"), "selReport" : component.find("InputSelectReport").get("v.value"), "selRoleName" : component.find("InputSelectRoleHierarchy").get("v.value") }); if(component.find("InputDateFrom").get("v.value") != null){ appEvent.setParams({ "dteFrom" : component.find("InputDateFrom").get("v.value") }); } if(component.find("InputDateTo").get("v.value") != null){ appEvent.setParams({ "dteTo" : component.find("InputDateTo").get("v.value") }); } appEvent.fire(); } },interacting with this helper function:reportData : function(component, event){ var action = component.get("c.getReportVals"); action.setParams({ "selRole" : event.getParam("selRole"), "selReport" : event.getParam("selReport"), "selRoleName" : event.getParam("selRoleName"), "dteFrom" : event.getParam("dteFrom"), "dteTo" : event.getParam("dteTo") }); action.setCallback(this, function(a){ var response = a.getReturnValue(); if (response == null || response == "" || response == "[]" || response == "{}"){ var msgId = component.find("uiMessageid"); $A.util.addClass(msgId, 'toggle'); //Show toast Error return; } else { var arr = []; var repList = JSON.parse(response); component.set("v.chartlstCount", repList.length); for (var i = 0; i < repList.length; i++) { //this.drawChart(component, JSON.parse(response)); var lstRep = repList[i].lstSNFRatio; component.set("v.chartTitle", repList[i].label); component.set("v.chartData", lstRep); arr.push(repList[i]); // arr.push(lstRep); } component.set("v.chartlstData", arr); } }); $A.enqueueAction(action); } })Which then calls the public static string getReportVals. Everything else still works as intended but those parameters come across null each time, even when I add validation checks in the functions to ensure they're not null prior to firing off the event. If you could perhaps point out where the error still lies or towards some documentation which may help me better understand the issue I would appreciate it.Thanks.
public static string getReportVals(string selRole, string selRoleName, string selReport, string dteFrom, string dteTo) {