Building RIA’s using SAP, Flex and Php

Posted on July 20, 2009 | Category: PHP, SAP

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 "<CUSTREC>\n<CUSTNUMB>" . $DATA["CUSTOMER"] . "</CUSTNUMB>\n";
			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,

<CUSTRECS>
	<CUSTREC>
		<CUSTNUMB>0000100000</CUSTNUMB>
		<CUSTADR>800 Gardiner Street</CUSTADR>
		<CUSTCOUNT>AU</CUSTCOUNT>
		<CUSTCITY>Darwin</CUSTCITY>
		<CUSTNAME>Customer domestic 00</CUSTNAME>
	</CUSTREC>
</CUSTRECS>

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:columns>
		<mx:DataGridColumn dataField="CUSTNUMB" headerText="Customer Number"/>
		<mx:DataGridColumn dataField="CUSTNAME" headerText="Customer Name" textAlign="left"/>
	</mx:columns>
</mx:DataGrid>

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.

» Filed Under PHP, SAP

9 Responses to “Building RIA’s using SAP, Flex and Php”

1. Euler Sánchez G. Says:
   July 25th, 2009 at 9:23 am

   Hi, Pascal, very interesting your article about RIA, and in this case using SAP and PHP, but, can you comment what do you think about Portal SAP?, i think that it is a poweful tool to develop rich internet applications, and in some cases more flexible but not at all, what do you think?

2. renet@web Says:
   July 25th, 2009 at 2:09 pm

   Hi Euler,
   Thanks for the question, but unfortunately I do not have enough experience with SAP portal to give you a good answer. Sorry.

3. Rahmadi Says:
   July 26th, 2009 at 9:09 am

   Hi, Pascal/Admin
   I’m a Flex Beginner and looking for sample flex database application. Your Sample very Interting. Please share me?

4. Euler Sánchez G. Says:
   July 27th, 2009 at 11:16 am

   Hi Pascal, dont worry about that, here’s another question for you, using PHP, PEAR, AJAX, SAP data, a kind of chat in order to give attention to some key customers, do you think that one application whit all this tools, is consider a RIA? i mean i didnt use flex, and in my development, i dont show any kind of graphic, what dou tou think?

5. Gopal Nair Says:
   November 18th, 2009 at 9:06 am

   Hi,
   I develop RIA applications with SAP as the backend. I would like to point out that SAP itself provide technologies like Business Server Pages (BSP), which an be used to do exactly what PHP is doing in this example. Using the BSP layer has the added advantage of NOT using RFC calls, as the execution happens directly inside the SAP box, and we avoid an additional layer.

   However, in situations where there are multiple sources of data, this architecture of using PHP as the middleman is the way to go… just my thought.

6. renet@web Says:
   December 15th, 2009 at 10:43 pm

   Hi Gopal,
   Thanks for your comment.
   You are probably right, but this is just something I tried in my spare time and also my knowledge in BSP is close to 0.
   Thanks again.

7. Mustafa YILMAZ Says:
   December 18th, 2010 at 11:05 am

   Hi,

   Thanks for sharing these useful and innovative information.

   The files of the Flex Project at the link you have shared can not be used in builder (flex). As I see, files do not contains anything.

8. Mustafa YILMAZ Says:
   December 21st, 2010 at 8:49 pm

   Hi to all once again,

   It seems that was my own mistake about the issue that I’ve told in the message above. I could achieve to import the project files into the builder but this time I’m facing with a never ending flex loading (process) bar on the browser when I try to run the project.

   Thanks in advance for responses.

   Mustafa

9. Pascal Says:
   December 30th, 2010 at 4:00 pm

   Hi Mustafa,
   Thanks for the comments.
   Unfortunately it’s difficult to say since it works on fine on mine.
   Did you remember to change the code in the flex application to point to your service?
   Cheers.

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website