- SAP Managed Tags:
A little over a year and a half ago I wrote a blog about Creating a custom table in Personas using HTML tables, because Personas didn't support adding tables as a properly supported custom object type. That was in the days of Personas 2. Now Personas 3 is here and there still isn't a custom table object, but we can now do better than the HTML tables described in that blog. Personas 3 scripting is much improved and SAPUI5 has a really nice table type. I previously wrote about Using SAPUI5 charts in Personas Flavours and prompted by gideon.vanzyl's request here is how you add UI5 tables to a Personas flavour.
I'm going to use the same transaction - the Personas 3 migration tool - as I used for the chart example, and I'm building a UI5 table to replace the existing table in that transaction - the same one I built a chart for. The code to read the data from that chart into a JavaScript array is therefore identical, and a straight copy/paste from this wiki page - Copying Table data into a variable. This time, I don't need to filter or summarise the data at all so I'll build the table directly on the "contents" array produced by that code, which is structured like this:
[
{FLAVOR_ID: "9C9FD354F303452BE100000089CDA76F", FLAVOR_NAME: "temp", OWNER: "MASAD", APP_ID: "IW26", STATUS: "IGNORED", …},
{FLAVOR_ID: "9894FC5286F14271E100000089CDA76F", FLAVOR_NAME: "Department Heads", OWNER: "MASAD", APP_ID: "SE38", STATUS: "PROCESS", …},
{FLAVOR_ID: "2D070F53DF372B33E100000089CDA76F", FLAVOR_NAME: "SAP Release", OWNER: "MASAD", APP_ID: "ME23N", STATUS: "PROCESS", …},
{FLAVOR_ID: "7ED8845427A5AC64E100000089CDA770", FLAVOR_NAME: "asug demo", OWNER: "MASAD", APP_ID: "KS03", STATUS: "PROCESS", …},
{FLAVOR_ID: "F1ADB9542D034F23E100000089CDA76F", FLAVOR_NAME: "temp", OWNER: "MASAD", APP_ID: "SM50", STATUS: "PROCESS", …},
....
]
As before we're going to build a string of HTML to send to an HTMLViewer control, and we need to start with the usual boilerplate to load the UI5 libraries:
var tableHTML = '<html> <head<\
<script src="/ui5/1/resources/sap-ui-core.js" \
id="sap-ui-bootstrap" \
data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" \
data-sap-ui-theme="sap_goldreflection"> </script> \
<script>';
Now we build the table object and add the columns we need - we don't need to display in the table all of the columns in the "contents" array, and in fact I don't here:
tableHTML += '\
var oTable2 = new sap.ui.table.Table({ \
title: "Personas 2 migration status", \
visibleRowCount: 15, \
columnHeaderHeight: 30, \
selectionMode: sap.ui.table.SelectionMode.Single, \
}); \
\
oTable2.addColumn(new sap.ui.table.Column({ \
label: new sap.ui.commons.Label({text: "Flavor ID"}), \
template: new sap.ui.commons.TextView().bindProperty("text", "FLAVOR_ID"), \
sortProperty: "FLAVOR_ID", \
filterProperty: "FLAVOR_ID", \
width: "200px" \
})); \
oTable2.addColumn(new sap.ui.table.Column({ \
label: new sap.ui.commons.Label({text: "Flavor Name"}), \
template: new sap.ui.commons.TextField().bindProperty("value", "FLAVOR_NAME"), \
sortProperty: "FLAVOR_NAME", \
filterProperty: "FLAVOR_NAME", \
width: "200px" \
})); \
oTable2.addColumn(new sap.ui.table.Column({ \
label: new sap.ui.commons.Label({text: "Owner"}), \
template: new sap.ui.commons.TextField().bindProperty("value", "OWNER"), \
sortProperty: "OWNER", \
filterProperty: "OWNER", \
width: "200px" \
})); \
oTable2.addColumn(new sap.ui.table.Column({ \
label: new sap.ui.commons.Label({text: "Transaction"}), \
template: new sap.ui.commons.TextField().bindProperty("value", "APP_ID"), \
sortProperty: "APP_ID", \
filterProperty: "APP_ID", \
width: "200px" \
})); \
oTable2.addColumn(new sap.ui.table.Column({ \
label: new sap.ui.commons.Label({text: "Status"}), \
template: new sap.ui.commons.TextField().bindProperty("value", "STATUS"), \
sortProperty: "STATUS", \
filterProperty: "STATUS", \
width: "200px" \
})); \
';
All of the columns here are simple text fields, but you can of course use any of the available types - checkboxes, etc - where appropriate.
Next we create a data model and bind the table to it:
//Create a model and bind the table rows to this model
tableHTML += 'var oModel2 = new sap.ui.model.json.JSONModel(); \
oModel2.setData({modelData: ' + JSON.stringify(contents) + '}); \
oTable2.setModel(oModel2); \
oTable2.bindRows("/modelData"); \
';
Finally, we place the table control on the page and finish off with the usual HTML, and of course send all this HTML to the HTMLViewer control:
tableHTML += 'oTable2.placeAt("content");';
tableHTML += '</script>';
tableHTML += '</head>';
tableHTML += '<body class="sapUiBody" supportedthemes="sap_corbu" role="application">';
tableHTML += '<div id="content"> </div>'
tableHTML += '</body></html>';
session.findById("wnd[0]/usr/htmlViewerPersonas_1447866610072").content = tableHTML;
After editing the screen to remove the original table and add a suitably sized HTMLViewer control and running this script, you end up with a screen like this:
This gives you the usual UI5 sorting and filtering capabilities when clicking on the column headings. And, of course, UI5 tables have many more capabilities than this, including fixed initial columns, different column types, and much more. This example is placing a table on the same screen as the data, and in this case the original data is in a nice table already so there's not a lot of point. There's no reason, though, why you can't create the UI5 table on a different screen. That's exactly the scenario I originally wanted in my "HTML tables" blog - copying a table from one screen to another. This is a much nicer looking solution for that scenario.
For the moment this table is "read only". There's no way to interact with it to enter or change data, or to trigger events when rows or cells are selected. I think at least some sort of interaction is possible but I haven't got it working yet. A blog will follow in due course if/when I make it work!
18 Comments
