According to Wikipedia, “Rich Internet Applications are web applications that have most of the characteristics of desktop applications, typically delivered by way of standards based web browser plug-ins or independently via sandboxes or virtual machines”. I don’t think that this definition does do it any justice – I think that RIA’s are:

  • Applications that offer a visually rich and engaging user interface
  • Applications that offer content richness and useful and diverse functionalities

In other words it has to deliver functionality and it has to do so in an engaging UI – the argument being that such applications will deliver a greater employee productivity and/or customer loyalty. I would certainly vouch for that – go see a demo of SAP Business Explorer to see what I mean (you can even
upload your own data and play around with that).

As a continuation to my experiments in marrying technologies such as Php, Pear & Ajax to query a SAP database and expose the data to a user in a visually appealing form, it seemed only fitting that I would give this RIA thing a shot too. You only need to google terms such as “SAP FLEX” to see that there is
a wealth of information out there on that topic showcasing these two platforms with plenty of whoa factor. Being from a logistics background I thought it would be appropriate to use logistics functions in my examples.

So in this post I’ll be looking at the following scenarios:

  • A sales application using SAP, Flex and Php (http service call method)
  • A production order application using SAP, Flex and Php (http service call method)
  • A sample sales application using SAP and Flex (web service call method)

The tools of choice for my experiments today are:

  • Adobe Flex (which is built on top of Eclipse – the same tool used to build the SAP Developer Studio). Adobe is very generously offering you the chance to download a try-before-you-buy fully functional demo version for 60 days (if you have already have Eclipse or SAP developer Studio you may elect to download the plug-in instead – although I have not tried that).
  • Easyphp which is a nice WAMP (Windows Apache Mysql Php) package that I have been using for years – php in version 5.2.8
  • The SAPrfc extension module for Php
  • Of course SAP. The SAP backend system I’ll be using is a SAP ECC 6.0 system.

In the first two scenarios, I’ll be using php as the go between Flex and SAP.
Essentially the Flex application will call an http service that is a php script to which we’ll be posting some variables. Php will then wrap those variables in an RF call to the SAP backend system. Assuming all goes well, SAP will send a response that needs to be formatted in a xml like structure so that that it can be properly interpreted by the Flex application – again php will take care of that.

echo "<CUSTRECS>n";
		for($i=1; $i<=$ADDRESSDATA ; $i++){
			$DATA = saprfc_table_read ($fce,"ADDRESSDATA",$i);
			echo "<CUSTADR>" . $DATA["STREET"] . "</CUSTADR>n";
			echo "<CUSTCOUNT>" . $DATA["COUNTRY"] . "</CUSTCOUNT>n";
			echo "<CUSTCITY>" . $DATA["CITY"] . "</CUSTCITY>n";
			echo "<CUSTNAME>" . $DATA["NAME"] . "</CUSTNAME>n</CUSTREC>n";
echo "</CUSTRECS>";

will yield an xml response to the Flex application as below,

		<CUSTADR>800 Gardiner Street</CUSTADR>
		<CUSTNAME>Customer domestic 00</CUSTNAME>

and in the Flex script below, on lines 5 and 6, you can see how I’ll be retrieving the customer number (CUSTNUMB) and customer name (CUSTNAME) in my Flex datagrid.

<mx:DataGrid dataProvider="{srv3.lastResult.CUSTRECS.CUSTREC}"
width="368" height="119" y="10" x="10" id="dg1"
change="dgChangeHandler()" dropShadowEnabled="true">
		<mx:DataGridColumn dataField="CUSTNUMB" headerText="Customer Number"/>
		<mx:DataGridColumn dataField="CUSTNAME" headerText="Customer Name" textAlign="left"/>

So, without further adue, below are explanations and swf animations for each process.

A simple sales order application

This application uses multiple http service calls and its key elements are:

  • An http service calling BAPI_CUSTOMER_GETLIST is used to populate one datagrid
  • An http service calling BAPI_MATERIAL_GETLIST is used to populate another datagrid. The product pictures are stored locally on the web server, and the picture filename corresponds to the material number in SAP (eg if the material is called Y126, we have a picture file called Y126.jpg)
  • The user will then pick the customer expected delivery date, the required quantity and indicate a selling price
  • The Order button will then post the data to another http service in order to create the sales order (by calling the FM CREATE_SD_ORDERDAT1) in SAP. If all goes well a response with the sales order number will be issued to the user.

* Note that some values have been hard-coded in the php files (but they could just as well have come from posted variables). Also, the user will be required to type in his SAP credentials (the SAP server information has been hardcoded in the php file, but we are passing the SAP username and password to the script).

Here is a swf example of this application.

A simple production order application

This application uses multiple http service calls and its key elements are:

  • There are two tabs in this application. One tab will show the data in a tabular form whilst the other tab is geared toward delivering the information graphically.
  • An initial http service calling BAPI_PRODORD_GET_LIST is used to populate a datagrid containing production order header details. The response provided by SAP is first interpreted and transformed into xml by Php.
  • The same http service above will not only deliver production order header data, but also aggregated data that will be used to drive some of the charts in the graphical dashboards. All this data is delivered in one xml formatted stream.
  • Whenever a line is selected in the production order header datagrid, it will trigger for another service call to be executed and this time call BAPI_PRODORD_GET_DETAIL in order to retrieve the production order component and operation details.


Here is a swf example of this application.

A very simple production order header report

In this last example, similar to the one above we will consume a web service calling BAPI_PRODORD_GET_LIST and populate the retrieved data in a Flex datagrid – nothing more here – if just to show another method to get the production order header information.

The corresponding Flex Project can be downloaded here. Remember to change your server name and port before using it.

Here is a swf example of this application.

Recommended readings

Rich Internet Application Development on SDN

PHP Development on SDN

Engaging User Interfaces with Adobe Flex
Consuming ABAP Web Services using Flex a hands-on tutorial given by Matthias Zeller, Ed Herrmann, and Dan McWeeney

I hope you find these examples interesting and if you do find them useful and if there is anything you’d like to share, then please do leave a comment.