Custom Entity Container with JavaScript Extensions Revisited

Assiduous readers will recall that we followed a series of adventures in Entity Container extension some time ago, from a basic tool that worked only in Debug Mode to a more interesting and robust concept that worked once deployed. For reference those Custom Entity Container with JavaScript Extensions articles can be found in the following links

So why come back to this example? For several reasons it seems appropriate to talk again about Custom Entity Container with JavaScript Extensions. Firstly, it is something that is often coming up in classes or on customer sites. So, subjectively I want to talk about it. Secondly, it is a great way of learning the ins and outs of the JavaScript extensions in general.

Yesterday, I was mad

I noticed that the PDF generator I had used for the third (and most interesting and useful example) had pretty much destroyed part of the file : specifically a couple of lines were duplicated and others were truncated. So it is time to revisit this, if only to correct the errors (I have uploaded a more up-to-date file, so that some of the errors have gone).

So let’s set the scene first. We want to display some entity instances. These are generated in my case by an Excel Spreadsheet. They contain one entity, the insult and this entity has three attributes : an Id number, the text of the insult and an insult level – a numeric categorisation of the insult. The higher the number, the more severe the insult. The insults themselves come from Tintin, or more precisely Captain Haddock.

There are no conditions in this Excel file, so the instances are created. There are 240, so we need a good display of our instances. The default display is too long, with no useful scroll bar. We want to replace this with jsGrid, a lightweight jQuery grid. We want something that replaces the style on the left with the style on the right:

Custom Entity Container with JavaScript Extensions Revisited

We would like

  • A grid format using little space
  • A scroll bar
  • A pagination control

The visual elements will be provided by jsGrid, a lightweight JavaScript control. We are also going to set the bar a little higher than last time. We want to have a dynamic filter of the grid, so that the user can view what they want (and not always have the 240 instances on the grid).

Custom Entity Container with JavaScript Extensions Revisited 2

Note: we must tread very carefully here. We must not change the business logic in any way. We must separate the concerns and provide purely UX elements in our JavaScript extension. But given this is inferred data, I think a little filtering is fine, as long as the underlying relationship is not tampered with.

The code would be based on the standard template, so I will simply put it here, in all of it’s quickly-strung together glory, so that you can read it, learn about it, clean it and make it industrial. As I always like to make clear, anything I post here is strictly not-ready, big-picture, here’s-an-idea for you to look at and make your own. This Custom Entity Container with JavaScript Extensions example is available on the OPA Hub Shop for download, as usual. It is listed as example #3 of Custom Entity Container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
* Richard Napier The OPA Hub Website April 2018
* Educational Example of Custom EntityContainer Extension
* I will remember this is for demonstration and educational purposes only
*/
OraclePolicyAutomation.AddExtension({
customEntityContainer: function (control, interview) {
//console.log("Get Array Reference");
if (control.getProperty("name") == "xEntity") {
var entities = interview._session.config.data;
var entityId = "entitypublicname";
var entity;
for (= 0; i < entities.length; i++) {
entity = entities[i];
if (entity.entityId === entityId) {
break;
}
}
return {
mount: function (el) {
//console.log("Beginning customEntityContainer jsGrid");
var myDiv = document.createElement("div");
myDiv.setAttribute("id", "mySpecialDIV");
//console.log("Styled customEntityContainer");
el.appendChild(myDiv);
var myFlatList = [];
var myObject;
for (= 0; i < entity.instances.length; i++) {
myObject = new Object();
myObject.insult = entity.instances[i].attributes[0].value.toString();
myObject.insult_text = entity.instances[i].attributes[1].value.toString();
myObject.insult_score = entity.instances[i].attributes[2].value.toString();
myFlatList.push(myObject);
//console.log(" Flattened the list - item " + i);
}
$("#mySpecialDIV").jsGrid({
width: "80%",
height: "400px",
sorting: true,
paging: true,
pagelndex: 1,
pageSize: 10,
pageButtonCount: 10,
data: myFlatList,
fields: [{
name: "insult",
type: "text",
width: 20,
title: "id"
}, {
name: "insult_text",
type: "text",
width: 150,
title: "text"
}, {
name: "insult_score",
type: "number",
width: 20,
title: "score"
}
],
controller: {
loadData: function (filter) {
return $.grep(myFlatList, function (item) {
return item.insult_score === filter.insult_score
})
}
}
});
//console.log("Finished customEntityContainer");
},
update: function (el) {
var myslidervalue = $("[role*='slider']").attr("aria-valuetext");
$("#mySpecialDIV").jsGrid("search", {
insult_score: myslidervalue
}).done(function () {
//console.log("filtering completed with slider value " + myslidervalue);
});
},
unmount: function (el) {
var myDiv = $("#mySpecialDIV");
myDiv.remove();
//console.log(" Removed the customEntityContainer ");
}
}
}
}
});

So now let’s look at the key elements (don’t forget to download and place jQuery and jsGrid files into your resources folder) :

Line 11 – this should be replaced with the name of your entity (not the text, but the name or XML tag as some call it). We are going to search amongst the entities until we find yours.

Lines 30 to 35 –  the code extracts your entity and pulls out three attributes from the entity. Note of course that these three attributes need to be placed in your Interview Screen, inside the Entity Container, for this data to be available. Essentially the extracted information is made into a JavaScript object, and the object added to an array.

Line 38 – this is the start of the jsGrid code.

Line 47 – this is the definition of the three columns of data in the table and how to display them.

Line 66 – this is the custom filter function which will hide any instances that do not have the selected score.

Line 77 – this is where we obtain the value of the slider and we refresh the table to only show those records using the filter function.

Thanks to the Madrid crew for their suggestions. In the next few days we will look at another Custom Entity Container with JavaScript Extensions example, this time with a dynamic chart using the same principle. Please note as usual that for best results when debugging, use Ctrl+F5 to debug in a decent browser.