Erste Schritte zum Erstellen SharePoint-gehosteter SharePoint-Add-Ins

  • Artikel

SharePoint-gehostete Add-Ins sind einer der zwei Haupttypen von SharePoint-Add-Ins. Einen Überblick über SharePoint-Add-Ins und die zwei Add-In-Typen finden Sie unter SharePoint Add-ins. Hier die wichtigsten Punkte zu SharePoint-gehosteten Add-Ins:

  • Sie enthalten SharePoint-Listen, Webparts, Workflows, benutzerdefinierte Seiten und andere Komponenten, die auf einer Unterwebsite mit der Bezeichnung „Add-In-Web“ der SharePoint-Website installiert sind, wo das Add-In installiert ist.
  • Sie bestehen ausschließlich aus JavaScript-Code auf benutzerdefinierten SharePoint-Seiten.

In diesem Artikel führen Sie die folgenden Schritte aus:

  • Einrichten der Entwicklungsumgebung
  • Erstellen des Add-In-Projekts
  • Codieren Ihres Add-Ins
  • Ausführen des Add-Ins und Testen der Liste

Einrichten der Entwicklungsumgebung

Es gibt zahlreiche verschiedene Möglichkeiten, eine Entwicklungsumgebung für SharePoint-Add-Ins einzurichten. In diesem Abschnitt wird die einfachste von ihnen beschrieben.

Installieren der Tools

Für Visual Studio 2017 sollte die Installation der Microsoft Office-Entwicklertools über das Visual Studio 2017-Installationsprogramm erfolgen, auf das über das Fenster „Neues Projekt“ zugegriffen werden kann.

Als Referenz dienen frühere Versionen von Visual Studio oder andere Visual Studio-Dokumentation.

Registrieren für ein Office 365-Entwicklerabonnement

Hinweis

Möglicherweise haben Sie bereits Zugriff auf ein Office 365-Entwicklerabonnement:

So erhalten Sie einen Office 365-Plan:

Öffnen der Entwicklerwebsite

Navigieren Sie in einem Browser zu der SharePoint-Websitesammlung, die Sie beim Einrichten Ihres Office 365-Entwicklerabonnements erstellt haben. (Wenn Sie über keine Website verfügen, befolgen Sie die hier aufgeführten Anweisungen). Nun sollten Sie eine Website sehen, die wie die folgende Abbildung aussieht. Dass die Liste Apps/Add-Ins im Test auf der Seite angezeigt wird, ist der Beleg dafür, dass die Website auf Basis der Vorlage für SharePoint-Entwicklerwebsites erstellt wurde. Falls stattdessen eine normale Teamwebsite angezeigt wird: Warten Sie einige Minuten, und starten Sie dann die Website neu.

Hinweis

Notieren Sie die URL der Website. Diese wird verwendet, wenn Sie SharePoint-Add-In-Projekte in Visual Studio erstellen.

Die Startseite Ihrer Entwicklerwebsite mit der Liste der Apps/Add-Ins im Test

Screenshot, auf dem die Entwicklerwebsite-Startseite angezeigt ist

Erstellen des Add-In-Projekts

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

  2. Klicken Sie in Visual Studio auf Datei>Neu>Neues Projekt.

  3. Erweitern Sie im Dialogfeld Neues Projekt zunächst den Knoten Visual C# und dann den Knoten Office/SharePoint. Klicken Sie nun auf Add-Ins>Add-in for SharePoint.

  4. Geben Sie dem Projekt den Namen EmployeeOrientation, und klicken Sie auf OK.

  5. Geben Sie im Dialogfeld Specify the Add-in for SharePoint Settings die vollständige URL der SharePoint-Website ein, die Sie zum Debuggen Ihres Add-Ins verwenden möchten. Gemeint ist die URL der Entwicklerwebsite. (Verwenden Sie HTTPS, nicht HTTP in der URL.) Wählen Sie unter Wie möchten Sie Ihr SharePoint-Add-In hosten? die Option Von SharePoint gehostet aus, und wählen Sie dann Fertig stellen aus.

  6. Möglicherweise werden Sie aufgefordert, sich bei Ihrer Entwicklerwebsite anzumelden. Verwenden Sie in diesem Fall die Anmeldeinformationen des Abonnementadministrators.

  7. Das Projekt wird erstellt. Öffnen Sie im Stammverzeichnis des Projekts die Datei /Pages/Default.aspx. Unter anderem lädt diese generierte Datei eines oder beide der zwei Skripts, die in SharePoint gehostet werden: „sp.runtime.js“ und „sp.js“. Das Markup zum Laden dieser Dateien befindet sich im Steuerelement des Typs Content mit der ID PlaceHolderAdditionalPageHead am Anfang der Datei. Dieses Markup unterscheidet sich je nach der verwendeten Version von Microsoft Office Developer Tools für Visual Studio. Für diese Tutorialreihe müssen beide Dateien geladen werden. Zudem müssen die Dateien mit herkömmlichen HTML-Tags des Typs <script> geladen werden statt mit Tags des Typs <SharePoint:ScriptLink>.

    Stellen Sie sicher, dass das Steuerelement PlaceHolderAdditionalPageHead die nachfolgenden Zeilen enthält, und zwar direkt oberhalb der Zeile <meta name="WebPartPageExpansion" content="full" />:

    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

  8. Suchen Sie in der Datei nach anderem Markup, das ebenfalls eine dieser Dateien lädt, und entfernen Sie dieses redundante Markup. Speichern und schließen Sie die Datei.

Programmieren des Add-Ins

In Ihr erstes SharePoint-gehostetes SharePoint-Add-In integrieren wir die klassische SharePoint-Erweiterung: eine benutzerdefinierte Liste und eine Instanz dieser Liste.

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

  2. Der Manifest-Designer wird geöffnet. Ändern Sie die Zeichenfolge im Feld Titel in Orientierung für Mitarbeiter. (Ändern Sie das Feld Namenicht.)

  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 die Option Hinzufügen>Neuer Ordner aus. Geben Sie dem Ordner den Namen „Listen“.

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

  6. Klicken Sie auf Liste. Geben Sie der Liste den Namen NewEmployeeOrientation, und klicken Sie auf Hinzufügen.

  7. Übernehmen Sie im Assistent zum Anpassen von SharePoint auf der Seite Listeneinstellungen auswählen den Standardwert NewEmployeeOrientation als Anzeigename der Liste, und aktivieren Sie das Optionsfeld Anpassbare Listenvorlage und eine Listeninstanz davon erstellen. Wählen Sie dann aus der Dropdownliste die Option Standard (benutzerdefinierte Liste) aus, und klicken Sie auf Fertig stellen.

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

  9. Erweitern Sie den Knoten NewEmployeeOrientationInstance im Projektmappen-Explorer, sofern dies noch nicht geschehen ist, damit Sie die Datei „elements.xml“, die ein untergeordnetes Element der Liste Instanz ist, klar von der Datei „elements.xml“ unterscheiden können, die ein untergeordnetes Element der Liste Vorlage ist.

    Listenordner mit der untergeordneten Vorlage

  10. Öffnen Sie das untergeordnete Element „elements.xml“ der Listenvorlage NewEmployeeOrientation.

  11. Fügen Sie in das Attribut DisplayName (nicht in das Attribut Name) Leerzeichen ein, damit es besser lesbar ist: „New Employee Orientation“.

  12. Tragen Sie als Wert für das Attribut Description die Zeichenfolge „Orientation information about new employees“ ein.

  13. Übernehmen Sie für alle anderen Attribute jeweils den Standardwert, speichern Sie die Datei, und schließen Sie sie.

  14. Falls der Listen-Designer noch nicht geöffnet ist: Klicken Sie im Projektmappen-Explorer auf den Knoten NewEmployeeOrientation.

  15. Öffnen Sie die Registerkarte Liste des Designers. Diese Registerkarte wird verwendet, um bestimmte Werte für die Liste Instanz und nicht für die Liste Vorlage festzulegen, aber sie enthält einige Standardwerte, die sie aus der Vorlage übernommen hat.

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

    • Titel: Neue Mitarbeiter in Seattle
    • Listen-URL: Listen/NewEmployeesInSeattle
    • Beschreibung: Die neuen Mitarbeiter in Seattle

  17. Übernehmen Sie den Standardstatus der Kontrollkästchen, speichern Sie die Datei, und schließen Sie den Designer.

  18. Im Projektmappen-Explorer wird möglicherweise noch der alte Name der Listeninstanz angezeigt. Sollte das der Fall sein: Öffnen Sie das Kontextmenü von NewEmployeeOrientationInstance, klicken Sie auf Umbenennen, und ändern Sie den Namen in NewEmployeesInSeattle.

  19. Öffnen Sie die Datei „schema.xml“.

  20. Ersetzen Sie im Element des Typs View mit „0“ als Wert für BaseViewID das vorhandene Element des Typs ViewFields durch das unten aufgeführte Markup. (Verwenden Sie exakt diese GUID für das Element FieldRef mit dem Namen Title.) Zeilenumbrüche können in der automatisch generierten Datei „schema.xml“ an ungewöhnlichen Stellen gesetzt sein. Vergewissern Sie sich, dass Sie wirklich das Starttag und das Endtag des Elements ViewFields gefunden haben. Fügen Sie Zeilenumbrüche ein, um den Code besser lesbar zu machen.

    <ViewFields>
  <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Employee" />
</ViewFields>

  21. Ersetzen Sie in der Datei „schema.xml“ im Element des Typs View mit „1“ als Wert für BaseViewID das vorhandene Element des Typs ViewFields durch das folgende Markup. (Verwenden Sie exakt diese GUID für das Element FieldRef mit dem Namen LinkTitle.)

    <ViewFields>
  <FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Employee" />
</ViewFields>

  22. Speichern und schließen Sie die Datei „schema.xml“.

  23. Öffnen Sie die elements.xml Datei, die ein untergeordnetes Element der ListeninstanzNewEmployeesInSeattle ist (nicht die elements.xml, die ein untergeordnetes Element der ListenvorlageNewEmployeeOrientation ist).

  24. Füllen Sie in dieser Datei die Liste mit einigen Ausgangsdaten. Hierzu fügen Sie folgendes Data-Elementmarkup als untergeordnetes Element des ListInstance-Elements hinzu.

    <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>

  25. Speichern und schließen Sie die Datei.

  26. Doppelklicken Sie im Projektmappen-Explorer auf Feature1, um den Feature-Designer zu öffnen. Legen Sie im Designer als Titel die Zeichenfolge Orientierungskomponenten für neue Mitarbeiter fest und als Beschreibung die Zeichenfolge Listen und andere Komponenten, die zur Orientierung neuer Mitarbeiter im Unternehmen dienen. Speichern Sie die Datei, und schließen Sie den Designer.

  27. Falls Feature1 im Projektmappen-Explorer nicht automatisch umbenannt wurde: Öffnen Sie das Kontextmenü des Elements, klicken Sie auf Umbenennen, und geben Sie ihm den Namen NewEmployeeOrientationComponents.

  28. Öffnen Sie die Datei „Default.aspx“.

  29. Suchen Sie das ASP.NET-Element des Typs Content mit der ID PlaceHolderPageTitleInTitleArea. Ersetzen Sie die Standardzeichenfolge Page Title durch Neue Mitarbeiter nach Standort.

  30. Suchen Sie das ASP.NET-Element des Typs Content mit der ID PlaceHolderMain. Ersetzen Sie dessen Inhalt durch das unten aufgeführte Markup. _spPageContextInfo ist ein JavaScript-Objekt, das von SharePoint automatisch in die Seite integriert wird. Die Eigenschaft webAbsoluteUrl dieses Objekts 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>

  31. Verwenden Sie die F5-Taste, um Ihr Add-In bereitzustellen und auszuführen. Visual Studio führt eine temporäre Installation des Add-Ins auf Ihrer SharePoint-Testwebsite durch und führt das Add-In sofort aus. (Informationen dazu, wie Endbenutzer ein installiertes SharePoint-Add-In ausführen, finden Sie unter Nächste Schritte.)

  32. Die Standardseite des Add-Ins wird geöffnet. Klicken Sie auf Neue Mitarbeiter in Seattle, um die Instanz der benutzerdefinierten Liste zu öffnen.

    Die Standardseite des Add-Ins mit dem Titel

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

  34. Schließen Sie zum Beenden der Debugsitzung 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.

  35. Da Sie mit diesem Add-In und dieser Visual Studio-Lösung auch in anderen Artikeln arbeiten werden, empfiehlt es sich, das Add-In ein letztes Mal zurückzuziehen, sobald Sie eine Weile nicht mehr an ihm arbeiten werden. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie die Option Zurückziehen aus.

Nächste Schritte

Um Ihre Add-Ins zu erstellen, führen Sie die folgenden Schritte in der folgenden Reihenfolge aus:

  1. Bereitstellung und Installation eines von SharePoint gehosteten SharePoint-Add-Ins
  2. Hinzufügen von Spalten zu einem von SharePoint gehosteten SharePoint-Add-In
  3. Hinzufügen eines benutzerdefinierten Inhaltstyps zu einem von SharePoint gehosteten SharePoint-Add-In
  4. Hinzufügen eines Webparts zu einer Seite in einem von SharePoint gehosteten SharePoint-Add-In
  5. Hinzufügen eines Workflows zu einem von SharePoint gehosteten SharePoint-Add-In
  6. Hinzufügen einer benutzerdefinierten Seite und Formatvorlage zu einem von SharePoint gehosteten Add-In für SharePoint
  7. Hinzufügen des benutzerdefinierten clientseitigen Renderings für ein von SharePoint-gehostetes SharePoint Add-In
  8. Erstellen einer benutzerdefinierten Menübandschaltfläche im Hostweb eines SharePoint-Add-Ins
  9. Verwenden von SharePoint-JavaScript-APIs zum Arbeiten mit SharePoint-Daten
  10. Arbeiten mit Hostwebdaten aus JavaScript im Add-In-Web