Seite 2: Beispiel 1

Inhaltsverzeichnis

Beispiel Bewerberbogen

Selbst komplexere Apps lassen sich vergleichsweise einfach erstellen, zum Beispiel für das Hochschulmarketing eines Unternehmens. Damit können an Messeständen interessierte Bewerber ihre Kontaktdaten und Interessenbereiche auf ihrem Smartphone oder einem Tablet eingeben. Anschließend übermitteln sie ihre Daten direkt an ein SharePoint-Portal. Das ist deutlich schneller und effizienter als das Ausfüllen und Abtippen von Bewerbungsformularen auf Papier. Die entsprechende Webapp nutzt jQuery Mobile, ein Teil des HTML-Quellcodes sieht dabei folgendermaßen aus:

<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" /> 
<script type="text/javascript" src="jquery-1.5.min.js"></script> 
<script type="text/javascript" 
        src="jquery.mobile-1.0a4.1.min.js"></script> 
<script type="text/javascript" language="javascript" 
        src="jquery.SPServices-0.6.0.min.js"></script> 

<div data-role="page" data-theme="b" id="bewerber-home">
  <div data-role="header" data-theme="b"> 
  <h1>Bewerberbogen</h1>
  </div>
  <div data-role="content"> 
[...]
  <div data-role="collapsible" data-collapsed="true">
  <h3>Weitere Angaben</h3>
  <div data-role="fieldcontain">
    <fieldset data-role="controlgroup"> 
      <legend>Angestrebte Tätigkeit:</legend>
        <input type="radio" name="radio-choice-1" 
            id="radio-choice-1" value="choice-1" checked="checked" />
        <label for="radio-choice-1">Praktikum</label>
        <input type="radio" name="radio-choice-1" 
            id="radio-choice-2" value="choice-2" />
        <label for="radio-choice-2">Abschlussarbeit</label> 
        <input type="radio" name="radio-choice-1" 
            id="radio-choice-3" value="choice-3" />
        <label for="radio-choice-3">Direkteinstieg</label> 
        <input type="radio" name="radio-choice-1" 
            id="radio-choice-4" value="choice-4" />
        <label for="radio-choice-4">Training</label> 
    </fieldset>
  </div>

  <div data-role="fieldcontain"> 
    <label for="slider">Reisebereitschaft:</label> 
    <select name="slider" id="slider" data-role="slider">
      <option value="off">Nein</option>
      <option value="on">Ja</option> 
    </select>
  </div> 
  <div data-role="fieldcontain">
    <label for="slider1">Berufserfahrung:</label> 
    <input type="range" name="slider1" id="slider1" 
            value="0" min="0" max="20"/> 
  </div> 
</div>
[...]

Abbildung 2 zeigt analog dazu die Webapp auf dem iPad.

Die Webapp verwendet eine Split-View-Ansicht, ähnlich wie die E-Mail-Anwendung des iPad. Im linken Bereich befindet sich die Navigation, rechts der Inhaltsbereich. Wird das iPad im Hochformat gehalten, verschwindet die linke Navigation hinter einem Menü-Button. Das jQuery-Mobile-Framework sorgt dafür, dass auf kleineren Endgeräten wie dem iPhone erst die linke Seite gezeigt und nach Auswahl eines Menüeintrages zur rechten Inhaltsseite navigiert wird.

Wesentliche Elemente sind neben den Referenzen auf die jQuery-/CSS-/JavaScript-Bibliotheken die div-Elemente. Wie bereits erwähnt, werden diese durch das Attribut data-role charakterisiert und je nach Rolle unterschiedlich dargestellt. Zum Beispiel zeigt das div-Element mit der data-role collapsible den div-Abschnitt als einklappbaren Balken an. Beim Berühren des Touch-Screens wird der Inhalt dann innerhalb des div-Abschnitts eingeklappt.

Weitere Elemente neben einfachen Text- und Checkboxen sind die Slider. Das Beispiel verwendet etwa dafür bei der Berufserfahrung ein einfaches HTML-Input-Steuerelement. Im Gegensatz dazu kommt bei der Reisebereitschaft eine andere Art Slider mit einer alternativen Darstellung zum Einsatz. Hier stehen zwei Antwortmöglichkeiten mit "Ja" und "Nein" bereit. Zu diesen sowie weiteren Controls und Elementen gibt es auf der jQuery-Mobile-Website ausführliche Beschreibungen und Demoseiten.

Am Ende des Bewerberbogens befindet sich ein Absende-Button, der die Daten aus dem Formular an den SharePoint-2010-Server sendet. In dem OnClick-Event des Buttons wird eine JavaScript-Funktion aufgerufen, die die Daten per Webservice an die SharePoint-Site übermittelt. Dafür lässt sich die JavaScript-Bibliothek SPService verwenden. Der Quellcode der JavaScript-Funktion lautet:

function SendData() { 
  var name = $('#name').val(); 
  var strasse=$('#strasse').val(); 
  var plzort=$('#plz').val(); 
  var email=$('#email').val(); 
  var telefon=$('#telefon').val(); 
  var mobil=$('#mobil').val(); 
  var gdatum=$('#gdatum').val(); 
  [...]
  $().SPServices({
    operation: "UpdateListItems", 
    async: false, 
    listName: "Bewerberbogen", 
    updates: "<Batch OnError='Continue' PreCalc='TRUE'>" +
      "<Method ID='1' Cmd='New'>" + 
        "<Field Name='LinkTitle'>" + name + "</Field>" + 
        "<Field Name='Strasse'>" + strasse + "</Field>" + 
        "<Field Name='PlzOrt'>" + plzort + "</Field>" + 
        "<Field Name='EMail'>" + email + "</Field>" + 
        "<Field Name='Telefon'>" + telefon + "</Field>" + 
        "<Field Name='Mobilfunk'>" + mobil + "</Field>" + 
        "<Field Name='Geburtsdatum'>" + gdatum + "</Field>" +
[...]
      "</Method>" + 
    "</Batch>",
  completefunc: function(xData, Status) {window.location="send.html";}
  });
return true;

Im ersten Teil werden die eingegebenen Daten aus den Steuerelementen in Variablen gelesen. Anschließend kommt die SPServices-Methode UpdateListItems zum Einsatz, um in der SharePoint-Liste "Bewerberbogen" ein neues SharePoint-ListItem anzulegen. Die analog zu den Controls angelegten Spalten der SharePoint-Liste referenziert man daher im XML-Fragment zur Erzeugung des Listeneintrags. Abbildung 3 zeigt diese Liste mit den über das iPad eingegebenen Bewerberdaten. Die in dem Szenario erstellte Webapp ist also eine mobile Eingabemaske für eine SharePoint-Liste.

SharePoint-Daten per Webservice abfragen

Sind umgekehrt Daten aus SharePoint-Listen oder -Bibliotheken abzufragen und in einer Webapp darzustellen, lässt sich das ebenfalls über die SPServices-Bibliothek erreichen. Für eine Projektliste aus SharePoint kann der Entwickler zum Beispiel folgendes Listing verwenden, das die JavaScript-Funktion beschreibt, die das document.ready-Ereignis aufruft. Der erfolgreich zurückgelieferte SOAP-Stream wird per jQuery in einer Schleife nach den Listeneinträgen mit Metadaten durchsucht und dynamisch zu einer neuen Hyperlinkliste zusammengefügt.

$(document).ready(function() {
  $().SPServices({ 
//List Items abrufen, entspricht der WebMethod 
//des Lists.asmx-WebService
    operation: "GetListItems", 
    async: false, 
    webURL: 'https://projektportal', 
    listName: "Projektliste", 
//Alle Felder der Liste werden als Ergebnis zurückgegeben
    CAMLViewFields: "<ViewFields></ViewFields>", 
    CAMLRowLimit: 0, 
    completefunc: function(xData, Status) {
      if (Status == "error") { 
        $("#WSError").html("Fehler");
      }
      $(xData.responseXML).find('z\\:row').each(function(){ 
        var ID = $(this).attr('ows_ID'); 
        var title = $(this).attr('ows_Title'); 
        var url = $(this).attr('ows_ProjectUrl').split(",")[0]; 
        var phase = $(this).attr('ows_Phase0');
        var desc = $(this).attr('ows_ProjectDescription'); 
        var customer = $(this).attr('ows_CustomerName'); 
        $("#WSOutputX").append("<a href='" + url + "' 
             target=_blank title='" + phase + "\r\n" + 
              desc + "'>" + customer + " - " + title + 
                "</a><br>");
        });
      }
    });
  });
[...] 
<div id="WSError" style="color:red"></div>
<div id="WSOutputX"></div>

Alternativ lassen sich die Daten per REST abfragen. Das Client Object Model kann der Entwickler in reinen HTML5-Seiten leider nicht verwenden, weil das JavaScript Client Object Model eine SharePoint-Webseite als Laufzeitumgebung benötigt.