Lightning:DataTable with RowAction with PopUP in Lightning Component

Apex Class:-DataTableController
public class DataTableController {
  @AuraEnabled
    public static String getQuestionDetails() {      
       	map<String,String> mapDetails=new map<String,String>(); 
        mapDetails.put('What is Your Last Name?','Text');      
        mapDetails.put('Are You Indian?','Boolean');   
        mapDetails.put('What is your Eye Color?','Text'); 
        mapDetails.put('What was your first Nobel?','Text');
        return JSON.serialize(mapDetails);
    }
}
DataTableComponent:-

<aura:component controller="DataTableController" implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable">
    <aura:attribute  name="mydata" type="List"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    <aura:attribute name="openModal" type="boolean" default="false"/>
    <aura:attribute name="QuestionName" type="String"/>
    <aura:attribute name="QuestionType" type="String"/>
    
    <lightning:datatable aura:id="dtTable" data="{!v.mydata}" 
                         columns="{!v.mycolumns}" 
                         keyField="id"
                         showRowNumberColumn="true"
                         hideCheckboxColumn="true"
                         onrowaction="{!c.viewRecord}"
                         />
    
    <!--Model PopUp Start-->
    <div class="slds-m-around--xx-large">
        <aura:if isTrue="{!v.openModal}">
            <!--Modal Box Start-->
            <div role="dialog" class="slds-modal slds-fade-in-open ">
                <div class="slds-modal__container">
                    <div class="slds-modal__header"> 
                        <h1 class="slds-text-heading--medium"><b>Answer the security Questions</b></h1>
                    </div> 
                    <!--Modal Box Header-->
                    <div class="slds-modal__content slds-p-around--medium">
                        <center> 
                            <table style="height:80px;width:100%">
                                <tr>
                                    <td style="width:10%"> 
                                        <b>Question:-</b>
                                    </td>
                                    <td>
                                        <input type="text" value="{!v.QuestionName}" readonly="readonly" class="slds-size_1-of-2" style="font-size:20px"/>
                                    </td>
                                </tr>
                                <aura:if isTrue="{!v.QuestionType=='Text'}">
                                    <tr>
                                        <td>
                                           <b>Answer:- </b>
                                        </td>
                                        <td>
                                            
                                            <input type="text" name="AnsTesxtId" class="slds-size_1-of-2" />
                                        </td>
                                    </tr>
                                    
                                </aura:if>
                                <aura:if isTrue="{!v.QuestionType == 'Boolean'}" >
                                    <tr>
                                        <td>
                                           <b>Answer:- </b>
                                        </td>
                                        <td>
                                            <input type="checkbox" name="options" id="checkbox-unique-id-72"  style="width: 80px;
                                                                                                                     height: 20px;margin-left: -28px;" />
                                        </td>
                                    </tr>
                                    
                                </aura:if>
                            </table>
                            
                        </center>
                    </div>
                    <!--Modal Box Button-->
                    <div class="slds-modal__footer">
                        <button class="slds-button slds-button--brand" onclick="{!c.handleCloseModal}">Confirm</button>
                    </div>
                </div>
            </div>
            <div class="slds-backdrop slds-backdrop--open"></div> 
        </aura:if>
    </div>
    <!--Model PopUp End-->
    
</aura:component>
<!-- DataTableComponent.js controller-->
({
doinit : function(component, event, helper){
debugger;
var columns ='[{"label": "Question", "fieldName": "Question","Type": "checkbox","editable": true},{"label": "DataType", "fieldName": "DataType","Type": "text"}, {"label": "Answer", "fieldName": "Answer","Type": "Text","editable": true},{"type": "button", typeAttributes: {label: "View",name: "View", title: "View", disabled: false,value: "view",iconPosition: "left"}}]';
//var jsonColumns = JSON.parse(columns);
//component.set('v.mycolumns', columns);

component.set('v.mycolumns', [
{"label": "Question", "fieldName": "Question","Type": "checkbox","editable": true},
{"label": "DataType", "fieldName": "DataType","Type": "text"},
{type: "button", typeAttributes: {
label: 'Answer',
name: 'Answer',
title: 'Answer',
disabled: false,
value: 'Answer',
iconPosition: 'left'
}}]); 

var action = component.get("c.getQuestionDetails");
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") { 
debugger; 
var jsonData=[];
var resp=response.getReturnValue();
var jsonVal = JSON.parse(resp); 
for(var val in jsonVal){
var item = {}
item ["Question"] =val;
item ["DataType"] =jsonVal[val];
jsonData.push(item);
}
component.set('v.mydata',jsonData);
}
});
$A.enqueueAction(action);
},
viewRecord : function(component, event, helper) {
debugger; 
var row = event.getParam('row');
var jsonObj = JSON.parse(JSON.stringify(row));
console.log('>>>>jsonObj>>>>'+ jsonObj);
var actionName = event.getParam('action').name;
if(actionName == 'Answer'){
var rows = component.get('v.mydata');
for (var i = 0; i < rows.length; i++){
if(jsonObj.Question==rows[i].Question){
component.set("v.QuestionName", jsonObj.Question);
}
if(jsonObj.DataType=="Text"){
component.set("v.QuestionType", jsonObj.DataType);
}
if(jsonObj.DataType=="Boolean"){
component.set("v.QuestionType", jsonObj.DataType);
}
}
component.set("v.openModal", true);
}
},
handleCloseModal: function(component, event, helper) {
//For Close Modal, Set the "openModal" attribute to "fasle" 
component.set("v.openModal", false);
}
})
DataTableApp:-
<aura:application extends="force:slds" >
<c:DataTableComponent/>
</aura:application>
OUTPUT:-
After click, DataTable onRowActionEvent 
OutPut:-

Leave a Reply