I'm having some trouble with passing date variables to my server-side controller for some reason. All the other variables transfer in my action call, and my console logging confirms there is a value present, but they only register as null in the controller. My issue lies with getting this controller method to accept the two date parameters for whatever reason:
@AuraEnabled
public static string getReportVals(string selRole, string selRoleName, string selReport, Date dteFrom, Date dteTo) {
system.debug('SelRole value: ' + selRole);
system.debug('SelRoleName value: ' + selRoleName);
system.debug('SelReport value: ' + selReport);
system.debug('DteFrom value: ' + dteFrom);
system.debug('DteTo value: ' + 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;
}
Dashboard Event:
<aura:event type="APPLICATION">
<aura:attribute name="selRole" type="String" />
<aura:attribute name="selReport" type="String"/>
<aura:attribute name="selRoleName" type="String"/>
<aura:attribute name="dteFrom" type="Date"/>
<aura:attribute name="dteTo" type="Date"/>
</aura:event>
Dashboard Component:
<aura:component controller="TBN_Dashboard" access="global" implements="flexipage:availableForAllPageTypes">
<ltng:require styles="/resource/SLDSv213/assets/styles/salesforce-lightning-design-system.css"/>
<aura:attribute name="selRoles" type="String[]" />
<aura:attribute name="selRoleList" type="String[]" />
<aura:attribute name="selReports" type="String[]" />
<aura:attribute name="dteTo" type="Date" />
<aura:attribute name="dteFrom" type="Date" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:registerEvent name="DashboardEvent" type="c:DashboardEvent"/>
<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:inputDate aura:id="InputDateFrom" class="slds-input" value="{!v.dteFrom}"
/>
</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:inputDate aura:id="InputDateTo" class="slds-input" value="{!v.dteTo}"
/>
</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>
Dashboard 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) {
// 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"),
"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);
}
})
Dashboard 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);
}
}
})
VisualCharts Component:
<aura:component controller="TBN_VisualChartController" access="global" implements="flexipage:availableForAllPageTypes" description="The component to draw various charts using Chart.js Library. Refer to http://www.chartjs.org/ for the library detail.">
<aura:attribute name="chartTitle" type="String" access="global"/>
<aura:attribute name="chart" type="Object" access="public" description="A chart instance to refer to chart"/>
<aura:attribute name="chartLegend" type="Object" access="public" description="An object for chart legends"/>
<aura:attribute name="chartData" access="public" type="string" description="Chart data in JSON format. This attribute is optional. If this is not set, Chartjs Component retrieve latest data by itself." />
<aura:attribute name="chartlstData" access="public" type="string[]"/>
<aura:attribute name="chartlstCount" access="public" type="integer"/>
<aura:handler name="init" value="{!this}" action="{!c.createChart1}" description="Initialization process." />
<aura:handler event="c:DashboardEvent" action="{!c.handleComponentEvent}" />
<div class="slds-grid slds-wrap">
<aura:iteration items="{!v.chartlstData}" var="var">
<div class="slds-col slds-size--1-of-2">
<div class="slds-form-element__label reportLable" >{!var.label}</div>
<c:TBN_Chart chartTitle="{!var.label}" chartData="{!var.lstSNFRatio}"/>
</div>
</aura:iteration>
</div>
VisualCharts Controller:
({
handleComponentEvent : function(component, event, helper){
helper.reportData(component, event);
},
// Load data from Apex Data Provider and draw chart.
createChart1 : function(component, event, helper) {
var action = component.get("c.getReportVals");
action.setParams({
"selRole" : 'National',
"selReport" : 'Accounts without Activity for 30 days',
"selRoleName" : '',
});
action.setCallback(this, function(a){
var response = a.getReturnValue();
if (response == null || response == "" || response == "[]" || response == "{}"){
//Show toast Error
return;
}
else {
var repList = JSON.parse(response);
component.set("v.chartlstData", repList);
component.set("v.chartTitle", repList[0].label);
component.set("v.chartData", repList[0].lstSNFRatio);
}
});
$A.enqueueAction(action);
}
})
VisualCharts Helper:
({
// Draw chart using chart.js.
// If chart instance already exists, it will be destroyed and re-created.
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);
}
})
If anyone could provide any guidance that would really be appreciated, I've been banging my head against this for longer than I'd like but can't seem to determine what I'm missing. Thanks.
