1

enter image description here

Below is the code: Component:

<aura:handler event="aura:locationChange" action="{!c.destoryCmp}"/>
<aura:attribute name="sessionTable" type="Object" />
<aura:attribute name="Spinner" type="boolean" default="false"/>
<aura:attribute name="workSpaceId" type="String" default=""/> 
  <aura:attribute name="scenarioId" type="String" />
  <aura:attribute name="scenarioRuleInstanceId" type="String" />
  <aura:attribute name="tableName" type="String" default=""/>
  <aura:attribute name="textMsg" type="String" default=""/>
  <aura:attribute name="cssStyle" type="String" />
  <aura:method name="getTableName" action="{!c.getTableName}"/> 
  <aura:method name="createDataTablecall" action="{!c.createDataTable}"/>  
    {!v.cssStyle}
</style>

 <aura:if isTrue="{!v.Spinner}">
    <div aura:id="spinnerId" class="slds-spinner_container">
        <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
            <span class="slds-assistive-text">Loading</span>
            <div class="slds-spinner__dot-a"></div>
            <div class="slds-spinner__dot-b"></div>
        </div>
    </div>
</aura:if> 
    <div class="demo-only" style="height: 640px;">
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-modal_large slds-fade-in-open">
        <div class="slds-modal__container">
            <header class="slds-modal__header slds-p-top_x-small slds-p-bottom_small">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick="{!c.closeButton}">
                <lightning:icon iconName="utility:close" size="small" class="closeIcn" />
                <span class="slds-assistive-text">Close</span>
                </button>
               <div class="slds-clearfix">
                    <div class="slds-grid">
                        <div class="slds-frame slds-size--4-of-12 ">

                        </div>
                        <div class="slds-frame slds-size--4-of-12 slds-p-left_small slds-p-right_small">
                            <div class=" slds-text-heading_large  slds-text-align_center" >{!$Label.c.comp_Derived_Field}</div>  
                        </div>
                        <div class="slds-frame slds-size--4-of-12 slds-p-right_x-small">
                            <div class="slds-text-align_center slds-m-top_x-small slds-text-heading_small" style="font-weight: 300;">
                                <div class="slds-float_right slds-truncate" title="{!v.tableName}" >
                                <lightning:icon iconName="utility:database" variant="database" size="small"/>&nbsp;&nbsp;
                                {!v.tableName} 
                                </div>  
                            </div>

                        </div>

                    </div>    
                </div>
                </header>
<div class="slds-modal__content slds-p-around_small"  aura:id="UnderlyingTabId" style="min-height: 150px;">
                        <div class="slds-grid slds-grid--vertical-align-start" style="overflow:auto;">
                          <!--  <div class="slds-text-heading_medium slds-text-align_center"> -->
                            <div class=" slds-text-align_center"><ui:outputText value="{!v.textMsg}" class="slds-text-heading_medium" /></div>

                            <table id="table-1" aura:id="tableAuraId1" class="slds-table slds-table_bordered slds-table_cell-buffer" style="width:100%;"> </table> 

</div>
</div> 
<footer class="slds-modal__footer slds-text-align_center">
     <button class="slds-button slds-button_brand" onclick="{!c.navigateToComputation}">Add Derived Variable</button>
    <button class="slds-button slds-button_neutral" onclick="{!c.closeButton}">Cancel</button>  
  </footer>
</div></section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>

Controller:

({
doInit: function(component, event, helper) {  
    component.showSpinner(); 
    component.set("v.cssStyle", ".forceStyle .viewport .oneHeader.slds-global-header_container{z-index:0 !important;}   .forceStyle .viewport.oneHeader.desktop {z-index:0 !important;} .forceStyle.desktop .viewport{overflow:hidden}");
    component.getTableName();
    component.createDataTablecall();
},
    createDataTable : function(component, event, helper){

        var html='<div class="slds-button-group" role="group">';
        html=html+'<button class="slds-button slds-button_icon slds-button_icon-border-filled edit" aria-pressed="false" title="Edit">';
        html=html+'<span class="slds-icon_container slds-icon-utility-edit" data-aura-rendered-by="138:0"><span data-aura-rendered-by="141:0" class="lightningPrimitiveIcon" data-aura-class="lightningPrimitiveIcon">';
        html=html+'<div class="icon-edit"></div>';
        html=html+'</span></span><span class="slds-assistive-text">Edit</span>';
        html=html+'</button>';
        html=html+'<button class="slds-button slds-button_icon slds-button_icon-border-filled delete" aria-pressed="false" title="Delete">';
        html=html+'<span class="slds-icon_container slds-icon-utility-delete" data-aura-rendered-by="145:0"><span data-aura-rendered-by="148:0" class="lightningPrimitiveIcon" data-aura-class="lightningPrimitiveIcon">';
        html=html+'<div class="icon-delete"></div></span><!--render facet: 149:0--></span><span class="slds-assistive-text">Delete</span>'; 
        html=html+'</button>';
        html=html+'</div>';
        var opts = [];
        var action = component.get("c.getDerivedFieldListData");
        action.setParams({ "ScenarioRuleInstanceId" : component.get("v.scenarioRuleInstanceId")});
        action.setCallback(this, function(response){
            var state = response.getState();
            if(response.getReturnValue()!== null && state==="SUCCESS"){
                var arrListValues=response.getReturnValue();
                if(arrListValues.length>0){
                    for(var ctr=0;ctr<arrListValues.length;ctr++){
                        opts.push({Rule:arrListValues[ctr].businessRuleName,
                                   FieldName:arrListValues[ctr].paramName ,
                                   Type: arrListValues[ctr].businessRuleTypeMasterName,
                                   DataType:arrListValues[ctr].paramDataType,
                                   ValueType:arrListValues[ctr].paramType, BusinessRuleId:arrListValues[ctr].businessRuleId});
                    }
                }
                if(opts.length>0){
                    var sessionTable;
                    var $j = jQuery.noConflict();
                    var arrHtml=[];
                    var result = opts;
                    var coulmnJsonResult = [];

                    var element = result[0]; 
                    for(var key in element){
                        if(key == 'BusinessRuleId'){
                            coulmnJsonResult.push({"data":key,"title":key,defaultContent:'', visible:false});
                        }else
                            coulmnJsonResult.push({"data":key,"title":key,defaultContent:''});

                    }
                    coulmnJsonResult.push({"title":' ', defaultContent :' '});
                    var columnNames=[];

                    if(!$A.util.isEmpty(result) && !$A.util.isUndefined(result)){
                        var columnsIndex =0 ;
                        for(var columnsCtr in result[0]){
                            columnNames.push(columnsCtr);
                            columnsIndex++;

                        }
                    }
                    console.log( $j('#table-1'));
                    sessionTable = $j('#table-1').DataTable(
                        {
                            "processing": false,
                            "dom": '<"div-search"><"div-tbl">t<"bottom-info"> ', // f search, p :- pagination , l:- page length 
                            "data": result,
                            paging:false,
                            //"order" : [[1,"asc"]],
                            scrollX : true,
                            scrollY:  "300px",
                            destroy : true,
                            //"ordering": true,
                            scrollCollapse: true,
                            "ordering": false,

                            "language":
                            {
                                "emptyTable": "Loading Data"
                            },

                            buttons: [{
                                extend : 'csv',
                                text : '',
                                title : 'Call Plan',  
                            }],
                            columns:coulmnJsonResult,
                            "columnDefs": [
                                {  "targets": 'no-sort'  },


                                {
                                    targets : 6,
                                    "createdCell":function (td, cellData, rowData, row, col)
                                    { 
                                        $j(td).html(html); 
                                        $j(td).width('50px');

                                    }

                                }

                            ],
                            "createdRow": function ( row, data, index ) 
                            {
                                $j(row).addClass('slds-hint-parent');
                                $j('td', row).addClass('slds-text-align_left slds-truncate');
                                $j('thead > tr> th').addClass(' slds-text-title_caps');
                                $j('thead > tr').addClass('slds-text-title_caps ');

                            } 
                        });  

                    component.set("v.sessionTable",sessionTable);
                    $j("#table-1 .edit").on("click", function(){

                        var idx = sessionTable.cell( $j(this).parents('td') ).index().row;
                        var row = sessionTable.rows(idx).data();
                        console.log(row[0].BusinessRuleId);
                        var brid = row[0].BusinessRuleId;
                        var type = row[0].Type;
                        console.log("type"+type);
                        if(type == 'Category'){
                            var scenRuleInstID = component.get("v.scenarioRuleInstanceId");
                            component.navigateToCategory(brid,scenRuleInstID); 
                        }
                        if(type == 'Rank'){
                            var scenRuleInstID = component.get("v.scenarioRuleInstanceId");
                            component.navigateToRank(brid,"Update",scenRuleInstID);

                        }
                        if(type == 'Compute'){
                            component.navigate(brid,"Update");}
                    });

                    $j("#table-1 .delete").on("click", function(){
                        var scenRuleInstID = component.get("v.scenarioRuleInstanceId");
                        var idx = sessionTable.cell( $j(this).parents('td') ).index().row;
                        var row = sessionTable.rows(idx).data();
                        console.log(row[0]);
                        var brid = row[0].BusinessRuleId;
                        var type = row[0].Type;
                        var columnName=row[0].FieldName;
                        if(type == 'Category'){ 
                            component.navigateToDeleteCategaory(brid,scenRuleInstID,columnName);
                        }
                        if(type == 'Compute'){ 
                            component.navigateToDeleteCompute(brid,scenRuleInstID,columnName);

                        }
                        if(type == 'Rank'){ 
                            var scenRuleInstID = component.get("v.scenarioRuleInstanceId");
                            component.navigateToDeleteRank(brid,scenRuleInstID,columnName);

                        }

                    });


                }
                else{
                    var tableVisibility = component.find("tableAuraId1");
                    $A.util.addClass(tableVisibility,'slds-hide');
                    component.set("v.textMsg","No Data Found");
                }

            }
            else{
                console.log("Failed with state:  "+ state);
            }
            component.hideSpinner();
        });
        $A.enqueueAction(action);

    },

navigateToComputation :function(component, event, helper) {  

    console.log("inside navigate component");
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
    componentDef : "c:CPGComputationDerivedField",
    componentAttributes: {
    mode:   "Create",
    scenarioRuleInstanceId: component.get("v.scenarioRuleInstanceId"), 
    workSpaceId: component.get("v.workSpaceId")
    }
    });
    evt.fire();

},

navigateToComputationUpdate :function(component, event, helper) {  
    var params = event.getParam('arguments');
    if (params) {
    var param1 = params.param1;
    var param2 = params.param2;
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
    componentDef : "c:CPGComputationDerivedField",
    componentAttributes: {
    mode:   param2,
    scenarioRuleInstanceId: component.get("v.scenarioRuleInstanceId"),
    businessRuleTypeId: param1,
    workSpaceId: component.get("v.workSpaceId")
    }
    });
    evt.fire();
    }
},

closeButton : function(component, event, helper) {
    component.set("v.cssStyle", ".forceStyle .viewport.oneHeader.desktop {z-index:5} .forceStyle.desktop .viewport{overflow:visible}");
    var sceId=component.get("v.scenarioId"); 
    var action = component.get("c.getScenarioID");
    action.setParams({ "ScenarioRuleInstanceId" : component.get("v.scenarioRuleInstanceId")});

    action.setCallback(this, function(response){ 
    var state = response.getState();
    if(component.isValid() && state==="SUCCESS")
    {

    var arrListValues=response.getReturnValue();
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
    componentDef : "c:CPGbusinessRuleCanvas",
    componentAttributes: {
    record_Id : arrListValues[0].Scenario_Id__c,
    viewcanvas : "Y",
    workSpaceId : component.get("v.workSpaceId")
    }
    });
    evt.fire();

    }
    else{
    console.log("Failed with state:  "+ state);
    }
    });
    $A.enqueueAction(action); 
},


getTableName : function(component, event, helper) {

    if(component.get("v.scenarioRuleInstanceId")==="" || component.get("v.scenarioRuleInstanceId")==='undefined'){
    component.set("v.tableName","No Table Found");
    }else{
      var action = component.get("c.getInputTableName");
      action.setParams({"scenarioRuleInstanceDetailsId": component.get("v.scenarioRuleInstanceId")}); 
      action.setCallback(this, function(response){
      var state = response.getState();
      if(component.isValid() && state==="SUCCESS")
      {
      var itemsSample = response.getReturnValue();
        if(itemsSample==="" || itemsSample==="undefined"){
        component.set("v.tableName","");
        } else{  
        component.set("v.tableName",itemsSample[0].Table_Display_Name__c);
        } 
      }else{
        console.log("Failed with state:  "+ state);
        }
      });
      $A.enqueueAction(action);
    }
},

showSpinner: function(component, event, helper) {
// make Spinner attribute true for display loading spinner 
component.set("v.Spinner", true); 
},

// this function automatic call by aura:doneWaiting event 
hideSpinner : function(component,event,helper){
// make Spinner attribute to false for hide loading spinner    
component.set("v.Spinner", false);
},
destoryCmp : function (component, event, helper) {
 //var sessionTable=component.get("v.sessionTable");   
 //sessionTable.destroy();   
 component.destroy();
}


});
  • You first major problem that I can see - you cannot run a controller method from the controller - you can only run helper methods - see this trail to learn about it: Learn About Syntax and Code – Itai Shmida Dec 10 '17 at 8:34
  • I am experiencing the same issue. Wondering if you figured this out yet? – Lightning Evangelist Mar 4 '18 at 12:03
  • Yes I was able to figure it out. Instead of using id while creating dataTable use class attribute. It will not give style error. – Jill_sfdc Apr 25 '18 at 11:09

Your Answer

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

Browse other questions tagged or ask your own question.