Skip to Content
Author's profile photo Former Member

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.

!https://weblogs.sdn.sap.com/weblogs/images/251700222/Structure.jpg|height=197|alt=Structure|width=568|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/Structure.jpg|border=0!

h5. Function

Create a new function module in SE37, name it: ‘Z_IPHONE_STATS_DISPL’. 

!https://weblogs.sdn.sap.com/weblogs/images/251700222/function1.jpg|height=151|alt=|width=433|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/function1.jpg|border=0!

!https://weblogs.sdn.sap.com/weblogs/images/251700222/function2.jpg|height=150|alt=|width=434|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/function2.jpg|border=0!

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

tags, a

tag,

, …

We can transport values of certain parameters through the query string. In the next page we define these parameters as page attributes and check the ‘auto’ flag.

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


 


Select


Select


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.

!https://weblogs.sdn.sap.com/weblogs/images/251700222/sicf1.jpg|height=255|alt=|width=437|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/sicf1.jpg|border=0!

Double click on the deepest node.

!https://weblogs.sdn.sap.com/weblogs/images/251700222/sicf2.jpg|height=166|alt=|width=566|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/sicf2.jpg|border=0!

!https://weblogs.sdn.sap.com/weblogs/images/251700222/sicf3.jpg|height=364|alt=|width=545|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/sicf3.jpg|border=0!

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:

!https://weblogs.sdn.sap.com/weblogs/images/251700222/structure.jpg|height=233|alt=|width=338|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/structure.jpg|border=0!

Your iPhone Application should look like this:

!https://weblogs.sdn.sap.com/weblogs/images/251700222/result1.jpg|height=313|alt=|width=214|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/result1.jpg|border=0 !https://weblogs.sdn.sap.com/weblogs/images/251700222/result2.jpg|height=346|alt=|width=229|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/result2.jpg|border=0
 !https://weblogs.sdn.sap.com/weblogs/images/251700222/result3.jpg|height=320|alt=|width=214|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/result3.jpg|border=0!  !https://weblogs.sdn.sap.com/weblogs/images/251700222/result4.jpg|height=323|alt=|width=214|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/result4.jpg|border=0!
 !https://weblogs.sdn.sap.com/weblogs/images/251700222/result5.jpg|height=281|alt=|width=230|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/result5.jpg|border=0!   !https://weblogs.sdn.sap.com/weblogs/images/251700222/result6.jpg|height=213|alt=|width=215|src=https://weblogs.sdn.sap.com/weblogs/images/251700222/result6.jpg|border=0!

 

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.

 

 

 

 

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member
      Steven,

      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

      Author's profile photo Former Member
      Former Member
      Well, this is indeed a BSP application existing of some HTML and ABAP code.
      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.
      Author's profile photo Former Member
      Former Member
      Blog Post Author
      I agree with my collegue.
      Author's profile photo Alessandro Spadoni
      Alessandro Spadoni
      Hi ,

      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

      Author's profile photo Former Member
      Former Member
      Blog Post Author
      Hi 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.

      Author's profile photo Alessandro Spadoni
      Alessandro Spadoni
      Hi Steven,
      thanks for your reply;

      I started to work in this direction

      Alessandro

      Author's profile photo Former Member
      Former Member

      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