Add drop down filter and date range to ng repeat table?

[robhaas]

I have a table built in my service portal widget using ng-repeat. I am wanting to add a drop down filter to a specific column header (state), and also allow a date range picker for the column header (created). Has anyone done this or could someone possibly provide assistance/point me in the right direction?

My example here is that I am providing users a list of their requested items within the last x time. This is a full list. I would like to allow them the option to look at items in a specific state, or date range, or clear the filter all together.

Thanks in advance for all help!

EDIT: I've found this and am just not fully sure how to port it into a widget:

https://jeffshamley.com/blogs/dynamically-filtering-lists-angularjs

The beginning part I'm not sure what to do with :

angular.module('app', [])
.controller('appCtrl', function($scope) {
// define list of cars

Message was edited by: Robert Haas

[robhaas]

(function () { 
var request = new GlideRecord('table');
request.addEncodedQuery('query');
//request.setLimit(5);
request.query();

var recordIdx = 0;
data.request = [];
data.maxCount = 500;
while(request.next()){

data.request.push(asAR(request));

   //TESTING MAX ENTRIES
var maximum_entries = "5";
data.count = request.getRowCount();
   if (maximum_entries && recordIdx == maximum_entries)
   break;

   var record = {};
   if (data.actions.length > 0) {
   var fields = request.getFields();
   for (var i = 0; i < fields.size(); i++) {
   var glideElement = fields.get(i);
   var name = glideElement.getName();
   if (name.indexOf("sys_") == -1)
   record[name] = request.getValue(name);
   }
   }

   record.sys_id = request.getValue('sys_id');
   if (options.image_field) {
   record.image_field = request.getDisplayValue(options.image_field);
   if (!record.image_field)
   record.image_field = "noimage.pngx";
   }

   if (options.display_field)
   record.display_field = getField(request, options.display_field);

   record.secondary_fields = [];
   options.secondary_fields.forEach(function(f) {
   record.secondary_fields.push(getField(request, f));
   })

}

function asAR(request){
   return {
       number:request.number + '',
       shortdescription:request.short_description + '',
       state:request.state.getDisplayValue() + '',
       created:request.sys_created_on.getDateValue() + '',
   sys_id:request.sys_id + ''
       };
}
})()

[Justin Abbott]

I would do your groupings for State and Created in the Server Script.

Here's just an example of what I did with State.

(function() {
   var requests = [];

   var gr = new GlideRecord('incident');
   gr.query();
   while (gr.next()) {
   var req = {};
   req.number = gr.getValue('number');
   req.shortdescription = gr.getValue('short_description');
   req.state = groupState(gr.getValue('state'));
   req.created = gr.getDisplayValue('sys_created_on');

   requests.push(req);
   }

   function groupState(state) {
   var grouping;

   if(state < 3) {
   grouping = 'Request Received';
   } else {
   grouping = 'Manager Approved';
   }

   return grouping;
   }

   function groupCreated(created) {
   var grouping;
   }

   data.request = requests;
})();

For Created, I would do something similar using comparisons with GlideDateTime logic.

Make sense?

[robhaas]

Make sense, but doesn't work correctly as I need. When I use this, it sets the display value of req.state to whatever the grouping is, and doesn't show the correct state value to the user. It just shows 'Request Received' or the other. I need it to show the actual state, and still be grouped. Does that make sense?

[robhaas]

I'm thinking this is going to have to be a modification to the client controller around

                      var value = $(this).find('td').eq(column).text().toLowerCase();

                      return value.indexOf(inputContent) === -1;

I'm just not sure how to modify that to look at groupings. What do you think?

[Community Alums]

Hi

Were you able to create a widget which shows list of RITMs based on the date range selected on the drop-down ?

Thank you