0

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:

enter image description here

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.

enter image description here

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;
    }
}

1 Answer 1

1

If you read the documentation, you'll see that date uses lightning:formattedDateTime, and picklist isn't a data type at all. You can implement both of these, but not in Aura. You'll need to use LWC instead, where you can Create Custom Data Types. There's a lot of detail that goes in this, so you'll want to read the documentation, but in summary, you need to extend the LightningDataTable, and specify new custom types. You can use <lightning-input type="date"> to get a proper date picker, and you can use <lightning-select> for a picklist. You'll need to implement inline editing, etc, yourself, so this is relatively non-trivial (thus, why I'm not writing all the code you'll have to use), but it is possible.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.