(0) exportieren Drucken
Alle erweitern

Vorgehensweise: Erstellen einer einfachen App für SharePoint mithilfe von "Napa" Office 365-Entwicklungstools

apps for SharePoint

Informationen zum Erstellen einer einfachen App für SharePoint mit "Napa" Office 365-Entwicklungstools.

Schaltfläche "Ausführen" Führen Sie jetzt dieses Beispiel aus!

Letzte Änderung: Dienstag, 9. September 2014

Hinweis Hinweis

Sie können eine App für SharePoint auch mit Visual Studio erstellen. Weitere Informationen finden Sie unter Erste Schritte zur Entwicklung von Apps für SharePoint.

Gilt für: apps for SharePoint | Office 365 | SharePoint Foundation 2013 | SharePoint Server 2013

Für diese exemplarische Vorgehensweise benötigen Sie die folgenden Komponenten:

  • Ein Office 365-Konto

  • Die "Napa" Office 365-Entwicklungstools-App

Weitere Informationen zur Einrichtung eines Office 365-Kontos finden Sie unter Registrieren Sie sich für ein Office 365 Developer-Abonnement, richten Sie Ihre Tools und Umgebung ein, und beginnen Sie mit dem Bereitstellen Ihrer Apps. Weitere Informationen zur Office 365-Entwicklung finden Sie unter Erstellen von Apps für Office und SharePoint mit den "Napa" Office 365-Entwicklungstools.

In dieser exemplarischen Vorgehensweise wird das Erstellen einer einfachen App für SharePoint mit "Napa" Office 365-Entwicklungstools beschrieben. Die von Ihnen erstellte App enthält Steuerelemente und Code zum Verwalten von Listen und Listenelementen, wobei die meisten Apps für SharePoint jedoch deutlich leistungsstärker sind. Beispielsweise können Sie eine App für SharePoint erstellen, mit der Benutzer Ausgaben nachverfolgen und Veranstaltungen planen können. Mithilfe von "Napa" Office 365-Entwicklungstools können Sie Ihre Apps für SharePoint im Browser anstatt in Visual Studio erstellen. Sie können das Projekt bei komplexeren Szenarios jederzeit herunterladen und in Visual Studio öffnen.

Weitere Informationen zu "Napa" Office 365-Entwicklungstools finden Sie unter Erstellen von Apps für Office und SharePoint mit den "Napa" Office 365-Entwicklungstools.

In diesem Verfahren erstellen Sie ein Projekt für die App für SharePoint.

So erstellen Sie ein Projekt für eine App für SharePoint

  1. Öffnen Sie die "Napa" Office 365-Entwicklungstools-App auf der Office 365-Seite.

  2. Wählen Sie die Kachel Neues Projekt hinzufügen und dann die Kachel App für SharePoint aus.

  3. Nennen Sie das Projekt Test-App für SharePoint, und klicken Sie dann auf die Schaltfläche Erstellen.

    Der Code-Editor wird mit der Standardwebsite geöffnet, die bereits etwas Beispielcode enthält, den Sie ohne weiteres Zutun ausführen können.

Fügen Sie der standardmäßigen Homepage in der App für SharePoint Steuerelemente zum Erstellen und Löschen einer generischen SharePoint-Liste und zum Abrufen der aktuellen Anzahl von Listen im Web der App für SharePoint hinzu. Den Code für die Steuerelemente fügen Sie später hinzu.

So fügen Sie der Homepage Steuerelemente hinzu

  1. Wählen Sie links auf der Seite unter dem Ordner Seiten die Seite Default.aspx aus, falls diese nicht bereits ausgewählt ist. Dies ist in Abbildung 1 dargestellt.

    Abbildung 1: Seitenknoten "Default.aspx"

    Abbildung 1: Seitenknoten "Default.aspx"

    Die Webseite "Default.aspx" wird im Code-Editor angezeigt.

  2. Fügen Sie im Abschnitt PlaceHolderMain den folgenden Code unter dem vorhandenen HTML-Code hinzu:

    <br />
    <div>
        <button id="getListCount">Get count of lists in web</button>
    </div>
    <br />
    <div id="starter">
        <input type="text" value="List name here" id="createlistbox"/><button id="createlistbutton">Create List</button>
        <p>
        Lists
        <br />
        <select id="selectlistbox" ></select><button id="deletelistbutton">Delete Selected List</button>
        </p>
    </div>
    

    Mit dem HTML-Code werden die folgenden Steuerelemente erstellt:

    • Eine Schaltfläche, mit der die Anzahl von Listen im Web der App für SharePoint abgerufen wird.

    • Eine Schaltfläche zum Erstellen einer generischen SharePoint-Liste und eine weitere Schaltfläche zum Löschen der Liste.

    • Eine Liste mit den Listen, die in der App verfügbar sind.

In diesem Verfahren fügen Sie JavaScript-Code hinzu, damit Benutzer Listen in der App für SharePoint erstellen und löschen können.

So fügen Sie Code zum Erstellen und Löschen von Listen hinzu

  1. Wählen Sie den Ordner Skripte aus, und klicken Sie dann auf den Link App.js. Dies ist in Abbildung 2 dargestellt.

    Abbildung 2: App.js-JavaScript-Dateiknoten

    Abbildung 2: App.js-JavaScript-Dateiknoten

    Die standardmäßige JavaScript-Codedatei der Projektvorlage wird für die Bearbeitung geöffnet. Diese Datei enthält den Code, der in Ihrer App für SharePoint verwendet wird. Sie können auch eine andere JS-Datei hinzufügen, in die Sie Code (anstatt in die vorhandene Datei) einfügen. Fügen Sie den Code in diesem Beispiel jedoch in die bereitgestellte Datei App.js ein.

    Im nächsten Schritt definieren Sie die Funktionen für die Steuerelemente, die Sie im vorherigen Verfahren erstellt haben.

    Funktionsname

    Beschreibung

    getWebProperties()

    Verbunden mit dem getListCount-Steuerelement – ruft die Anzahl von Listen im Web ab.

    createlist()

    Verbunden mit dem createListButton-Steuerelement – erstellt eine generische SharePoint-Liste.

    deletelist()

    Verbunden mit dem deletelistbutton-Steuerelement – löscht die Liste, die Benutzer aus der Liste mit den verfügbaren Listen ausgewählt haben.

    Außerdem rufen Sie die Funktionen welcome() und displayLists() auf. Dies wird weiter unten in dieser exemplarischen Vorgehensweise beschrieben.

  2. Fügen Sie in der Datei App.js die Variablen web, lists und listItemcollection zu den beiden Standardvariablen hinzu, und ändern Sie den Code in der Funktion $(document).ready() in das folgende Beispiel.

    Hinweis Hinweis

    Im Code werden gewellte Unterstreichungen angezeigt. Diese werden im Laufe der nächsten Schritte ausgeblendet.

    'use strict';
    
    var context = SP.ClientContext.get_current();
    var user = context.get_web().get_currentUser();
    var web = context.get_web();
    var lists = web.get_lists();
    var listItemCollection;  // This variable is used later when you add list items.
    
    (function () {
    
    // This code runs when the DOM is ready and creates a context object which is 
    // needed to use the SharePoint object model.
    $(document).ready(function () {
        getUserName();
        $("#getListCount").click(function (event) {
            getWebProperties();
            event.preventDefault();
        });
    
        $("#createlistbutton").click(function (event) {
            createlist();
            event.preventDefault();
        });
    
        $("#deletelistbutton").click(function (event) {
            deletelist();
            event.preventDefault();
        });
            displayLists();
        });
    
    

    Im nächsten Schritt fügen Sie JavaScript-Funktionen für die Definitionen hinzu. Jede Funktion im Code wird per Aufruf von executeQueryAsync() ausgeführt. Bei diesem Aufruf wird die aktuelle ausstehende Anforderung asynchron auf dem Server ausgeführt, indem das clientseitige Objektmodell (CSOM) für SharePoint verwendet wird. Wenn eine Funktion asynchron ausgeführt wird, wird Ihr Skript weiter ausgeführt, ohne dass eine Antwort des Servers abgewartet wird. Jeder executeQueryAsync()-Aufruf umfasst zwei Ereignishandler. Ein Handler antwortet, wenn die Funktion erfolgreich ausgeführt wird, und der andere Handler antwortet, wenn die Funktion fehlschlägt. In dieser Tabelle sind die Hauptfunktionen beschrieben.

    Funktionsname

    Beschreibung

    welcome()

    Ruft den aktuellen Webkontextverweis ab und verwendet diesen dann, um die aktuellen Benutzerinformationen in den Kontext einzubinden.

    getWebProperties()

    Ruft die Listensammlung im aktuellen Web ab und gibt dann die Anzahl der Listen zurück.

    displaylists()

    Ruft die aktuelle Listensammlung in diesem Web ab. Ist dies erfolgreich, wird mit dieser Funktion der Name der einzelnen Listen in der Sammlung der Liste mit den verfügbaren Listen hinzugefügt.

    createlist()

    Erstellt eine generische SharePoint-Liste (Listenvorlagentyp genericList) und benennt diese mit dem Namen, den Benutzer im createlistbox-Steuerelement angeben. Sie können auch andere Arten von Listen erstellen. Weitere Informationen zu den Arten von Listen finden Sie unter SPListTemplateType Enumeration.

    deletelist()

    Löscht die Liste, die Benutzer aus der Liste mit den verfügbaren Listen ausgewählt haben.

  3. Fügen Sie den folgenden Code nach der Funktion onGetUserNameFail() in App.js ein.

    function getWebProperties() {
            // Get the number of lists in the current web.
            context.load(lists);
            context.executeQueryAsync(onWebPropsSuccess, onWebPropsFail);
        }
    
        function onWebPropsSuccess(sender, args) {
            alert('Number of lists in web: ' + lists.get_count());
        }
    
        function onWebPropsFail(sender, args) {
            alert('Failed to get list. Error: ' + args.get_message());
        }
    
        function displayLists() {
            // Get the available SharePoint lists, and then set them into 
            // the context.
            lists = web.get_lists();
            context.load(lists);
            context.executeQueryAsync(onGetListsSuccess, onGetListsFail);
        }
    
        function onGetListsSuccess(sender, args) {
            // Success getting the lists. Set references to the list 
            // elements and the list of available lists.
            var listEnumerator = lists.getEnumerator();
            var selectListBox = document.getElementById("selectlistbox");
            if (selectListBox.hasChildNodes()) {
                while (selectListBox.childNodes.length >= 1) {
                    selectListBox.removeChild(selectListBox.firstChild);
                }
            }
            // Traverse the elements of the collection, and load the name of    
            // each list into the dropdown list box.
            while (listEnumerator.moveNext()) {
                var selectOption = document.createElement("option");
                selectOption.value = listEnumerator.get_current().get_title();
                selectOption.innerHTML = listEnumerator.get_current().get_title();
                selectListBox.appendChild(selectOption);
            }
        }
    
        function onGetListsFail(sender, args) {
            // Lists couldn’t be loaded - display error.
            alert('Failed to get list. Error: ' + args.get_message());
        }
    
    function createlist() {
            // Create a generic SharePoint list with the name that the user specifies.
            var listCreationInfo = new SP.ListCreationInformation();
            var listTitle = document.getElementById("createlistbox").value;
            listCreationInfo.set_title(listTitle);
            listCreationInfo.set_templateType(SP.ListTemplateType.genericList);
            lists = web.get_lists();
            var newList = lists.add(listCreationInfo);
            context.load(newList);
            context.executeQueryAsync(onListCreationSuccess, onListCreationFail);
        }
    
        function onListCreationSuccess() {
            displayLists();
        }
    
        function onListCreationFail(sender, args) {
            alert('Failed to create the list. ' + args.get_message());
        }
    
        function deletelist() {
            // Delete the list that the user specifies.
            var selectListBox = document.getElementById("selectlistbox");
            var selectedListTitle = selectListBox.value;
            var selectedList = web.get_lists().getByTitle(selectedListTitle);
            selectedList.deleteObject();
            context.executeQueryAsync(onDeleteListSuccess, onDeleteListFail);
        }
    
        function onDeleteListSuccess() {
            displayLists();
        }
    
        function onDeleteListFail(sender, args) {
            alert('Failed to delete the list. ' + args.get_message());
        }
    

Der erste Teil der Benutzeroberfläche und des Codes ist jetzt fertig. Sie sollten die App also ausführen, um zu überprüfen, ob sie funktioniert.

So führen Sie die App aus

  1. Wählen Sie unten auf der Seite die Ausführungsschaltfläche (Schaltfläche "Ausführen") aus.

    Die App wird verpackt, bereitgestellt und auf Ihrer Office 365 Developer Site installiert.

    Nach der Installation wird die App für SharePoint gestartet. Falls die App nicht automatisch gestartet wird, weil beispielsweise ein Popupblocker aktiviert ist, wählen Sie den App-Link zum Starten der App.

  2. Wählen Sie den Link zum Starten der App in einem neuen Fenster aus.

    Das Fenster für die App für SharePoint wird angezeigt.

  3. Klicken Sie auf die Schaltfläche Get count of lists in web.

    In einem Dialogfeld wird angegeben, dass das Web für die aktuelle App für SharePoint zwei Listen enthält. (Standardmäßig sind im Web die Listen "Design Gallery" und "Gestaltungsvorlagenkatalog" enthalten.)

  4. Geben Sie im Feld List name here den Text Testliste ein, und klicken Sie auf die Schaltfläche Create Liste.

  5. Öffnen Sie die Liste Lists, um zu überprüfen, ob die neue Liste darin enthalten ist.

  6. Klicken Sie erneut auf die Schaltfläche Get count of lists in web.

    Das Web enthält mit der eben erstellten Liste jetzt drei Listen.

  7. Wählen Sie in der Liste Lists den Eintrag Test List aus, und klicken Sie auf die Schaltfläche Delete Selected List.

    Der Eintrag Testliste wird aus der Liste mit den verfügbaren Listen entfernt.

  8. Schließen Sie nach Abschluss Ihrer Änderungen das Browserfenster, und klicken Sie dann im Fenster zum Starten der App auf die Schaltfläche Schließen, um zum in Bearbeitung befindlichen Projekt zurückzukehren.

Da Benutzer jetzt Listen erstellen und löschen können, können Sie die folgenden Schritte ausführen, um Benutzern das Hinzufügen und Löschen von Listenelementen zu ermöglichen.

So fügen Sie Code und Steuerelemente zum Hinzufügen und Löschen von Listenelementen hinzu

  1. Wählen Sie die Datei "Default.aspx" zur Bearbeitung aus.

  2. Fügen Sie unter dem selectlistbox-Element den folgenden Code hinzu.

        <p>
        Items
        <br />
        <input type="text" value="item name here" id="createitembox"/><button id="createitembutton">Create Item</button>
        </p>
        <p>
        <select id="selectitembox"></select> <button id="deleteitembutton">Delete Selected Item</button>
        </p>
    

    Mit diesem Code wird ein Eingabefeld hinzugefügt, in dem Benutzer den Namen eines Elements, eine Schaltfläche zum Hinzufügen des Elements zur Liste und eine Schaltfläche zum Löschen des Elements aus der Liste angeben können.

  3. Wählen Sie die Datei App.js zur Bearbeitung aus.

  4. Fügen Sie in der SharePointReady()-Funktion Definitionen für Funktionen hinzu, die aufgerufen werden, wenn Benutzer auf die Schaltflächen Create Item und Delete Selected Item klicken. Fügen Sie außerdem einen jQuery-Ereignishandler für das Listenfeld Lists hinzu, um sicherzustellen, dass die Listenelemente aktualisiert werden, wenn Sie eine neue Liste auswählen.

    $("#createitembutton").click(function (event) {
                createitem();
                event.preventDefault();
            });
    
            $("#deleteitembutton").click(function (event) {
                deleteitem();
                event.preventDefault();
            });
        
            // Update the list items dropdown when a new list
            // is selected in the Lists dropdown.
            $("#selectlistbox").change(function (event) {
                getitems();
                event.preventDefault();
            });
    
    HinweisHinweis

    Werden die Listenelemente nicht angezeigt, wenn Sie die App ausführen, stellen Sie sicher, dass die displayLists();-Anweisung nach dem vorhergehenden Code kommt.

    Im nächsten Schritt fügen Sie JavaScript-Funktionen für die neuen Definitionen und eine Unterstützungsfunktion (getItems()) hinzu. In der folgenden Tabelle sind die Hauptfunktionen beschrieben.

    Funktionsname

    Beschreibung

    createItem()

    Fügt der vom Benutzer ausgewählten Liste ein Element hinzu und benennt dieses Element mit dem Namen, den der Benutzer im Feld Items angibt.

    deleteItem()

    Löscht das vom Benutzer ausgewählte Element aus der Liste.

    getItems()

    Ruft die Listensammlung (und die untergeordneten Elemente) der Liste ab, die vom Benutzer ausgewählt wurde.

  5. Fügen Sie diesen Code am Ende der Datei App.js nach der Funktion onDeleteListFail() hinzu.

    function createitem() {
        // Retrieve the list that the user chose, and add an item to it.
        var selectListBox = document.getElementById("selectlistbox");
        var selectedListTitle = selectListBox.value;
        var selectedList = web.get_lists().getByTitle(selectedListTitle);
    
        var listItemCreationInfo = new SP.ListItemCreationInformation();
        var newItem = selectedList.addItem(listItemCreationInfo);
        var listItemTitle = document.getElementById("createitembox").value;
        newItem.set_item('Title', listItemTitle);
        newItem.update();
        context.load(newItem);
        context.executeQueryAsync(onItemCreationSuccess, onItemCreationFail);
    }
    
    function onItemCreationSuccess() {
        // Refresh the list of items.
        getitems();
    }
    
    function onItemCreationFail(sender, args) {
        // The item couldn’t be created – display an error message.
        alert('Failed to create the item. ' + args.get_message());
    }
    
    function deleteitem() {
        // Delete the item that the user chose.
        var selectListBox = document.getElementById("selectlistbox");
        var selectedListTitle = selectListBox.value;
        var selectedList = web.get_lists().getByTitle(selectedListTitle);
        var selectItemBox = document.getElementById("selectitembox");
        var selectedItemID = selectItemBox.value;
        var selectedItem = selectedList.getItemById(selectedItemID);
        selectedItem.deleteObject();
        selectedList.update();
        context.load(selectedList);
        context.executeQueryAsync(onDeleteItemSuccess, onDeleteItemFail);
    }
    
    function onDeleteItemSuccess() {
        // Refresh the list of items.
        getitems();
    }
    
    function onDeleteItemFail(sender, args) {
        // The item couldn’t be deleted – display an error message.
        alert('Failed to delete the item. ' + args.get_message());
    }
    
    function getitems() {
        // Using a CAML query, get the items in the list that the user chose, and 
        // set the context to the collection of list items.
        var selectListBox = document.getElementById("selectlistbox");
        var selectedList = selectListBox.value;
        var selectedListTitle = web.get_lists().getByTitle(selectedList);  
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml("<View><ViewFields>" +
            "<FieldRef Name='ID' />" +
            "<FieldRef Name='Title' />" +
            "</ViewFields></View>')");
        listItemCollection = selectedListTitle.getItems(camlQuery);
        context.load(listItemCollection, "Include(Title, ID)");
        context.executeQueryAsync(onGetItemsSuccess, onGetItemsFail);
    }
    
    function onGetItemsSuccess(sender, args) {
        // The list items were retrieved.
        // Show all child nodes.
        var listItemEnumerator = listItemCollection.getEnumerator();
        var selectItemBox = document.getElementById("selectitembox");
        if (selectItemBox.hasChildNodes()) {
            while (selectItemBox.childNodes.length >= 1) {
         selectItemBox.removeChild(selectItemBox.firstChild);
            }
        }
            while (listItemEnumerator.moveNext()) {
                var selectOption = document.createElement("option");
                selectOption.value = listItemEnumerator.get_current().get_item('ID');
                selectOption.innerHTML = listItemEnumerator.get_current().get_item('Title');
                selectItemBox.appendChild(selectOption);
            }
    }
    
    function onGetItemsFail(sender, args) {
        // The list items couldn’t be retrieved - display an error message.
        alert('Failed to get items. Error: ' + args.get_message());
    }
    

Die gesamte Benutzeroberfläche und der gesamte Code ist jetzt fertig. Sie sollten die App also ausführen, um zu überprüfen, ob sie funktioniert.

So führen Sie die aktualisierte App für SharePoint aus

  1. Wählen Sie unten auf der Seite erneut die Schaltfläche Ausführen.

  2. Geben Sie im Feld List name here den Text New Test List ein, und klicken Sie auf die Schaltfläche Create Liste.

    Die neue Liste wird der Liste Lists hinzugefügt.

  3. Wählen Sie in der Liste Lists die Option New Test List aus.

  4. Geben Sie im Feld Item name here den Text Item 1 ein, und klicken Sie auf die Schaltfläche Create Item.

    Das neue Listenelement wird in der Liste Items angezeigt.

  5. Wiederholen Sie den vorherigen Schritt, um Item 2 und Item 3 hinzuzufügen.

  6. Wählen Sie in der Liste mit den Elementen die Option Item 2 aus, und klicken Sie auf die Schaltfläche Delete Selected Item.

    Item 2 wird aus der Liste mit den Elementen entfernt.

  7. Schließen Sie das Browserfenster, wenn Sie fertig sind.

Nachdem Sie eine einfache App für SharePoint erstellt haben, ergeben sich die folgenden Möglichkeiten:

  • Öffnen Sie das Projekt in Visual Studio, indem Sie die Schaltfläche In Visual Studio öffnen auswählen, wie in Abbildung 3 dargestellt. "Napa" Office 365-Entwicklungstools installiert automatisch die erforderlichen Tools und öffnet Ihr Projekt in Visual Studio.

    Abbildung 3: Schaltfläche "In Visual Studio öffnen"

    Schaltfläche "In Visual Studio öffnen"

    Sie können diese Tools auch direkt herunterladen und installieren, indem Sie die Seite Downloads im Apps für Office und SharePoint Dev Center verwenden.

  • Erstellen Sie eine App für SharePoint mit Visual Studio. Weitere Informationen finden Sie unter Erste Schritte zur Entwicklung von Apps für SharePoint.

Anzeigen:
© 2014 Microsoft