How to get dynamic filter in data widget from instance definition

[AmeyaMR]

Hello!
I am developing a portal. In that I have a widget which is cloned from data table from Instance definition where I want to display tables of particular user selected by user. For selection of user, used sn-record-picker in another widget and on clicking submit broadcasted it.
Trying to get it in widget which is cloned from data table from Instance definition using $rootScope.$on  in clint script and trying to pass that sys_ID to server script using  c.server.get.
I got sys_ID in server script but not able to update the filter field of data table from Instance definition and display records.
for example If I want Incidents assigned to that user(sys_ID).
Please help me to achive this.

[VarunS]

@AmeyaMR

you need to pass the sys_ID of the user selected by the user from the sn-record-picker widget to the server script of your data table widget and then update the filter in the data table widget to display the records accordingly.

In your user selection widget, use sn-record-picker to allow the user to select a user and then broadcast the sys_ID.

<sn-record-picker field="user" table="sys_user" display-field="name"></sn-record-picker>
<button type="button" ng-click="selectUser()">Submit</button>

Client Script

(function() {
    // Define the AngularJS controller
    function UserSelectionController($scope, $rootScope) {
        $scope.selectUser = function() {
            var selectedUser = $scope.user;
            if (selectedUser) {
                $rootScope.$broadcast('userSelected', selectedUser.sys_id);
            }
        };
    }

    // Register the controller with the Service Portal
    angular.module('sn.$sp').controller('UserSelectionController', UserSelectionController);
})();

In your data table widget, listen for the broadcasted sys_ID, pass it to the server script, and update the data table filter.
Client script

(function() {
    // Define the AngularJS controller
    function DataTableController($scope, $rootScope, $http) {
        $scope.userSysId = '';

        // Listen for the 'userSelected' event
        $rootScope.$on('userSelected', function(event, userSysId) {
            $scope.userSysId = userSysId;
            $scope.updateDataTable();
        });

        // Function to update the data table
        $scope.updateDataTable = function() {
            $http({
                method: 'GET',
                url: '/api/now/table/incident',
                params: {
                    sysparm_query: 'assigned_to=' + $scope.userSysId,
                    sysparm_display_value: true
                }
            }).then(function(response) {
                $scope.data.tableData = response.data.result;
            }, function(error) {
                console.error('Error fetching incidents:', error);
            });
        };
    }

    // Register the controller with the Service Portal
    angular.module('sn.$sp').controller('DataTableController', DataTableController);
})();

HTML

<div ng-controller="DataTableController">
    <sp-widget widget="widget"></sp-widget>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Number</th>
                <th>Short Description</th>
                <th>Assigned To</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="incident in data.tableData">
                <td>{{incident.number}}</td>
                <td>{{incident.short_description}}</td>
                <td>{{incident.assigned_to.display_value}}</td>
            </tr>
        </tbody>
    </table>
</div>

1. User Selection Widget:

•HTML: sn-record-picker allows the user to select a user from sys_user table. A submit button triggers the selectUser function.

•Client Script: The selectUser function broadcasts the selected user’s sys_ID using $rootScope.$broadcast.

2. Data Table Widget:

•Client Script:

•Listens for the userSelected event using $rootScope.$on.

•Updates the userSysId and calls updateDataTable.

•The updateDataTable function makes an HTTP GET request to the ServiceNow API to fetch incidents assigned to the selected user.

•HTML: Displays the incidents in a table format.

By following this approach, you can dynamically update the data table based on the user selected in the sn-record-picker widget.

[AmeyaMR]

Hey @VarunS ,
This is the custom approach.
I am telling there exist one out of box widget called data table from instance definition. Using which u can print the table of anything(incidents, change,...) in much easier way. No need to hardcode it.
There I got sys_id already to server script of Data table from instance definition. I want to update the filter there.
And I did like 
data.filter= $sp.getValue("filter")+input.userID;
but in the filter input.userID is not reflecting and can't print data 

[AmeyaMR]

Let me give some sceenshots and code for better understanding of question.
I tried to do it by using, out of box widget which is data table from instance definition. Using which we can print any data table in service now in a simple way.
 I want to display tables of particular user selected by user. For selection of user, used sn-record-picker in another widget and on clicking submit broadcasted it.
I also got the user sys_id in clint script of data table from instance definition 1st. and then used server.get() to that sys_id in server script.
But in filter field I cant update the filter. I appended the inpust.userID to the data.filter in server script.
But it's not taking it.
Let me add code snippets of data table from instance definition widget
in clint script I passed userID using 

$rootScope.$on("xyz", function (event, temp) {

        c.data.name = temp;

                var data={

                    "name":c.data.name

                }

                c.server.get(data).then(function(res){

                })

      });

In server sccript 

(function () {

  /*  "use strict"; - linter issues */

  // populate the 'data' object

  var sp_page = $sp.getValue("sp_page");

  var pageGR = new GlideRecord("sp_page");

  pageGR.get(sp_page);

  data.page_id = pageGR.getValue("id");

  $sp.getValues(data);

  if (data.field_list) {

    data.fields_array = data.field_list.split(",");

  } else {

    data.field_list = $sp.getListColumns(data.table);

  }

  if (input) {

    data.p = input.p;

    data.o = input.o;

    data.d = input.d;

    data.q = input.q;

    // additional inputs for using a spModal

    // data.table = input.table;

    // data.filter = input.filter;

    // data.view = input.view;

    data.name = input.name || "";

   // gs.addInfoMessage(data.name);

  }

  data.p = data.p || 1;

  data.o = data.o || $sp.getValue("order_by");

  data.d = data.d || $sp.getValue("order_direction");

  data.page_index = data.p - 1;

  data.window_size = $sp.getValue("maximum_entries") || 10;

  data.window_start = data.page_index * data.window_size;

  data.window_end = (data.page_index + 1) * data.window_size;

  // adding data.filter here so

  // it can be picked up from an input.filter above

  //data.filter = $sp.getValue("filter");

  data.filter = $sp.getValue("filter") + data.name;

  var gr = new GlideRecordSecure(data.table);

  if (!gr.isValid()) {

    data.invalid_table = true;

    data.table_label = data.table;

    return;

  }

  data.table_label = gr.getLabel();

  options.table = data.table;

  options.fields = data.field_list;

  options.o = data.o;

  options.d = data.d;

  options.filter = data.filter;

  options.window_size = data.window_size;

  options.view = data.view;

  options.useInstanceTitle = true; // to make sure Data Table widget uses headerTitle always

  options.headerTitle = options.title;

  options.show_breadcrumbs = true;

options.show_keywords=true;

  data.dataTableWidget = $sp.getWidget("widget-data-table", options);

})();

Don't get confused the name is actually userID. The data.filter not taking the data.name which I have appended.
image of my portal

Here you can see that I want to display departments of that particular selected user. But filter is not getting updated.