Erste Schritte beim Erstellen von von SharePoint gehosteten SharePoint-Add-Ins

SharePoint Add-ins

Einrichten einer Entwicklungsumgebung und Erstellen Ihrer ersten von SharePoint gehosteten SharePoint-Add-In.

Letzte Änderung:Montag, 4. Januar 2016

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

Note Hinweis

Der Name „Apps für SharePoint" wird in „SharePoint-Add-Ins" geändert. Während des Übergangszeitraums wird in der Dokumentation und der Benutzeroberfläche einiger SharePoint-Produkte und Tools für Visual Studio möglicherweise weiterhin der Begriff „Apps für SharePoint" verwendet. Weitere Informationen finden Sie unter Neuer Name für Office- und SharePoint-Apps.

Von SharePoint gehostete Add-Ins sind eine der zwei Haupttypen von SharePoint-Add-Ins. Einen Überblick über SharePoint-Add-Ins und die zwei verschiedenen Typen finden Sie unter SharePoint-Add-Ins. Hier ist eine Zusammenfassung zu von SharePoint gehosteten Add-Ins:

  • Sie enthalten SharePoint-Listen, Webparts, Workflows, benutzerdefinierte Seiten und andere Komponenten, die alle auf einer auch als Add-In-Web bezeichneten Unterwebsite der SharePoint-Website installiert sind, auf der das Add-In installiert ist.

  • Der einzige Code, über den diese verfügen, ist JavaScript auf benutzerdefinierten SharePoint-Seiten.

Schritt 1: Einrichten der Entwicklungsumgebung Schritt 2: Erstellen des App-Projekts Schritt 3: Codieren Ihrer App

Es gibt verschiedene Möglichkeiten zum Einrichten einer Entwicklungsumgebung für SharePoint-Add-Ins. In diesem Abschnitt wird die einfachste Möglichkeit erläutert. Alternativen finden Sie unter Zusätzliche Ressourcen.

Abrufen der Tools

Registrieren für eine Website für Office 365-Entwickler

Hinweis Hinweis

Möglicherweise haben Sie bereits Zugriff auf eine Website für Office 365-Entwickler.

Es gibt zwei Wege zu einem Office 365-Plan.

Tipp Tipp

Jeder dieser Links wird in einem neuen Fenster oder einer neuen Registerkarte geöffnet, damit Sie die folgenden Anweisungen immer noch sehen können.

Abb. 1. Domänenname der Office 365-Entwicklerwebsite

Seite 2 des Registrierungsformulars für das Office 365-Konto

  1. Die erste Seite (nicht abgebildet) des Registrierungsformulars ist selbsterklärend. Geben Sie die angeforderten Informationen an, und wählen Sie Weiter aus.

  2. Geben Sie auf der zweiten Seite, die in Abbildung 1 gezeigt ist, eine Benutzer-ID für den Administrator des Abonnements an.

  3. Erstellen Sie eine Unterdomäne von . onmicrosoft.com, zum Beispiel contoso.onmicrosoft.com.

    Nach der Registrierung verwenden Sie die resultierenden Anmeldeinformationen (im Format UserID@IhreDomäne.onmicrosoft.com), um sich auf Ihrer Office 365-Portalwebsite anzumelden, auf der Sie Ihr Konto verwalten. Ihre SharePoint Online-Entwicklerwebsite wird unter Ihrer neuen Domäne http://IhreDomäne.sharepoint.com eingerichtet.

  4. Wählen Sie Weiter aus, und füllen Sie die letzte Seite des Formulars aus. Wenn Sie eine Telefonnummer bereitstellen, um Ihren Bestätigungscode zu erhalten, können Sie eine Mobil- oder Festnetznummer, aber keine VoIP-Nummer (Voice over Internet Protocol) bereitstellen.

Hinweis Hinweis

Wenn Sie beim Versuch, sich bei einem Entwicklerkonto anzumelden, bei einem anderen Microsoft-Konto angemeldet sind, wird möglicherweise die folgende Nachricht angezeigt: „Die eingegebene Benutzer-ID hat leider nicht funktioniert. Sie ist anscheinend nicht gültig. Geben Sie die Benutzer-ID ein, die Ihnen von Ihrem Unternehmen zugewiesen wurde. Ihre Benutzer-ID hat in der Regel das Format someone@example.com oder someone@example.onmicrosoft.com."

Wenn diese Nachricht angezeigt wird, melden Sie sich vom Microsoft-Konto ab, und versuchen Sie es erneut. Sollte die Nachricht weiterhin angezeigt werden, löschen Sie den Browsercache, oder wechseln Sie zu InPrivate-Browsen und füllen Sie das Formular aus.

Nachdem Sie die Registrierung abgeschlossen haben, wird in Ihrem Browser die Office 365-Installationsseite geöffnet. Wählen Sie das Admin-Symbol aus, um die Admin Center-Seite zu öffnen.

Abb. 2. Office 365 Admin Center-Seite

Screenshot mit dem Office 365 Admin Center
  1. Warten Sie, bis der Einrichtungsprozess für Ihre Website für Entwickler abgeschlossen ist. Nach Abschluss der Bereitstellung aktualisieren Sie die Admin Center-Seite im Browser.

  2. Wählen Sie dann links oben den Link Add-Ins erstellen aus, um Ihre Website für Entwickler zu öffnen. Sie sollten eine Website wie in Abbildung 3 dargestellt sehen. Mit der Liste Add-Ins im Test auf der Seite wird bestätigt, dass die Website mit der Entwicklerwebsitevorlage von SharePoint erstellt wurde. Wird stattdessen eine Teamwebsite angezeigt, warten Sie einige Minuten und starten dann Ihre Website erneut.

  3. Notieren Sie die URL der Websit, die verwendet wird, wenn Sie SharePoint-Add-Ins-Projekte in Visual Studio erstellen.

Abb. 3: Die Startseite Ihrer Entwicklerwebsite mit der Liste der Add-Ins im Test

Screenshot, auf dem die Entwicklerwebsite-Startseite angezeigt ist

  1. Starten Sie Visual Studio mit der Option Als Administrator ausführen.

  2. Wählen Sie in Visual StudioDatei > Neu > Projekt aus.

  3. Erweitern Sie im Dialogfeld Neues Projekt den Knoten Visual C#, dann den Knoten Office/SharePoint, und wählen Sie den Knoten Add-Ins und Add-In für SharePoint aus.

  4. Nennen Sie das Projekt EmployeeOrientation, und klicken Sie dann auf OK.

  5. Geben Sie im ersten Dialogfeld Einstellungen für das Add-In für SharePoint angeben die vollständige URL der SharePoint-Website an, die Sie zum Debuggen des Add-Ins verwenden möchten. Dies ist die erste URL der Website für Entwickler. (Verwenden Sie HTTPS, nicht HTTP, in der URL.) Wählen Sie unter Wie möchten Sie das SharePoint-Add-In hosten die Option In SharePoint gehostet aus. Wählen Sie Fertig stellen aus.

  6. Sie werden möglicherweise aufgefordert, sich bei Ihrem Website für Entwickler anzumelden. In diesem Fall verwenden Sie Ihr Abonnement Administratoranmeldeinformationen.

Für Ihre erste von SharePoint gehostete SharePoint-Add-In schließen wir die klassische SharePoint-Erweiterung ein: eine benutzerdefinierte Liste und eine Listeninstanz.

  1. Öffnen Sie im Projektmappen-Explorer die Datei "AppManifest.xml".

  2. Wenn der Manifest-Designer geöffnet wird, fügen Sie ein Leerzeichen zwischen den Wörtern im Feld Title ein, sodass es Employee Orientation lautet. (Ändern Sie nicht das Feld Name.)

  3. Speichern und schließen Sie die Datei.

  4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Hinzufügen > Neuer Ordner. Nennen Sie den Ordner Lists.

  5. Klicken Sie mit der rechten Maustaste auf den neuen Ordner, und wählen Sie Hinzufügen > Neues Element. Das Dialogfeld Neues Element hinzufügen wird im Knoten Office/SharePoint geöffnet.

  6. Wählen Sie Liste aus. Geben Sie der Liste den Namen NewEmployeeOrientation, und wählen Sie dann Hinzufügen.

  7. Lassen Sie auf der Seite Listeneinstellungen auswählen im Assistenten zum Anpassen von SharePoint den Listenanzeigenamen auf dem Standardwert NewEmployeeOrientation, aktivieren Sie das Optionsfeld Anpassbare Listenvorlage und eine Listeninstanz davon erstellen, und wählen Sie in der Dropdownliste Standard (benutzerdefinierte Liste) aus. Klicken Sie dann auf Fertig stellen.

  8. Der Assistent erstellt eine Listenvorlage NewEmployeeOrientation mit einer untergeordneten Listeninstanz namens NewEmployeeOrientationInstance. Möglicherweise wird ein Listen-Designer geöffnet. Er wird in einem späteren Schritt verwendet.

  9. Erweitern Sie ggf. den Knoten NewEmployeeOrientationInstance im Projektmappen-Explorer, sodass Sie die Datei "elements.xml", die der Listeninstanz untergeordnet ist, deutlich von der Datei "elements.xml" unterscheiden können, die der Listenvorlage untergeordnet ist.

    Listenknoten im Projektmappen-Explorer

    Listenordner mit der untergeordneten Vorlage "NewEmployeeOrientation", die wiederum über drei untergeordnete Elemente verfügt: eine NewEmployeeOrientationInstance, die Datei "elements.xml" und die Datei "schema.xml". Die Instanz selbst ist ein untergeordnetes Element mit dem Namen "elements.xml".

  10. Öffnen Sie die der Listenvorlage NewEmployeeOrientation untergeordnete Datei "elements.xml".

  11. Fügen Sie dem DisplayName-Attribut (nicht dem Name-Attribut) Leerzeichen hinzu, damit es besser lesbar ist: "New Employee Orientation".

  12. Legen Sie das Description-Attribut auf "Orientierungsinformationen für neue Mitarbeiter" fest.

  13. Lassen Sie alle anderen Attribute auf dem Standardwert, speichern Sie die Datei, und schließen Sie sie.

  14. Wenn der Listen-Designer nicht geöffnet wurde, wählen Sie den Knoten NewEmployeeOrientation im Projektmappen-Explorer aus.

  15. Öffnen Sie die Registerkarte Liste des Designers. Diese Registerkarte wird verwendet, um bestimmte Werte für die Listeninstanz, nicht für die Listenvorlage festzulegen. Sie enthält jedoch einige von der Vorlage ererbte Standardwerte.

  16. Ändern Sie die Werte auf dieser Registerkarte wie folgt:

    • Titel: New Employees in Seattle

    • Listen-URL: Lists/NewEmployeesInSeattle

    • Beschreibung: Die neuen Mitarbeiter in Seattle

    Lassen Sie die Kontrollkästchen auf ihrer Standardeinstellung, speichern Sie die Datei, und schließen Sie den Designer.

  17. Die Listeninstanz hat möglicherweise ihren alten Namen im Projektmappen-Explorer beibehalten. Wenn dies der Fall ist, öffnen Sie das Kontextmenü für NewEmployeeOrientationInstance, wählen Umbenennen aus, und ändern den Namen in NewEmployeesInSeattle.

  18. Öffnen Sie die Datei "schema.xml".

  19. Ersetzen Sie in dem View-Element, dessen BaseViewID-Wert "0" ist, das vorhandene ViewFields-Element durch das folgende Markup. (Verwenden Sie genau diese GUID für das FieldRef-Element mit dem Namen Title.)

    Die automatisch generierte Datei "schema.xml" kann an ungewöhnlichen Stellen Zeilenumbrüche enthalten. Achten Sie darauf, dass Sie die zusammengehörigen "begin"- und "end"-Tags für das ViewFields-Element gefunden haben. Fügen Sie Zeilenumbrüche hinzu, um die Lesbarkeit zu verbessern.

    <ViewFields>
      <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Employee" />
     </ViewFields>
    
  20. Ersetzen Sie dann in der Datei "schema.xml" in dem View-Element, dessen BaseViewID-Wert "1" ist, das vorhandene ViewFields-Element durch das folgende Markup. (Verwenden Sie genau diese GUID für das FieldRef-Element mit dem Namen LinkTitle.)

    <ViewFields>
      <FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Employee" />
    </ViewFields>
    
  21. Speichern und schließen Sie die Datei "schema.xml".

  22. Öffnen Sie die der ListeninstanzNewEmployeesInSeattle untergeordnete Datei "elements.xml" (nicht die der ListenvorlageNewEmployeeOrientation untergeordnete Datei "elements.xml").

  23. Geben Sie in dieser Datei in die Liste einige Anfangsdaten ein, indem Sie das folgende Data-Elementmarkup als untergeordnetes Element des Elements ListInstance hinzufügen.

    <Data>
      <Rows>
        <Row>
          <Field Name="Title">Tom Higginbotham</Field>
        </Row>
        <Row>
          <Field Name="Title">Satomi Hayakawa</Field>
        </Row>
        <Row>
          <Field Name="Title">Cassi Hicks</Field>
        </Row>
        <Row>
          <Field Name="Title">Lertchai Treetawatchaiwong</Field>
        </Row>
      </Rows>
    </Data>
    
  24. Speichern und schließen Sie die Datei.

  25. Doppelklicken Sie im Projektmappen-Explorer auf die Option Feature1, um den Feature-Designer zu öffnen. Im Designer legen Sie für den Titel den Wert New Employee Orientation und für die Beschreibung den Wert Listen und andere Komponenten zur Orientierung neuer Mitarbeiter im Unternehmen fest. Speichern Sie die Datei, und schließen Sie den Designer.

  26. Wenn Feature1 im Projektmappen-Explorer nicht automatisch umbenannt wurde, öffnen Sie das zugehörige Kontextmenü, wählen Umbenennen aus, und benennen Sie die Option in NewEmployeeOrientationComponents um.

  27. Öffnen Sie die Datei "Default.aspx".

  28. Suchen Sie das ASP.NET-Content-Element mit der ID PlaceHolderPageTitleInTitleArea. Ersetzen Sie die Standardzeichenfolge "Page Title" durch "New Employees by Location".

  29. Suchen Sie das ASP.NET-Content-Element mit der ID PlaceHolderMain. Ersetzen Sie dessen Inhalt durch das folgende Markup. _spPageContextInfo ist ein JavaScript-Objekt, das von SharePoint automatisch auf der Seite eingeschlossen wird. Seine webAbsoluteUrl-Eigenschaft gibt die URL des Add-In-Webs zurück.

      <p><asp:HyperLink runat="server" 
        NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/NewEmployeesInSeattle/AllItems.aspx';" 
        Text="New Employees in Seattle" /></p>
    
    

  1. Verwenden Sie die F5-Taste zum Bereitstellen und Ausführen Ihres Add-Ins. Visual Studio nimmt eine temporäre Installation des Add-Ins auf Ihrer SharePoint-Testwebsite vor und führt das Add-In sofort aus. (Um herauszufinden, wie Endbenutzer eine installierte SharePoint-Add-In ausführen, lesen Sie unter Nächste Schritte nach.)

  2. Wenn die Standardseite des Add-Ins geöffnet wird, klicken Sie auf den Link New Employees in Seattle, um die benutzerdefinierte Listeninstanz zu öffnen.

    Standardseite und Listenansichtsseite

    Die Standardseite des Add-Ins mit dem Titel "Neue Mitarbeiter nach Standort" wird angezeigt. Es gibt einen Link mit der Bezeichnung "Neue Mitarbeiter in Seattle". Ein Pfeil von diesem Link zeigt auf die Listenansichtsseite für die Liste. Diese hat den Titel "Neue Mitarbeiter in Seattle" und weist die folgende Liste auf.

  3. Fügen Sie der Liste Elemente hinzu, und löschen Sie Elemente.

  4. Um die Debug-Sitzung zu beenden, schließen Sie das Browserfenster, oder beenden Sie das Debuggen in Visual Studio. Jedes Mal, wenn Sie F5 drücken, zieht Visual Studio die vorherige Version des Add-Ins zurück und installiert die neueste.

  5. Sie werden dieses Add-In und die Visual Studio-Projektmappe in anderen Artikeln verwenden. Daher ist es ratsam, das Add-In ein letztes Mal zurückzuziehen, wenn Sie für eine Weile nicht mehr damit arbeiten. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Zurückziehen.

Bisher enthält die Liste nicht viel an Orientierungsinformationen. Wir werden in späteren Artikeln der Reihe einige hinzufügen. Aber vorher können Sie eine kurze Pause bei der Codierung einlegen und sich unter Bereitstellung und Installation eines von SharePoint gehosteten Add-Ins für SharePoint über die Bereitstellung von SharePoint-Add-Ins informieren.

Anzeigen: