(SDK) Pulling a Design Studio Result Set into a SAP UI5 Table
I recently came across a customer who wants to use a Design Studio result set into a custom table component, but wanted the result set as an array, instead of a JSON. Those of you who have played around with the Design Studio SDK have probably encountered the two different kinds of result sets before. The first kind comes into play when the designer is asking for a subset of the result set (e.g. a single column), she gets two files back; one with the metadata structure and the second with the actual data. The second kind of result set comes when the designer asks for the entire result set. It combines both into different forks in the same JSON structure.
reformatIntoSimpleTuples() takes two parameters:
- zenResultSetJSON = the result set that you wish to transform. It must be of the single JSON result set type as described in the Design Studio developers’ Guide.
- displayType = the display type (‘key’ or ‘text’) that you wish to use. You fill your result set tuple list with either key or text values.
reformatIntoSimpleTuples() holds most of its variables in the local scope. It creates two in the global scope for use in other places:
- headerTuple compresses the (potentially) multi-leveled header into a single header line, with the stacked text concatenated into each cell.
- rowTuples contains each row with the following format: [row measure members1, rmm2, …, rmmN, row dimension members1, rdm2, …, rdmN, data1, data2, …, dataN]
So a the headers of a result set that looks like this:
|Q1 2014||Q2 2014|
Would be transformed to this headerTuple: [“”, “Sales Q1 2014”, “Cost Q1 2014”, “Sales Q2 2014”, “Cost Q2 2014”]
Also included in the github repo are two sample files to demonstrate the function in action.
- entureResultset.js contains an example result set; what resultset being fed to a Design Studio SDK component might look like.
- html5.html is an example html file, with an SAP UI5 table. The html file’s script calls reformatIntoSimpleTuples(), using the sample data from entureResultset.js and puts that data into the UI5 table.