Simple BSP iPhone Monitor for SAP PI
Summary
This blog is about how you can display a minor version of SAP PI’s monitor on the iPhone.
We will not use the given SDK from Apple, instead we’ll just create a BSP Application.
To get a nice iPhone look & feel, we simply use a user interface called IUI. More details about this framework in the next section.
h4. Framework
As explained before, we’ll use IUI . It is an open source framework consisting of a JavaScript library, CSS file and a bunch of images. In combination with that we’ll also use SpinningWheel.js. To integrate the one in the other we based us on Technetra’s Countdown iPhone Webapp.
The framework makes use of AJAX technology.
The files we’ll use are included in this .zip file. Include these files and folders into the MIME repository from the BSP.
Via transaction SE80 we create a new BSP application.
h4. ABAP Objects
Structure
In SE11 we’ll create a structure called ZPI_IPHONE_MONITOR.
h5. Function
Create a new function module in SE37, name it: ‘Z_IPHONE_STATS_DISPL’.
FUNCTION z_iphone_stats_displ.
*”—-
““Local Interface:
*” EXPORTING
*” VALUE(MSGSUCCESS) TYPE INT4
*” VALUE(MSGFAILED) TYPE INT4
*” TABLES
*” MSGFAILED_T STRUCTURE ZPI_IPHONE_MONITOR OPTIONAL
*” MSGSUCCESS_T STRUCTURE ZPI_IPHONE_MONITOR OPTIONAL
*”—-
DATA: lt_messages TYPE TABLE OF zpi_iphone_monitor WITH HEADER LINE.
DATA: lv_iphoneRow TYPE zpi_iphone_monitor.
SELECT sxmspemasmsgguid sxmspemasob_system sxmspemasob_name sxmspemasib_system sxmspemas~ib_name
sxmspmast~msgstate
sxmspmast~exetimest
UP TO 200 ROWS
FROM sxmspemas JOIN sxmspmast ON sxmspemasmsgguid = sxmspmastmsgguid
INTO CORRESPONDING FIELDS OF lv_iphoneRow
ORDER BY sxmspmast~exetimest DESCENDING.
DATA: lv_timestamp TYPE string.
lv_timestamp = lv_iphoneRow-exetimest.
DATA: lv_fixedDate TYPE string.
lv_fixedDate = lv_timestamp(8).
IF lv_fixedDate EQ sy-datum.
APPEND lv_iphoneRow TO lt_messages.
ENDIF.
ENDSELECT.
LOOP AT lt_messages.
IF lt_messages-msgstate EQ ‘003’.
“Goed
msgsuccess = msgsuccess + 1.
APPEND lt_messages TO msgsuccess_t.
ELSE.
“Slecht
msgfailed = msgfailed + 1.
APPEND lt_messages TO msgfailed_t.
ENDIF.
ENDLOOP.
ENDFUNCTION.
h5. Class
In SE24 create a class ‘ZCL_GRAPH_MSG_DISPL’ add the interfaces:
- IF_GRAPH_DATA_MODEL
Edit the method: ‘IF_GRAPH_DATA_MODEL~GET_DATA_XML’.
append_child( new_child = l_root_element ).
- create category xml
l_categories_element = l_document->create_simple_element( parent = l_root_element name = ‘Categories’ ).
LOOP AT l_category_data_tab INTO l_category_name.
l_c_element = l_document->create_simple_element( parent = l_categories_element name = ‘C’ value = l_category_name ).
ENDLOOP.
- create series 1 xml
l_series_1_element = l_document->create_simple_element( parent = l_root_element name = ‘Series’ ).
l_tooltip = ‘title=’.
CONCATENATE l_tooltip l_apostrophe l_series_1_data-tooltip l_apostrophe INTO l_tooltip.
l_series_1_element->set_attribute( name = ‘extension’ value = l_tooltip ).
l_series_1_element->set_attribute( name = ‘label’ value = l_series_1_data-label ).
LOOP AT l_series_1_data-point_data INTO l_point_data.
l_s_element = l_document->create_simple_element( parent = l_series_1_element name = ‘S’ value = l_point_data-value ).
l_tooltip = ‘title=’.
CONCATENATE l_tooltip l_apostrophe l_point_data-tooltip l_apostrophe INTO l_tooltip.
l_s_element->set_attribute( name = ‘extension’ value = l_tooltip ).
ENDLOOP.
l_ostream = l_ixml_sf->create_ostream_xstring( xml ).
l_document->render( ostream = l_ostream ).
Save and activate the class. We will use this class to generate an XML. This XML contains the data for the graphic on the page.
h4. Pages
How does IUI work?
Well, basically you’ll have your HTML page with a structure like this:
The next pages are only a snippet of a HTML page, for example:
The page can start with
h5. Index.htm
Layout
<p><textarea cols=”80″ rows=”6″><%@page language=”abap” %>
<%@extension name=”graphics” prefix=”graphics” %>
<html manifest=”pi.manifest”>
<head>
<title>PI Monitor</title>
<link rel=”apple-touch-icon” href=”icon.png”/>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>
<meta name=”apple-mobile-web-app-capable” content=”yes”/>
<link rel=”stylesheet” href=”iui/iui.css” type=”text/css” media=”all”/>
<link rel=”stylesheet” href=”spinningwheel/spinningwheel.css” type=”text/css” media=”all”/>
<link rel=”stylesheet” href=”pi.css” type=”text/css” media=”all”/>
<script type=”text/javascript” src=”iui/iui.js”></script>
<script type=”text/javascript” src=”pi.js”></script>
<script type=”text/javascript” src=”spinningwheel/spinningwheel.js”></script>
</head>
<body>
<div class=”toolbar”>
<h1 id=”pageTitle”></h1>
Graphs
Select filter
Statistics today
<fieldset>
<a href=”index2.htm?ErrorFilter=X&Type=MSGSuccess”>
<div class=”row”>
<label>Success MSG:</label>
<div class=”statResult”><%= msgsuccess %></div>
</div>
</a>
<a href=”index2.htm?ErrorFilter=X&Type=MSGFailed”>
<div class=”row”>
<label>Failed MSG:</label>
<div class=”statResult”><%= msgfailed %></div>
</div>
</a>
</fieldset>
<div align=”center”>
* event handler for data retrieval
CALL FUNCTION ‘Z_IPHONE_STATS_DISPL’
- EXPORTING
- STARTDATE =
- ENDDATE =
IMPORTING
MSGSUCCESS = msgsuccess
MSGFAILED = msgfailed
.</textarea></p>h5. Index2.htm
Layout
<p><textarea cols=”80″ rows=”6″> <ul title=”PI Monitor” selected=true id=”MonitorBase”>
<% data lt_messages_temp2 type ZPI_IPHONE_MONITOR.
loop at lt_messages into lt_messages_temp2. %>
<li>
<a href=”detail.htm?OB_SYSTEM=<%= lt_messages_temp2-OB_SYSTEM %>&ITFNAMEO=<%= lt_messages_temp2-OB_NAME %>&IB_SYSTEM=<%= lt_messages_temp2-IB_SYSTEM %>&ITFNAMEI=<%= lt_messages_temp2-IB_NAME %>”>
<% data erdat type string.
erdat = lt_messages_temp2-EXETIMEST.
data: year(4) type c,
month(2) type c,
date(2) type c.
year = erdat(4).
month = erdat+4(2).
date = erdat+6(2).
data ertim type string.
ertim = lt_messages_temp2-EXETIMEST.
data: hh(2) type c,
mm(2) type c,
ss(2) type c.
hh = ertim+8(2).
hh = hh + 1.
mm = ertim+10(2).
ss = ertim+12(2).
data: dateAndtime type String.
CONCATENATE date ‘.’ month ‘.’ year ‘ – ‘ hh ‘:’ mm ‘:’ ss INTO dateAndtime.
%>
<div width=”100%” align=”Center”><font size=”2″ color=”#666666″><%= dateAndtime %></font></div>
<div width=”100%” id=”detail”>
<div id=”msg”>
MSG:
<% IF lt_messages_temp2-MSGSTATE eq ‘003’. %>
<% else. %>
<% ENDIF. %>
</div>
<div id=”sender”>
<%= lt_messages_temp2-OB_SYSTEM %>
</div>
<div id=”receiver”>
<%= lt_messages_temp2-IB_SYSTEM %>
</div>
</div>
</a></li>
<% endloop.
IF sy-subrc NE 0.
%>
<LI>
No messages.
</LI>
<%
ENDIF.
%>
</ul></textarea></p>h6. Type Definitions
<p>!https://weblogs.sdn.sap.com/weblogs/images/251700222/typesdefinitions.jpg|height=59|alt=|width=501|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/typesdefinitions.jpg|border=0!</p><p>We’ll create the type iphone based on the structure ZPI_IPHONE_MONITOR.</p>h6. Page Attributes
Events
<textarea cols=”80″ rows=”6″>* event handler for data retrieval
DATA: lv_iphonerow TYPE zpi_iphone_monitor.
DATA: lv_timestamp TYPE string.
DATA: lv_fixeddate TYPE string.
IF strlen( end ) EQ 7.
CONCATENATE end(6) ‘0’ end+6(1) INTO end.
ENDIF.
IF strlen( start ) EQ 7.
CONCATENATE start(6) ‘0’ start+6(1) INTO start.
ENDIF.
IF errorfilter IS INITIAL.
IF end IS NOT INITIAL AND start IS NOT INITIAL.
SELECT sxmspemasmsgguid sxmspemasob_system sxmspemasob_name sxmspemasib_system sxmspemas~ib_name
sxmspmast~msgstate
sxmspmast~exetimest
UP TO 200 ROWS
FROM sxmspemas JOIN sxmspmast ON sxmspemasmsgguid = sxmspmastmsgguid
INTO CORRESPONDING FIELDS OF lv_iphonerow
ORDER BY sxmspmast~exetimest DESCENDING.
lv_timestamp = lv_iphonerow-exetimest.
lv_fixeddate = lv_timestamp(8).
IF lv_fixeddate <= end AND lv_fixeddate >= start.
APPEND lv_iphonerow TO lt_messages.
ENDIF.
ENDSELECT.
ELSE.
SELECT sxmspemasmsgguid sxmspemasob_system sxmspemasob_name sxmspemasib_system sxmspemas~ib_name
sxmspmast~msgstate
sxmspmast~exetimest
UP TO 200 ROWS
FROM sxmspemas JOIN sxmspmast ON sxmspemasmsgguid = sxmspmastmsgguid
INTO CORRESPONDING FIELDS OF lv_iphonerow
ORDER BY sxmspmast~exetimest DESCENDING.
lv_timestamp = lv_iphonerow-exetimest.
lv_fixeddate = lv_timestamp(8).
IF lv_fixeddate EQ sy-datum.
APPEND lv_iphonerow TO lt_messages.
ENDIF.
ENDSELECT.
ENDIF.
ELSE.
CASE type.
WHEN ‘MSGFailed’.
CALL FUNCTION ‘Z_IPHONE_STATS_DISPL’
TABLES
msgfailed_t = lt_messages.
WHEN ‘MSGSuccess’.
CALL FUNCTION ‘Z_IPHONE_STATS_DISPL’
TABLES
msgsuccess_t = lt_messages.
ENDCASE.
ENDIF.</textarea>
detail.htm
Layout
<textarea cols=”80″ rows=”6″><ul title=”Details” selected=”true” id=”Details”>
<li class=”group”>Outbound</li>
<li class=”group2″>Sender system</li>
<li><%= OB_SYSTEM %></li>
<li class=”group2″>Sender interface</li>
<li><%= ITFNAMEO %></li>
<li class=”group”>Inbound</li>
<li class=”group2″>Receiver system</li>
<li><%= IB_SYSTEM %></li>
<li class=”group2″>Receiver interface</li>
<li><%= ITFNAMEI %></li>
</ul></textarea>
Type Definitions
None
h6. Page Attributes
Events
None
h4. Default User
Go to tcode: SICF.
Execute with Service name, the name of your BSP Application.
Double click on the deepest node.
In the tab “Logon Data” you can specify a default user by providing the username and password.
h4. Result
At the end, your structure should look like this:
Your iPhone Application should look like this:
Make sure your iPhone is connected to the network where the PI server is hosted. If a VPN connection is required you can easily set it up via your network settings on the iPhone.
Nice Blog, I have a couple of questions..
This is more of an HTML page, and i suppose we can wrap it in Obj C Api`s to create a full fledged App.
How can we deal with the issue of data privacy when living in an SAP World when all data that goes through an App goes through the Apple data Store.
Can you think of an alternative to this and how to enable ssl within an APP.
That would really help moving SAP applications onto the IPhone.
Regards
Ravi Raman
So it is basically a web application with a native behavior.
As security is a very important subject, we have chosen for a VPN connection & HTTPS. To ensure that everything is transmitted in a correct and save way.
If you want an native iPhone application, you’ll have to program this in Objective C.
This is just a simple example on how the iPhone can connect with the SAP backend.
There are just so many other possibilities but you have to be sure that it is secure since you are working with confidential data.
great job
I would like to develop something similar (not PI) and i found this blog linked from SDN forum.
I think it might be a good solution to develop an application for iphone without using native apple apps (Objective C , SDK apple , ecc..) and using powerful framework as iui (and iwebkit?)
But i have not tried it yet because i wanted to see if BSP in webapps Iphone context it's a good solution
What is your experience about Safari webapp with BSP?
thanks in advance
Alessandro
My experience with Safari and BSP is quite good.
Since Safiri is just a web browser and the BSP actually is made of html. We don't face any problems.
thanks for your reply;
I started to work in this direction
Alessandro
I know this is only tangentially related but one of the issue with BSP applications is that SAP adds the session ID to the URL causing bookmarking issues. I'd really appreciate it if anyone knows a way around this (i.e. cookie based sessions):
http://scn.sap.com/thread/3200355
Thanks
Marc