I am trying to add more columns in data table widget which I have called from my custom widget but its not working

saching1
Kilo Contributor

I am trying to add more columns in data table widget which I have called from my custom widget but its not working.

On click of filter button it will pass the fields to data table widget which calls instance using sp widget element.

but when I pass new fields to it it shows me 'No records in' message.

Anybody please help me out of this.

I have done below:

HTML:

<div class="pull-right">

        <button name="filter" ng-click="sendColumns('number','priority','short_description','u_query');">Filter</button>

 

      </div>

<div class=" col-md-9 ">

<uib-tabset active="activeJustified" type="pills">

    <uib-tab index="0" ng-if="data.newWorkPackage==false">

  <uib-tab-heading class="tab-title">Work Package <!--span class="badge">{{data.item_count}}</span--></uib-tab-heading>

  <div class="panel panel-default" >

<widget id="widget-form" options='{"table": data.table,"sys_id":"-1"}'></widget>

                       

  </div>

            </uib-tab>

            <uib-tab index="1" ng-if="data.AllWorkPackage==false">

  <uib-tab-heading class="tab-title">View All Work Packages <!--span class="badge">{{data.item_count}}</span--></uib-tab-heading>

  <div class="panel panel-default" >

        <div class="myhelp-data-table-instance">

     

      <div class="alert alert-info" ng-show="loadingData">

            <fa name="spinner" spin="true"></fa> ${Loading data}...

      </div>

     

      <div class="alert alert-danger" ng-if="data.invalid_table">

          ${Table not defined} '{{data.table_label}}'

      </div>

     

      <div ng-show="!loadingData">

      <sp-widget widget="data.dataTableWidget"></sp-widget>

      </div>

     

     

  </div>

                       

  </div>

            </uib-tab>

    </uib-tabset>

</div>

</div>

Client:

$scope.sendColumns =   function(number,priority,short_description,description)

{

$scope.data.val = number+','+ priority+','+short_description+','+description;

$scope.server.update();

}

Server:

data.p = 1;

data.defaultTable="u_work_package_main";

data.defaultFilter="active=true";

data.order="100";

data.defaultView="";

data.breadcrumb = true;

data.keywords = false;

data.newbtn=false;

data.tabbedRecordAvailable = true;

if(input.val)

{

gs.addInfoMessage('Yes I am'+input.val);

data.p = 1;

data.defaultTable="u_work_package_main";

data.defaultFilter="active=true";

data.order="100";

data.defaultView="";

data.breadcrumb = true;

data.keywords = false;

data.newbtn=false;

data.tabbedRecordAvailable = true;

data.fields=input.val;

//$sp.getListColumns(data.table, data.view);

data.widgetParams = {

p : data.p,

table:data.defaultTable,

filter: data.defaultFilter,

o: 'sys_created_on',

      fields:data.fields ,

d: data.order,

view:   data.defaultView, //view: 'ess',

window_size: data.window_size,

title: data.defaultTable,

show_breadcrumbs: data.breadcrumb,

show_keywords: data.keywords,

show_new: data.newbtn

};

data.dataTableWidget = $sp.getWidget('widget-data-table', data.widgetParams);

}

data.fields = 'number,priority,state,assigned_to,short_description'; //$sp.getListColumns(data.table, data.view);

data.widgetParams = {

p : data.p,

table:data.defaultTable,

filter: data.defaultFilter,

o: 'sys_created_on',

      fields:data.fields,

d: data.order,

view:   data.defaultView, //view: 'ess',

window_size: data.window_size,

title: data.defaultTable,

show_breadcrumbs: data.breadcrumb,

show_keywords: data.keywords,

show_new: data.newbtn

};

data.dataTableWidget = $sp.getWidget('widget-data-table', data.widgetParams);

9 REPLIES 9

ChrisBurks
Mega Sage

Hi Sachin,



Try updating the embedded widget by bringing   spUtil into the client controller and then do something like this:



$scope.sendColumns = function(){


        //gets the options that were set in the server


        var params = $scope.data.widgetParams;


       


        // set the new columns


        params.fields = 'number,priority,short_description,u_query';


 


      //rebuild the embedded widget with new options and reset it server side


      spUtil.get('widget-data-table', params).then(function(response){


                    $scope.data.dataTableWidget = response;


      })


}



Don't forget to pass spUtil into the client controller


saching1
Kilo Contributor

Thanks chris this is working for me but one more thing it is just adding these columns bit not removing old columns. any idea how we can remove existing columns


What does your current setup look like? The solution given should replace the columns.



I setup a sample based on the script you posted but used the incident table.



HTML:


<div class="panel panel-primary">


  <div class="panel-heading">


      <h3 class="panel-heading-text">


          ${Community Example}


      </h3>


      <h5 class="text-uppercase">Regular Button Trigger</h5>


  </div>


  <div class="panel-body">


      <div>


          <div class="form-group">


              <button ng-click="sendColumns();" class="btn btn-primary">Change Columns</button>


          </div>


          <sp-widget widget="data.dataTableWidget"></sp-widget>


      </div>


  </div>


</div>




Server Script:


(function() {


 


  data.widgetParams = {


    p : 1,


    table: 'incident',


    filter: 'active=true',


    o: 'sys_created_on',


    fields:'caller_id,short_description,sys_created_on,contact_type',


    d: 50,


    view: 'ess',


    window_size: 5,


    show_breadcrumbs: true,


    show_keywords: false,


    show_new: false


  };


  data.dataTableWidget = $sp.getWidget('widget-data-table', data.widgetParams);



})();




Client Controller:



function($scope,spUtil) {


  var c = this;



  $scope.sendColumns = function(){


    var params = $scope.data.widgetParams;


    params.fields = 'number,priority,short_description,description';


    params.show_breadcrumbs = 'true';


    params.filter = 'active=true^priority=1';


    params.show_new = true;


    params.window_size = 5;


    spUtil.get('widget-data-table', params).then(function(response){


      $scope.data.dataTableWidget = response;


    })


  }



}




The setup above seems to replace the columns executing the sendColumns function. I have created a screencast to show this. The only difference in the screencast is that I set the function to randomly pass a set of fields with each click of the button.




I am having the same issue only I am dynamically changing the filter so it breaks the entire widget.  Any more info on this would be awesome!