“Work never killed anyone. It’s worry that does the damage. And the worry would disappear if we’d just settle down and do the work.”
— Earl Nightingale
It’s been a while since I first set out to build a custom version of the stock Data Table widget, but since that time, I have used my hacked up version for a number of different projects, including sharing pages with my companion widget, the Configurable Data Table Widget Content Selector. Now that I have a way to edit the configuration scripts for the content selector, that has become my primary method for setting up the parameters for a data table. The content selector, though, was designed to give the end user the ability to select different Perspectives, different States, and different Tables. That’s a nice feature, but there are times when I just want to display a table of data without any options to look at any other data. I thought about setting up an option to make the content selector hidden for those instances, but then it occurred to me that the better approach was to cut out the middleman entirely and create a version of the Data Table widget that read the configuration script directly. This way, I wouldn’t have to put the content selector on the page at all.
So I cloned my SNH Data Table from URL Definition widget to create a new SNH Data Table from JSON Configuration widget. Then I opened up my Content Selector widget and started stealing parts and pieces of that guy and pasting them into my new Data Table widget, starting with the widget option for the name of the configuration script:
{
"hint":"Mandatory configuration script that is an extension of ContentSelectorConfig",
"name":"configuration_script",
"section":"Behavior",
"label":"Configuration Script",
"type":"string"
}
I also threw in three new options so that you could override the default Perspective, Table, and State values.
{
"hint":"Optional override of the default Perspective",
"name":"perspective",
"section":"Behavior",
"label":"Perspective",
"type":"string"
},{
"hint":"Optional override of the default Table",
"name":"table",
"section":"Behavior",
"label":"Table",
"type":"string"
},{
"hint":"Optional override of the default State",
"name":"state",
"section":"Behavior",
"label":"State",
"type":"string"
}
In the HTML section, I copied in the two warning messages and pasted them in with minimal modifications:
<div ng-hide="options && options.configuration_script">
<div class="alert alert-danger">
${You must specify a configuration script using the widget option editor}
</div>
</div>
<div ng-show="options && options.configuration_script && !data.config.defaults">
<div class="alert alert-danger">
{{options.configuration_script}} ${is not a valid Script Include}
</div>
</div>
On the server side, I deleted the first several lines of code that dealt with grabbing the table and view from the URL and making sure that something was there, and replaced it with some code that I pretty much lifted intact from the content selector widget. Here is the code that I removed:
deleteOptions(['table','field_list','filter','order_by', 'order_direction','order','maximum_entries']);
if (input) {
data.table = input.table;
data.view = input.view;
} else {
data.table = $sp.getParameter('table') || $sp.getParameter('t');
data.view = $sp.getParameter('view');
}
if (!data.table) {
data.invalid_table = true;
data.table_label = "";
return;
}
… and here is what I replaced it with:
data.config = {};
data.user = {sys_id: gs.getUserID(), name: gs.getUserName()};
if (options) {
if (options.configuration_script) {
var instantiator = new Instantiator(this);
var configurator = instantiator.getInstance(options.configuration_script);
if (configurator != null) {
data.config = configurator.getConfig($sp);
data.config.authorizedPerspective = getAuthorizedPerspectives();
establishDefaults(options.perspective, options.table, options.state);
}
}
}
if (data.config.defaults && data.config.defaults.perspective && data.config.defaults.table && data.config.defaults.state) {
var tableList = data.config.table[data.config.defaults.perspective];
var tbl = -1;
for (var i in tableList) {
if (tableList[i].name == data.config.defaults.table) {
tbl = i;
}
}
data.tableData = tableList[tbl][data.config.defaults.state];
data.table = data.config.defaults.table;
} else {
data.invalid_table = true;
data.table_label = "";
return;
}
I also grabbed a couple of the functions that were called from there and pasted those in down at the bottom:
function getAuthorizedPerspectives() {
var authorizedPerspective = [];
for (var i in data.config.perspective) {
var p = data.config.perspective[i];
if (p.roles) {
var role = p.roles.split(',');
var authorized = false;
for (var ii in role) {
if (gs.hasRole(role[ii])) {
authorized = true;
}
}
if (authorized) {
authorizedPerspective.push(p);
}
} else {
authorizedPerspective.push(p);
}
}
return authorizedPerspective;
}
function establishDefaults(perspective, table, state) {
data.config.defaults = {};
var p = data.config.authorizedPerspective[0].name;
if (perspective) {
if (data.config.table[perspective]) {
p = perspective;
}
}
if (p) {
data.config.defaults.perspective = p;
for (var t in data.config.table[p]) {
if (!data.config.defaults.table) {
data.config.defaults.table = data.config.table[p][t].name;
}
}
if (table) {
for (var t1 in data.config.table[p]) {
if (data.config.table[p][t1].name == table) {
data.config.defaults.table = table;
}
}
}
data.config.defaults.state = data.config.state[0].name;
if (state) {
for (var s in data.config.state) {
if (data.config.state[s].name == state) {
data.config.defaults.state = state;
}
}
}
}
}
I also reworked the area labeled widget parameters to get the data from the configuration instead of the URL. That area now looks like this:
// widget parameters
data.table_label = gr.getLabel();
data.filter = data.tableData.filter;
data.fields = data.tableData.fields;
data.btnarray = data.tableData.btnarray;
data.refmap = data.tableData.refmap;
data.actarray = data.tableData.actarray;
copyParameters(data, ['p', 'o', 'd', 'relationship_id', 'apply_to', 'apply_to_sys_id']);
data.filterACLs = true;
data.show_keywords = true;
data.fromJSON = true;
data.headerTitle = (options.use_instance_title == "true") ? options.title : gr.getPlural();
data.enable_filter = options.enable_filter;
data.show_new = options.show_new;
data.show_breadcrumbs = options.show_breadcrumbs;
data.table_name = data.table;
data.dataTableWidget = $sp.getWidget('snh-data-table', data);
No modifications were needed on the client side, so now I just needed to create a new test page, drag the widget onto the page and then use the little pencil icon to configure the widget. I called my new page table_from_json and pulled it up in the Page Designer to drag in this new widget. Using the widget option editor, I entered the name of the Script Include that we have been playing around with lately and left all of the other options that I added blank for this first test.
With that saved, all that was left to do was to go out to the Service Portal and bring up the page.
Not bad! I played around with it for a while, trying out different options using the widget option editor in the Page Designer, and everything seems like it all works OK. I’m sure that I’ve hidden some kind of error deep in there somewhere that will come out one day, but so far, I have not stumbled across it in any of my feeble testing. For those of you who like to play along at home, here is an Update Set that I am hoping contains all of the needed parts.
