Custom Entity Container JavaScript Extension Example #3

Custom Entity Container JavaScript Extension Example #3

By now most of you will have realised that as far as JavaScript goes, I am a bit of a generalist. As one wise person once put it “the kind of person who can code themselves into a mess but not out of one”. I learn by exploring and doing. I’ve been “doing” for a long time (I started with a ZX 81 and pretty much kept mucking about from there). My first ever big IT project was replacing IBM 5520 word processors with Windows 3, Word and a custom application written using Visual Basic.  I get kind of obsessive about understanding the “big picture” without necessarily wanting to have every detail. And so it is with Custom Entity Container JavaScript Extension Example #3.

All that to explain what I have mentioned before : everything in relation to JavaScript which I offer to you here is purely for entertainment or educational purposes : many times I have to sketch out a need or specification, and what you see on this blog relating to Oracle Policy Automation JavaScript extensions is just the results of some head-scratching or an idea that I have needed to show to someone more technical than myself to be “tidied up” (a.k.a professionalized).

The reason I mention it is because I often work in Siebel CRM (visit www.siebelhub.com the other site in this family) and JavaScript is a big part of moving forward with Siebel too. So I get to mix and match. Today I found myself looking at the two previous incarnations of the Custom Entity Container JavaScript Extension Example #3 (#1, #2) and thinking “this looks like a List Applet in Siebel”. So I decided to place the layout of the custom entity list in the hands of jQuery and jsGrid. Siebel CRM actually uses jqGrid but I needed something very lightweight for this example requirement, so jsGrid was a better choice. Of course I needed minified jQuery as well.

My goal is to make this a fairly simple routine to present instances of an inferred entity. So the code for the jsGrid looks very minimalist. It basically takes the for..each loop and extracts the two attributes from the array created in Custom Entity Container JavaScript Extension Example #2, and then passes that to jsGrid as a flattened dataset without the attribute child nodes. I also set up the grid to only have two columns, and no editing (since this is an inferred entity). I set the page size and the size of the actual space taken up by the entire list:

Custom Entity Container JavaScript Extension Example #3

  1. The loop creates a flattened data structure just right for jsGrid
  2. The data is passed to the jsGrid
  3. The column headers are sized appropriately

The end result is rather nice, smooth scrolling (not in the Debugger, only in Ctrl+F5 debugging in a modern browser).

Custom Entity Container JavaScript Extension Example #3

 

Now that’s what I call a list! Using the jsGrid library gives me (and the reader) the added bonus of scrolling or jumping using the paging links at the bottom of the list. Cool!

As ever this is available from the OPA Hub Shop, look out for Custom Entity Container JavaScript Extension Example #3 in the product list.