Hello everyone and thanks for reading!
I'm having this problem and couldn´t find an answer anywhere.
I've created this datatable but I have some values that are showing different from what I expected:
If you see the above picture, the Custo... column should be a picklist with 3 values: Positive, Negative, Neutral ... it IS a picklist field in the object and I want it to be a picklist field in my datatable, where the user can edit and then save the value. How it´s working now, the user can select the field and edit the value and add whatever it want, but sience it's a picklist I want to restrict them to only choose values from the picklist options.
Something similar is going on with the Date values.
As you can see, it shows the user a date and TIME picker, and I only want them to insert a Date, not a Date/Time.
This is an Aura Component, in the Js file where I've created the columns I've gave them the types the fields shoud be but something is breaking there and not showing what I´m expecting.
Code:
Cmp
<aura:component controller="My_Evaluation_Updates_Component_Ctrl" implements="flexipage:availableForAllPageTypes,force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName">
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<aura:attribute name="errors" type="Object" default="[]"/>
<aura:attribute name="draftValues" type="Object" default="[]"/>
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<div class="slds-theme_default">
<div class="slds-p-around_medium">
<!--<lightning:button class="slds-button slds-button-brand floatRight" onclick="{!c.updateStatus}">Update Status</lightning:button>-->
<h1 class="slds-text-heading_large">My Evaluation Updates</h1>
</div>
<!-- the container element determine the height of the datatable -->
<div style="height: 300px">
<lightning:datatable aura:id="dtTable"
columns="{! v.columns }"
data="{! v.data }"
keyField="Id"
errors="{! v.errors }"
draftValues="{! v.draftValues }"
onsave="{! c.handleSave}"
/>
</div>
</div>
</aura:component>
Js Controller If you see the columns I've selected "picklist" and "date" for the values that are not showing correctly and are failing, can´t figure out why.
({
init: function (cmp, event, helper) {
cmp.set('v.columns', [
{label: 'Name', fieldName: 'Name', type: 'text'},
{label: 'Opportunity Name', fieldName: 'Opportunity_Name__c', type: 'formula' ,editable: true},
{label: 'Account name', fieldName: 'Account_Name__c', type: 'formula' ,editable: true},
{label: 'Weekly Status', fieldName: 'Statusxl__c', type: 'text' ,editable: true},
{label: 'Test Plan', fieldName: 'Test_Plan__c', type: 'url' ,editable: true},
{label: 'TT End Date (Actual)', fieldName: 'TT_End_date_actual__c', type: 'date' ,editable: true},
{label: 'Deal Blockers', fieldName: 'Deal_Blockers__c', type: 'text' ,editable: true },
{label: 'Customer impression', fieldName: 'Customer_impression__c', type: 'picklist' ,editable: true },
{label: 'PSM installed?', fieldName: 'PSM_installed__c', type: 'picklist' ,editable: true },
{label: 'AFC Installed?', fieldName: 'AFC_Installed__c', type: 'picklist' ,editable: true },
{label: 'TT complete?', fieldName: 'TT_complete__c', type: 'picklist' ,editable: true },
{label: 'TT SE update', fieldName: 'TT_SE_update__c', type: 'text' ,editable: true },
{label: 'TT SE next steps', fieldName: 'TT_SE_next_steps__c', type: 'text' ,editable: true },
{label: 'TT Feature Requests', fieldName: 'TT_Feature_Requests__c', type: 'text' ,editable: true },
{label: 'CX10K Bugs', fieldName: 'CX10K_Bugs__c', type: 'url' ,editable: true },
{label: 'Roadmap commitment', fieldName: 'Roadmap_commitment__c', type: 'text' ,editable: true }
]);
helper.fetchData(cmp,event, helper);
},
handleSave: function(cmp, event, helper){
helper.handleSaveEdition(cmp, event, helper);
}
})
Helper
({
fetchData: function (cmp,event,helper) {
var action = cmp.get("c.getTechEvals");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
var data = response.getReturnValue();
cmp.set('v.data',data);
}
// error handling when state is "INCOMPLETE" or "ERROR"
});
$A.enqueueAction(action);
},
handleSaveEdition: function (cmp, event, helper) {
var draftValues = event.getParam('draftValues');
console.log(draftValues);
var action = cmp.get("c.updateTechEvals");
action.setParams({"techEvals" : draftValues});
action.setCallback(this, function(response) {
let state = response.getState();
if (state === "SUCCESS") {
//$A.get('e.force:refreshView').fire(); // NOT WORKING, WHY ?
alert("The record(s) where updated correctly."); // Could be better with a Toast Message, but not working, need to check
}
});
$A.enqueueAction(action);
},
})
Apex Controller
public with sharing class My_Evaluation_Updates_Component_Ctrl {
@AuraEnabled
public static List<Evaluation_Request__c> getTechEvals(){
List<String> statusPicklistValues = new List<String>();
statusPicklistValues.add('Created');
statusPicklistValues.add('Approved');
statusPicklistValues.add('Pending Approval');
statusPicklistValues.add('Rejected');
return [SELECT Id, Name, Opportunity_Name__c, Account_Name__c, Statusxl__c, Test_Plan__c, TT_End_date_actual__c, Deal_Blockers__c,
Customer_impression__c, PSM_installed__c, AFC_Installed__c, TT_complete__c, TT_SE_update__c, TT_SE_next_steps__c,
TT_Feature_Requests__c, CX10K_Bugs__c, Roadmap_commitment__c, toLabel(Status__c) FROM Evaluation_Request__c WHERE Status__c IN :statusPicklistValues] ;
}
@AuraEnabled
public static void updateTechEvals(List<Evaluation_Request__c> techEvals ){
update techEvals;
}
}
