Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
In my first blog about Using SAPUI5 charts in Personas Flavours the example I gave was the Personas 2 migration tool, just because I'd been using that a lot recently. Here's a business example, visualising credit exposure vs credit limit when creating a sales order in VA01. First here's how it works:
Once the mandatory fields are completed - sold-to party and PO number - you get a chart showing the customer's credit exposure (outstanding orders & invoices) against their credit limit. As I enter line items you'll see the current order value added to the credit exposure column, in a contrasting colour. If the current order value + credit exposure exceeds the credit limit, first you get the standard warning from SAPgui, but also notice that the chart colour changes to give a visual indication.
The basic process here is the same as before - first collect the data, then build it into a suitable data model and finally build a chart on that data. The chart this time is a StackedColumn chart.
Collecting the data is easy this time - there are no tables to grab it from. The current order value is right at the top of VA01 main screen and the credit limit/exposure data comes from the screen you get to via the menu path "Environment->Partner->Display credit account".
// Value of current order
var orderValue = parseFloat(session.findById("wnd[0]/usr/subSUBSCREEN_HEADER:SAPMV45A:4021/txtVBAK-NETWR").text.replace(",", ""));
var creditLimit = parseFloat(session.findById("wnd[0]/usr/txtKNKK-KLIMK").text.replace(",", ""));
var creditExposure = parseFloat(session.findById("wnd[0]/usr/txtRF02L-OBLIG").text.replace(",", ""));
And now start writing the HTML, with the usual boilerplate header and code to build the data model. This is pretty much the same as my previous example.
// Need a sorter to get the chart columns in the right order
chartHTML += ' var oSorter = new sap.ui.model.Sorter("Source", true);'
// A Dataset defines how the model data is mapped to the chart
chartHTML += 'var oDataset = new sap.viz.ui5.data.FlattenedDataset({\
dimensions : [ \
{\
axis : 1, \
name : "Type", \
value : "{Type}"\
}, \
{\
axis: 2, \
name: "Source", \
value: "{Source}"\
}\
],\
measures : [ \
{\
name : "Value", \
value : "{Value}" \
}\
],\
data : {\
path : "/businessData", \
sorter: oSorter \
}\
});';
Finally build the chart. Again, this is pretty much the same as the previous example, with a small tweak to change the column colours where appropriate:
// Set the colour for the "this order" column based on exposure + order value
if(creditExposure + orderValue < creditLimit ) {
thisOrderColour = "#9a9a08";
} else {
thisOrderColour = "#b4153a";
}
Don't forget in the screen editor to add an HTMLViewer control to hold the HTML, and to update the last line above with the correct ObjectID. Finally, in the editor assign this script to the "onAfterRefresh" screen event and the chart will then refresh each time to make a change to the line item details.
Right at the top I mentioned that there are a couple of mandatory fields - sold-to party and PO number. If there is no data in those fields then you can't navigate to the credit account screen and the above script will fail. The whole thing therefore need to be protected with a test for values in those fields:
var customer = session.findById("wnd[0]/usr/subSUBSCREEN_HEADER:SAPMV45A:4021/subPART-SUB:SAPMV45A:4701/ctxtKUAGV-KUNNR").text;
var PONumber = session.findById("wnd[0]/usr/subSUBSCREEN_HEADER:SAPMV45A:4021/txtVBKD-BSTKD").text;
var chartHTML;
if(!customer || !PONumber) {
chartHTML = '';
} else {
// The rest of the script from above...
}
This seems like a nice little addition to VA01 screen, providing easy to interpret visual feedback about credit data, and wasn't too hard to build. I'm sure there must be many more examples of business transactions that would benefit from this sort of addition. Feel free to make suggestions in the comments!
[ PS. For some reason I couldn't figure out how to use the "Type" values - "Credit Exposure" and "Credit Limit" - as labels for the two columns on the x axis. If anyone can help me with that, do please let me know how :smile: ]
