Personas v3, JavaScript and tables

Peter Spielvogel is doing a great job of covering the basic JavaScript skills you need to write Personas scripts in version 3 with the same level of functionality as scripts in version 2. I thought I’d start a series covering things that you couldn’t do in version 2, or couldn’t do easily, that version 3 makes possible or easier. I’m going to start with something I managed to get working in version 2, but only just – custom tables. Version 3 still doesn’t have a custom table object, and so you still have to manually copy and paste the table contents. In version 3, though, you can build an HTML table to display in the HTML viewer object, rather than my separate grid of custom text fields, and having JavaScript as the scripting language makes the copy and paste operations much easier.

I’m going to build this on SMEN, after having first hidden the menu and rippling pond and then added an HTMLviewer object and a script button labelled “Refresh”. The table I’m going to copy this time is the work process list from SM50, just because that’s something everyone will have available and so it makes a good demo. The final screen looks like this:

Note, I’ve made no attempt to provide any pretty formatting for the table – this is as basic as it gets! The table has more columns than will fit in the viewer and so there’s automatically a horizontal scrollbar. If there were also more rows, you’d get a vertical scrollbar too.

Let’s go through the script in smallish chunks. First we need to navigate to SM50 and grab a reference to the table of work processes.

session.startTransaction(“SM50”);

var selectedTable = session.findById(“wnd[0]/usr/cntlGRID1/shellcont/shell/shellcont[1]/shell”);

var columnNumbers = selectedTable.columns.length;

var rowNumbers = selectedTable.rowCount;

First notice the session object, which contains lots of methods for interacting with the backend system and objects on the screen. Our first use of it is to call the startTransaction method to run SM50. Next we use the findById method to get a reference to the table object on the screen. Also here we’re using variables to hold the dimensions of the table as well as the reference to the table object. We’ll need all of those for step 2 – copying the data from the table.

// Now loop through the table and copy the contents to a standard JavaScript array.

// Note that the screen table is accessed in a column oriented fashion, like HANA:-)

// Here the copy is built the same way, although we could swap rows and columns during the

// copy to get a more natural JavaScript array.

var currentColumn = 0;

var currentRow = 0;

var table= new Array();

for(currentColumn = 0; currentColumn<columnNumbers; currentColumn++) {

table[currentColumn] = new Array();

table[currentColumn][0] = selectedTable.columns.elementAt(i).title;

for(currentRow = 0; currentRow<rowNumbers; currentRow++) {

table[currentColumn][currentRow+1] = selectedTable.getCellValue(currentRow, selectedTable.getColumnId(currentColumn));

}

}

This code uses JavaScript’s looping ability to iterate through all the cells of the screen table and copy them to a separate JavaScript array. Note that JavaScript arrays are one-dimensional – just a single list of values. To create a two dimensional table you create an array of arrays. You can find more details of JavaScript arrays and how they work here.

So now we have a copy of the data in the table on the screen we need to head back to SMEN. That’s easy – just push the “Back” button.

session.findById(“wnd[0]/tbar[0]/btn[3]”).press();

Finally, we need to create the HTML table and display it in the HTMLViewer control.

var htmlTable;

htmlTable = “<table border=1>”;

for(currentRow = 0; currentRow <= rowNumbers; currentRow++) {

htmlTable += “<tr>”;

for(currentColumn = 0; currentColumn < columnNumbers; currentColumn++) {

htmlTable += “<td>”;

htmlTable += table[currentColumn][currentRow];

htmlTable += “</td>”;

}

htmlTable += “</tr>”;

}

htmlTable += “</table>”;

// Finally, send the table to the HTML viewer

session.findById(“wnd[0]/usr/htmlViewerPersonas_14”).content = htmlTable;

We’re using loops again to run through all the columns and rows of the copied data and construct a string of HTML to display that data in a table. String concatenation in JavaScript is done simply with the + operator (the JavaScript + operator adds numbers but concatenates strings). In the code above I use the “assignment operator” += to append to the existing string value. Finally note that the usual way to use the HTML Viewer object is to assign to its “url” property to set the URL being displayed, but you can also set the “content” property to directly provide the HTML.

I’m doing nothing fancy with the formatting of the table or the data here – for details of how HTML tables work and some of the formatting you can apply to them, read this. I’m also making no effort to process any HTML special characters (like “<“, for example). The complete script is attached to this blog post as “table_copy.txt”. Paste it into the script editor and then assign the script to the “Refresh” button to complete the process.

This is obviously a display-only table. Constructing something that responds to mouse input – double-click on a cell to cause an action of some sort – or that allows input, will require further experimentation 😉 . Still, this simple table copy might be useful in some circumstances, and it does demonstrate some of the power you get from having JavaScript as the scripting language in Personas version 3. It should be possible to make this easier to use by wrapping it in a JavaScript object and hiding all of the nasty code in simple methods. JavaScript’s object orientation certainly has the potential to make complex scripting easier to manage. Maybe that will be my next blog? 🙂