Ultimately I was able to load the extender operators. Using the OOB SN Desktop Filter widget it is not possible. Below is the approach uses the same resources or component of SN Desktop Filter widget I have just added another JS Include to it.
Step 1: I cloned the SN Desktop Filter widget
Step 2: Then created a widget dependency (why I have created I have explained below.) Name it as your wish. No need to put any "Angular Module Name".
Step 3: Under widget dependency in JS Include add "/scripts/js_includes_ng_form_elements.js" and "/scripts/js_includes_filter_widget.js" and in CSS Includes add "retina_icons.css", "styles/filter.css" and "styles/thirdparty/datetimepicker.css". Basically we are mocking the dependency of OOB SN Filter Widget. Check the screenshots for configurations.
Step 4: Now create a UI Script as below
- Name - As your wish(preferably without space)
- UI Type - ALL
- Script - As below. So in the UI script we are basically overriding "getMetaData" method of factory service"sn.filter_widget.dot_walk" present in/scripts/js_includes_filter_widget.js JavaScript file. "getMetaData" is the method where the field operators are fetched. So in this UI script I am decorating that method using AngularJS $provide service.
angular.module('sn.filter_widget.dot_walk')
.config(['$provide', function($provide) {
console.log("Decorator config block reached for sn.filter_widget.dot_walk");
$provide.decorator('snDotWalkTableAPI', ['$delegate', '$q', '$log', function($delegate, $q, $log) {
//copying the original function from the factory service
var originalGetMetaData = $delegate.getMetaData;
$log.info("Applying decorator to snDotWalkTableAPI.getMetaData");
$delegate.getMetaData = function() {
// 'arguments' here will capture all arguments of getMetaData
$log.info("Decorated getMetaData called with arguments:", arguments);
//calling the original getMetaData methods
var originalPromise = originalGetMetaData.apply($delegate, arguments);
var modifiedPromise = originalPromise.then(function(columns) {
$log.info("Original columns received in decorator:", angular.copy(columns));
if (angular.isObject(columns)) {
for (var key in columns) {
if (key !== "123TEXTQUERY321") {
if (columns[key].hasOwnProperty('operators')) {
columns[key]['operators'].push({
"label": "changes",
"advancedEditor": "none",
"editor": "none",
"operator": "VALCHANGES"
});
if (columns[key]['type'] != "glide_date_time" && columns[key]['type'] != "due_date") {
columns[key]['operators'].push({
"label": "changes to",
"advancedEditor": columns[key].type,
"editor": "field",
"operator": "CHANGESTO"
});
columns[key]['operators'].push({
"label": "changes from",
"advancedEditor": columns[key].type,
"editor": "field",
"operator": "CHANGESFROM"
});
}
}
}
}
} else {
$log.warn("Decorator for getMetaData: Expected 'columns' to be an object, but received:", columns);
}
$log.info("Modified columns being returned by decorator:", columns);
// Return the modified columns object. This will be the resolved value
// of the promise returned by the decorated getMetaData.
return columns;
}, function(error) {
$log.error("Decorator: Error from original getMetaData promise:", error);
return $q.reject(error);
});
//Return the new table meta data
return modifiedPromise;
};
return $delegate;
}]);
}]);
Step 5: Now go to the dependency created in step 2. Then add the above UI Script in the JS Include of the dependency. To add the UI script as JS Include you need to click on new button the put the value as below.
- Display Name - same name as UI script name
- Source - UI Script
- UI Script - select the UI script created.
Step 6: After adding the UI script as JS Include make sure to change the order. It should be of higher order from other JS Include. Since, this is going to decorate/override the factory service's method so the original method need to load first before this UI Script loads
Step 7: Now you need to remove the OOB dependency "SN Filter" from the widget dependency. Come to the cloned widget and remove the SN Filter dependency using the edit button.
Step 8: [optional step, for testing purpose] In the cloned widget replace the server script replace with the below code.
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.table = 'incident';
data.initialQuery = '';
})();
We are done. Now you can open the widget editor and enable preview and test. You should see the Extended operators
Why we created a dependency?
=> The dependency(SN Filter) that is tagged along with OOB widget SN Desktop Filter, if we add the UI script in that dependency it would work but it would affect other widgets where these OOB dependency is used. Also, we do not want to customize the OOB things.
