Blogserie: Apps in SharePoint 2013 – Teil 4: SharePoint Hosted Apps – Zugriff auf das HostWeb
avatar

In diesem Teil der Blogserie möchte ich über die Entwicklung SharePoint Hosted Apps sprechen. Diese Art von Applikationen kommt ohne den sonst nötigen harten Code (C#) aus. Dies mag für den Einen eine Herausforderung darstellen, für Andere allerdings die Normalität (vor allem Webentwickler). SharePoint Hosted Apps setzen zu einem Großteil auf JavaScript oder JQuery.

Wenn eine SharePoint Hosted App erstellt und bereitgestellt wird, hat bereits mein Kollege Max Pressburger in seinem Blogeintrag erklärt (http://blogs.myfirstsharepoint.de/technikblog/sharepoint-2013-schritte-zum-entwickeln-des-ersten-appparts-in-visual-studio-2012). Ich möchte heute einen Schritt weitergehen im AppPart die Daten des SharePoint nutzen.

Eine SharePoint Hosted App existiert grundsätzlich im App-Katalog einer Webanwendung. Dort hat sie ihr eigenes Appweb in dem sie verschiedene Dinge machen kann die unabhängig und abgeschlossen zu anderen Anwendungen sind. Ich stelle mir das immer wie eine Blase vor die im App-Katalog schwebt. Wird sie einer Seite, dem HostWeb, hinzugefügt öffnet sich auf der Seite ein IFrame um die App anzuzeigen. Es existiert sozusagen ein Fenster in die Blase.

Um nun Daten aus dem Hostweb im Appweb zu nutzen, muss dies erst durch SharePoint ermöglicht werden. Zunächst erstellen wir eine SharePoint Hosted App in Visual Studio. Wenn die App nach Erstellung gestartet wird, sollte sie angezeigt werden.

b2

b3

b1

Nun möchten wir in unserer App den Titel des Hostwebs und die Namen der dort vorhandenen Listen anzeigen. Sie erinnern sich, das haben wir auch mit der Provider Hosted App in den vorherigen Artikeln der Serie getan. Nur diesmal müssen wir es mit JavaScript bzw. JQuery umsetzen. Dazu öffnen wir unter Scripts die Datei App.js in der standardmäßig das JavaScript der App integriert wird. Natürlich kann man auch eigene Dateien integrieren.

Wir werden das schon vorhandene Message Element in der Default.aspx (unter Pages) überschreiben und noch ein Titelelement hinzufügen.

  1. <asp:Content ContentPlaceHolderID=„PlaceHolderMain“ runat=„server“> 
  2.  
  3.     <div> 
  4.         <p id=„title“/> 
  5.         <div id=„message“></div> 
  6.     </div> 
  7.  
  8. </asp:Content> 

In die App.js stecken wir den ganzen JQuery-Code.

  1. ‚use strict‘;  
  2.  
  3. var context = SP.ClientContext.get_current();  
  4. var user = context.get_web().get_currentUser();  
  5.  
  6. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
  7. $(document).ready(function () {  
  8.     // Get AppContext  
  9.     var hostweburl = decodeURIComponent(getQueryStringParameter(„SPHostUrl“));  
  10.     var hostcontext = new SP.AppContextSite(context, hostweburl);  
  11.  
  12.     // Get Information from sharepoint  
  13.     this.web = hostcontext.get_web();  
  14.     context.load(this.web);  
  15.  
  16.     this.lists = this.web.get_lists();  
  17.     context.load(this.lists, ‚Include(Title, Id)‘);  
  18.  
  19.     // Asynchronous call  
  20.     context.executeQueryAsync(  
  21.         Function.createDelegate(this, onQuerySucceeded),  
  22.         Function.createDelegate(this, onQueryFailed));  
  23. });  
  24.  
  25. function onQuerySucceeded() {  
  26.     $(‚#title‘).text(this.web.get_title());  
  27.  
  28.     var container = $(„<ul><li>fsdf</li></ul>“);  
  29.  
  30.     var listEnumerator = this.lists.getEnumerator();  
  31.     while (listEnumerator.moveNext()) {  
  32.         var oList = listEnumerator.get_current();  
  33.         container.append(„<li>“ + oList.get_title() + „</li>“);  
  34.     }  
  35.  
  36.     $(‚#message‘).append(container);  
  37. }  
  38.  
  39. function onQueryFailed(sender, args) {  
  40.     alert(‚Application failed. Error:‘ + args.get_message());  
  41. }  
  42.  
  43. function getQueryStringParameter(paramToRetrieve) {  
  44.     var params =  
  45.         document.URL.split(„?“)[1].split(„&“);  
  46.  
  47.     for (var i = 0; i < params.length; i = i + 1) {  
  48.         var singleParam = params[i].split(„=“);  
  49.         if (singleParam[0] == paramToRetrieve)  
  50.             return singleParam[1];  
  51.     }  
  52. }  

Hier ist zu sehen, wie das Hostweb über einen AppContext aufgerufen wird. Alle Aufrufe werden asynchron an SharePoint geschickt und erst beim Empfangen des Ergebnisses wird dieses verarbeitet. So kann es geschehen, dass die SharePointseite den Inhalt erst später anzeigt.

Das Ergebnis ist hier zu sehen.

seite

Es gibt verschiedene Ansätze, wie in Informationen mittels JavaScript aus dem SharePoint geladen werden. Wichtig ist dabei ist der Aufruf der Informationen mittels AppContext. Dabei ist egal ob dies mit JSOM oder der REST API geschieht.

Im nächsten Blogeintrag dieser Serie werden aber noch etwas genauer mit diesem Teil beschäftigen.

  1. Vorbereitung und Bereitstellung einer Provider Hosted App
  2. Provider Hosted Apps und ASP.Net MVC
  3. Bereitstellung und Entwicklung der Applikation auf einem IIS
  4. SharePoint Hosted Apps – Zugriff auf das HostWeb
  5. SharePoint Hosted Apps – AppContext bei CSOM und REST
  6. SharePoint Hosted Apps – Entwicklung mit CSOM und REST

Ein Gedanke zu “Blogserie: Apps in SharePoint 2013 – Teil 4: SharePoint Hosted Apps – Zugriff auf das HostWeb
avatar

  1. Pingback: Blogserie: Apps in SharePoint 2013 – Teil 4: SharePoint Hosted Apps – Zugriff auf das HostWeb - SharePoint Blogs in German - Bamboo Nation

Schreibe einen Kommentar