Mobile Webapps für SharePoint entwickeln
Obwohl SharePoint Unterstützung für mobile Endgeräte in Form optimierter Webseiten bietet, kann man die Darstellung auf die individuellen Anforderungen nicht anpassen und für Touch-Oberflächen optimieren. Mit jQuery Mobile und JavaScript lassen sich solche "App-like"-Webseiten erstellen – auch für SharePoint.
- Bernd Pehlke
Obwohl SharePoint Unterstützung für mobile Endgeräte in Form optimierter Webseiten bietet, kann man die Darstellung auf die individuellen Anforderungen nicht anpassen und für Touch-Oberflächen optimieren, wie es in vielen Apps möglich ist. Mit jQuery Mobile und JavaScript lassen sich solche "App-like"-Webseiten erstellen – auch für SharePoint.
Zunehmend mehr Menschen sind in ihrem Beruf auf Smartphones und Tablets angewiesen. Dadurch können sie nahezu jederzeit und von überall schnell und praktisch auf wichtige Informationen zugreifen. Zum Beispiel verwalten sie Termine, rufen E-Mails ab oder ermitteln den Weg zum Kunden. Viele Apps unterstützen unter anderem Außendienstmitarbeiter, Berater oder Projektmanager bei ihrer täglichen Arbeit.
Tipps & Tricks der SharePoint-Entwicklung
SharePoint hat sich zunehmend zu einer zentralen Plattform für Zusammenarbeit, Enterprise Content Management und Geschäftsprozesse entwickelt. Das damit verbundene Potenzial ist mit der Version 2010 sicherlich gewachsen. Viele Unternehmen schöpfen es jedoch nicht voll aus, obgleich es viele Schnittstellen gibt, mit denen Entwickler ihre Erweiterungen umsetzen können.
In dieser Artikelreihe der SharePoint-Experten von Computacenter bisher erschienen:
- Datenquellen im Griff mit SharePoints DataFormWebPart
- Geschäftsdaten mit SharePoint und .NET aufbereiten
- Mobile Webapps für SharePoint entwickeln
Während mit diesen Apps der Zugriff auf allgemein verfügbare Informationen und Anwendungen ein Kinderspiel ist, gibt es bisher nur wenige Apps für konkrete Geschäftsprozesse in Unternehmen. Die Entwicklung nativer Apps für individuelle Anforderungen ist nämlich aufwendig. Denn für die Mobilgeräte der großen Hersteller sind jeweils unterschiedliche Entwicklungswerkzeuge und -sprachen zu verwenden sowie verschiedene Sicherheits- und Deployment-Konzepte zu berücksichtigen. Dabei steigt die Komplexität mit jeder neuen Hardware-Generation und Betriebssystemversion. Daher sind auf Webseiten basierende Apps dank neuer Webtechniken eine Alternative geworden. Sie werden nur einmal in HTML, JavaScript und CSS entwickelt sowie zentral auf einem Webserver bereitgestellt (siehe Tabelle).
Da Mitarbeiter in Business-Anwendungen meist nur Informationen abrufen, können Webapps in der Regel auf die Unterstützung nativer Funktionen der Mobilgeräte wie Kamera, Telefonbuch oder Lagesensoren verzichten. Dadurch sind sie nicht auf die jeweiligen Gerätetypen, sondern nur geringfügig für die verschiedenen Webbrowser auf den Smartphones anzupassen. SharePoint bietet zwar Webseiten für den mobilen Zugriff an, allerdings sind diese im Umfang reduziert und berücksichtigen nicht die individuellen Anforderungen von Touch-Oberflächen und Smartphones. Mit HTLM5, jQuery Mobile und JavaScript lassen sich jedoch solche "App"-ähnlichen Webseiten für den Zugriff auf SharePoint erstellen.
| Native App | Webapp |
| Hardwareoptimiert | |
| Native Funktionen, z.B. Kamera, Telefonbuch, Push Notifications | Kaum Nutzung der nativen Hardware |
| Offlinefunktionalität | Offlinefunktionen eingeschränkt |
| Verschiedene Sprachen und Betriebssysteme | Einheitliche Entwicklungssprache |
| Prüfung und Bereitstellung von Apps durch App-Store oder In-house-App-Verteilung | Schnelles Deployment auf zentralem Webserver |
Mobiles Framework
Das Framework jQuery Mobile ermöglicht es auf einfache Weise, mit HTML5, CSS3 und JavaScript Webapps zu erstellen. Für eine einfache App genügt sogar wenig HTML. Rendering, Darstellung, Orientierung, Touch Events und Farbschema übernimmt jQuery Mobile. Ein Listing mit dem Quellcode für eine einfache Webapp mit einem Slider ohne jede weitere Funktion sieht etwa folgendermaßen aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Beispiel Slider</title>
<meta name="viewport" content="width=device-width,
minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/
mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css" />
<script src="http://code.jquery.com/
jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.2/
jquery.mobile-1.1.0-rc.2.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header" data-theme="b">
<h1>Slider</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="slider">Einverständnis:</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">Nein</option>
<option value="on">Ja</option>
</select>
</div>
</div>
</div>
</body>
</html>
Die dadurch beschriebene Webapp besteht lediglich aus der Überschrift und dem Slider-Steuerelement, mit dem der Nutzer sein Einverständnis einstellt (Abb. 1). Die Auswahloptionen lauten daher einfach "Ja" und "Nein". Die HTML-Darstellung würde eine Radio-Button-Liste anzeigen. Durch den Einsatz von jQuery Mobile wertet man jedoch die data-xxx-Attribute aus, die die normalen HTML-Elemente in spezielle Touch-optimierte Controls umwandeln. Das Attribut data-role="header" macht aus dem div-Element eine Header-Leiste mit Überschrift. Beim Slider sorgt das Attribut data-role="slider" dafür, dass statt der Radio-Buttons ein für Touch-Gesten optimierter Schieberegler gerendert wird. Das Attribut data-theme wählt eines von mehreren vorgefertigten Farbschemas aus, sogenannte Themes. Dadurch sind in der Webapp keine weiteren Styling-Anweisungen zu platzieren.
