All of the above are the SAP backed, "official" way of doing things. I've dealt with them with varying degrees of success, and they all have their own merits.
However...
The oft-overlooked and humble BSP is capable of serving up Web Pages.
guess what... your mobile phone can consume Web Pages...
Can you see where I'm going with this?
The problem with this approach thus far is that the HTMLb language that SAP uses in BSPs looks pretty crap on a mobile...
This is where jQuery comes in. jQuery is a library you can either download or just dynamically refer to (i.e. point your webpage at another webpage where the javascript lives).
This does some good stuff - it adjusts screen sizes, handles orientation changes, has some nice wizzy animations and generally behaves like you'd hope.
I've written a demo which works quite happily in BSP (albeit with harcoded data) and looks nice on both desktop and mobile. With a little extra work, it could be plumbed in to the backend...
Here are some screenshots from both desktop and mobile :
Desktop jQuery table :
And in landscape mode:
Note the nice thing about this is that the table in portrait mode knows that the table is too wide to be sensibly output, and so displays it as a list. jQuery also gives you nice collapsible containers:
which you can nest if you want to:
And then you've got dropdown lists and forms...
The code for this is here : it's a little clumsy in that all the sub-screens are contained in the main BSP's html, and is an obvious case for some sub-division / segregation, but it does demonstrate a way of neatly getting a desktop/phone consistent application.
And if you're lucky enough to have a webdispatcher courtesy of your friendly BASIS team. then you can access your newly minted BSP from Starbucks... otherwise you'll need to navigate to the BSP address on your mobile phone (stick it as a bookmark before you forget) whilst connected to the same Wifi LAN that your SAP Server is on. This may or may not be an issue for you, depending on how "Mobile" you need your "App" (read web page served from a SAP Server) to be.
I was surprised at how quick it was to pick up (thanks again W3Schools!) and how pretty it looked with so little effort...
Here's the code, all 400 lines of it...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="callslist">
<div data-role="header">
<h1>Edenhouse CRM Report</h1>
</div>
<%-- <div data-role="main" class="ui-content">
<p>2Edenhouse CRM Report</p>
</div>--%>
<table data-role="table" class="ui-responsive">
<thead>
<tr>
<th>Query#</th>
<th>Area</th>
<th>Description</th>
<th>Status</th>
<th>Owner</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#7-5525" data-transition="flip">7-5525</a></td>
<td>HR</td>
<td>Revise 2015 Payscales</td>
<td>WIP</td>
<td>Amanda Hugandkiss</td>
</tr>
<tr>
<td><a href="#7-2534" data-transition="flip">7-2534</a></td>
<td>MM</td>
<td>Master Data MRP error</td>
<td>PUT</td>
<td>Tish Hughes</td>
</tr>
<tr>
<td><a href="#7-9534" data-transition="flip">7-9534</a></td>
<td>WM</td>
<td>Stock Putaway running slowly</td>
<td>PUT</td>
<td>Jonny Tubbydigits</td>
</tr>
<tr>
<td><a href="#7-1534" data-transition="flip">7-1534</a></td>
<td>SD</td>
<td>Foreign Currencies on Sales Orders</td>
<td>WIP</td>
<td>Claire Asday</td>
</tr>
</tbody>
</table>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="7-5525">
<div data-role="header">
<h1>7-5525 : Revise 2015 Payscales</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#callslist">Back to Query List</a>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Header Data</h1>
<p>Customer : Acmeland</p>
<p>Contact : David Baker</p>
<p>Phone : <a href="tel:01234 567 890">07870553645</a></p>
<p>Time Booked : 35 hours</p>
<p>Time remaining : 27 hours</p>
<p>Last updated : 30.01.2015</p>
</div>
<div data-role="collapsible">
<h1>Query History</h1>
<div data-role="collapsible">
<h1>Patrick Dean 02.02.2015</h1>
<p>Mailed Kaushal with the transport numbers, requested he re-test.</p>
</div>
<div data-role="collapsible">
<h1>Angela Webster 01.02.2015</h1>
<p>Assisted Patrick with FI documentation</p>
</div>
<div data-role="collapsible">
<h1>Patrick Dean 30.01.2015</h1>
<p>Logon Issues, registered with BASIS</p>
</div>
</div>
<div data-role="collapsible">
<h1>Add Activity</h1>
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="day">Activity Type :</label>
<select name="day" id="day">
<option value="AU">Activity Undertaken</option>
<option value="IN">Internal Note</option>
<option value="TX">Transports</option>
<option value="SN">Solution</option>
</select>
<label for="status">Status</label>
<select name="status" id="status">
<option value="ASS">Assigned</option>
<option value="CUA">Customer Action</option>
<option value="CUT">Customer Testing</option>
<option value="TOT">With Third Party</option>
<option value="CLO">Closed</option>
<option value="OPN">Open</option>
</select>
<label for="bday">Date of Activity</label>
<input type="date" name="bday" id="bday">
<label for="hoursbooked">Hours Booked</label>
<input type="text" name="" id="hoursbooked">
<label for="info">Notes</label>
<textarea name="addinfo" id="info"></textarea>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</div>
<div data-role="footer">
<h1>Footer Text in Dialog</h1>
</div>
</div>
<!-- ********************Second Query -->
<div data-role="page" id="7-2534">
<div data-role="header">
<h1>7-2534 : Master Data MRP error</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#callslist">Back to Query List</a>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Header Data</h1>
<p>Customer : Tindlecrook</p>
<p>Contact : Ian Spragg</p>
<p>Phone : <a href="tel:01234 567 890">07917 631 418</a></p>
<p>Time Booked : 4 hours</p>
<p>Time remaining : 8 hours</p>
<p>Last updated : 15.01.2015</p>
</div>
<div data-role="collapsible">
<h1>Query History</h1>
<div data-role="collapsible">
<h1>James Corrigan 30.12.2015</h1>
<p>VPNs needed re-configuring. This will need additional input from management</p>
</div>
<div data-role="collapsible">
<h1>Jo Samuels 26.12.2015</h1>
<p>Not deemed to be a development call - please check OSS before assigning to development - reassigning to James</p>
</div>
<div data-role="collapsible">
<h1>Patrick Dean 14.12.2015</h1>
<p>Initial investigation Undertaken, no coding required.</p>
</div>
<div data-role="collapsible">
<h1>Wojciech Haase 14.12.2015</h1>
<p>Initial investigation Undertaken, no coding required. Going to get Paddy to check this for me...</p>
</div>
</div>
<div data-role="collapsible">
<h1>Add Activity</h1>
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="day">Activity Type :</label>
<select name="day" id="day">
<option value="AU">Activity Undertaken</option>
<option value="IN">Internal Note</option>
<option value="TX">Transports</option>
<option value="SN">Solution</option>
</select>
<label for="status">Status</label>
<select name="status" id="status">
<option value="ASS">Assigned</option>
<option value="CUA">Customer Action</option>
<option value="CUT">Customer Testing</option>
<option value="TOT">With Third Party</option>
<option value="CLO">Closed</option>
<option value="OPN">Open</option>
</select>
<label for="bday">Date of Activity</label>
<input type="date" name="bday" id="bday">
<label for="hoursbooked">Hours Booked</label>
<input type="text" name="" id="hoursbooked">
<label for="info">Notes</label>
<textarea name="addinfo" id="info"></textarea>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</div>
<div data-role="footer">
<h1>Footer Text in Dialog</h1>
</div>
</div>
<!-- ********************Third Query -->
<div data-role="page" id="7-9534">
<div data-role="header">
<h1>7-9534 : Stock Putaway running slowly</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#callslist">Back to Query List</a>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Header Data</h1>
<p>Customer : Drummin Monkey</p>
<p>Contact : Mark Curtis</p>
<p>Phone : <a href="tel:01234 567 890">07917 631 418</a></p>
<p>Time Booked : 10 hours</p>
<p>Time remaining : 18 hours</p>
<p>Last updated : 21.01.2015</p>
</div>
<div data-role="collapsible">
<h1>Query History</h1>
<div data-role="collapsible">
<h1>Matt Cox 30.12.2015</h1>
<p>Awaiting triage and resource from the Logistics team.</p>
</div>
</div>
<div data-role="collapsible">
<h1>Add Activity</h1>
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="day">Activity Type :</label>
<select name="day" id="day">
<option value="AU">Activity Undertaken</option>
<option value="IN">Internal Note</option>
<option value="TX">Transports</option>
<option value="SN">Solution</option>
</select>
<label for="status">Status</label>
<select name="status" id="status">
<option value="ASS">Assigned</option>
<option value="CUA">Customer Action</option>
<option value="CUT">Customer Testing</option>
<option value="TOT">With Third Party</option>
<option value="CLO">Closed</option>
<option value="OPN">Open</option>
</select>
<label for="bday">Date of Activity</label>
<input type="date" name="bday" id="bday">
<label for="hoursbooked">Hours Booked</label>
<input type="text" name="" id="hoursbooked">
<label for="info">Notes</label>
<textarea name="addinfo" id="info"></textarea>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</div>
<div data-role="footer">
<h1>Footer Text in Dialog</h1>
</div>
</div>
<!-- ********************Fourth Query -->
<div data-role="page" id="7-1534">
<div data-role="header">
<h1>7-1534 : Foreign Currencies on Sales Orders</h1>
</div>
<div data-role="main" class="ui-content">
<a href="#callslist">Back to Query List</a>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Header Data</h1>
<p>Customer : Daisies Doodles</p>
<p>Contact : Nathan Binks</p>
<p>Phone : <a href="tel:01234 567 890">07917 631 418</a></p>
<p>Time Booked : 100 hours</p>
<p>Time remaining : 180 hours</p>
<p>Last updated : 22.01.2015</p>
</div>
<div data-role="collapsible">
<h1>Query History</h1>
<div data-role="collapsible">
<h1>Laurie Walker 07.01.2014</h1>
<p>Days on site - configuring local Currencies.
</p>
</div>
<div data-role="collapsible">
<h1>Laurie Walker 04.01.2014</h1>
<p>Days on site - configuring local Currencies.
</p>
</div>
<div data-role="collapsible">
<h1>Laurie Walker 03.01.2014</h1>
<p>Days on site - configuring local Currencies.
Configuring 3 pertinent company codes.
</p>
</div>
<div data-role="collapsible">
<h1>Laurie Walker 02.01.2015</h1>
<p>Days on site - configuring local Currencies. Initial meetings with client to discuss requirements
</p>
</div>
<div data-role="collapsible">
<h1>Matt Cox 30.12.2014</h1>
<p>Initial requirement received from customer : Wish to undergo full review of Sales Orders to allow
foreign currencies in light of new acquisition of European department. Initially Euros, subsequently Danish Krona
and Swiss Francs
</p>
</div>
</div>
<div data-role="collapsible">
<h1>Add Activity</h1>
<form method="post" action="demoform.asp">
<div class="ui-field-contain">
<label for="day">Activity Type :</label>
<select name="day" id="day">
<option value="AU">Activity Undertaken</option>
<option value="IN">Internal Note</option>
<option value="TX">Transports</option>
<option value="SN">Solution</option>
</select>
<label for="status">Status</label>
<select name="status" id="status">
<option value="ASS">Assigned</option>
<option value="CUA">Customer Action</option>
<option value="CUT">Customer Testing</option>
<option value="TOT">With Third Party</option>
<option value="CLO">Closed</option>
<option value="OPN">Open</option>
</select>
<label for="bday">Date of Activity</label>
<input type="date" name="bday" id="bday">
<label for="hoursbooked">Hours Booked</label>
<input type="text" name="" id="hoursbooked">
<label for="info">Notes</label>
<textarea name="addinfo" id="info"></textarea>
</div>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</div>
<div data-role="footer">
<h1>Footer Text in Dialog</h1>
</div>
</div>
</body>
</html>
