Einfügen eines Add-In-Parts zu einem anbietergehosteten Add-In

Dies ist der sechste einer Reihe von Artikeln über die Grundlagen der Entwicklung von vom Anbieter gehosteten SharePoint-Add-Ins. Machen Sie sich zunächst mit SharePoint-Add-Ins und den vorherigen Artikeln dieser Reihe vertraut, die Sie unter Erste Schritte beim Erstellen von von einem Anbieter gehosteten SharePoint-Add-Ins finden.

Hinweis

Wenn Sie unsere Artikelreihe zum Thema anbietergehostete Add-Ins durchgearbeitet haben, haben Sie bereits eine Visual Studio-Lösung, die Sie für diesen Artikel verwenden können. Sie können das Repository auch unter SharePoint_Provider-hosted_Add-Ins_Tutorials herunterladen und die Datei BeforeAdd-inPart.sln öffnen.

In diesem Artikel fügen Sie dem SharePoint-Add-In eine spezielle Art von Webpart hinzu, die als Add-In-Webpart bezeichnet wird. Das Add-In-Webpart stellt das Bestellformular des Add-Ins Bestellformular auf einer SharePoint-Seite zur Verfügung.

Erstellen des Add-In-Webparts

Hinweis

Die Einstellungen für Startprojekte in Visual Studio werden in der Regel nach jedem erneuten Öffnen der Lösung wieder auf die Standardwerte zurückgesetzt. Wann immer Sie beim Durcharbeiten dieser Artikelreihe die Beispiellösung erneut öffnen, müssen Sie umgehend die folgenden Schritte durchführen:

1. Klicken Sie oben im Projektmappen-Explorer mit der rechten Maustaste auf den Lösungsknoten, und wählen Sie die Option Startprojekte festlegen aus.
2. Stellen Sie sicher, dass alle drei Projekte in der Spalte Aktion auf Start festgelegt sind.

1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das ChainStore-Projekt, und wählen Sie Hinzufügen>Neues Element aus.

2. Wählen Sie Client-Webpart (Hostweb) aus, geben Sie ihm den Namen Bestellung aufgeben, und wählen Sie dann Hinzufügen aus. ("Clientwebpart" ist eine andere Bezeichnung für "Add-In-Webpart".)

3. Wählen Sie auf der nächsten Seite des Assistenten die zweite Option aus: URL einer vorhandenen Webseite für den Clientwebpart-Inhalt auswählen oder eingeben.

4. Wählen Sie in der Dropdownliste die URL für die Seite OrderForm.aspx aus, und wählen Sie dann Fertig stellen aus.

   Eine Datei „elements.xml“, die das Add-In-Webpart definiert, wird dem Projekt hinzugefügt und geöffnet.

5. Ändern Sie im Element ClientWebPart die folgenden Attribute auf die folgenden Werte:

   Attribut	Wert
   Title	Bestellung aufgeben
   Beschreibung	Formular zum Aufgeben einer Bestellung
   DefaultHeight	320

   Behalten Sie für alle anderen Attribute die Standardwerte bei, und speichern Sie die Datei.

Ausführen des Add-Ins und Testen des Add-In-Websparts

1. Drücken Sie auf die F5-TASTE, um Ihr Add-In bereitzustellen und auszuführen. Visual Studio hostet die Remotewebanwendung in IIS Express und die SQL-Datenbank in SQL Express. Außerdem wird eine temporäre Installation des Add-Ins auf Ihrer SharePoint-Testwebsite durchgeführt, und das Add-In wird sofort ausgeführt. Sie werden aufgefordert, Berechtigungen für das Add-In zu erteilen, bevor die Startseite geöffnet wird.

2. Wenn die Startseite des Add-Ins geöffnet wird, wurde das Add-In bereitgestellt, und das Add-In-Add-In -Add-In " Bestellung aufgeben" ist für Benutzer verfügbar, die zu jedem Webpartbereich auf einer beliebigen SharePoint-Seite auf der Website des Hongkong-Stores hinzugefügt werden können. Führen Sie die folgenden Schritte aus, um sie der Startseite hinzuzufügen:

   1. Wählen Sie Zurück zur Website im Chromsteuerelement am oberen Rand der Startseite, um die Homepage des Stores in Hongkong zu öffnen.

   2. Öffnen Sie auf dem Menüband die Registerkarte Seite, und wählen Sie Bearbeiten.

   3. Nachdem sich die Seite im Bearbeitungsmodus befindet, öffnen Sie die Registerkarte Einfügen auf dem Menüband, und wählen Sie Add-In-Webpart (die Schaltfläche heißt möglicherweise immer noch App-Webpart).

   4. Wählen Sie im daraufhin geöffneten Webpart-Einfügesteuerelement das Add-In -Add-In -Add-In bestellen aus. Das Steuerelement sieht in etwa wie folgt aus.

      Abbildung 1: Webpart-Einfügesteuerelement in SharePoint

      

   5. Wählen Sie eine Position in einer beliebigen Webpartzone im Formular aus, um die Position festzulegen, an der das Add-In-Webpart eingefügt wird.

   6. Wählen Sie hinzufügen im Webpart-Einfügesteuerelement aus. Das Add-In " Bestellung aufgeben" wird der Webpartzone hinzugefügt.

   7. Wählen Sie im Menüband Speichern.

3. Das Bestellformular wird jetzt auf der Seite angezeigt und weist das Erscheinungsbild der restlichen Seite auf. Sie sollte wie folgt aussehen.

   Abbildung 2: Add-In-Webpart "Bestellung aufgeben"

   

4. Geben Sie Werte für Lieferant, Produkt und Menge ein, und wählen Sie dann Bestellung aufgeben aus. Es scheint nichts zu geschehen, aber eine Bestellung wird in der Unternehmensdatenbank eingegeben. Optional können Sie die Felder des Add-In-Webparts leeren, indem Sie die Seite aktualisieren.

5. Verwenden Sie die Zurück-Schaltfläche des Browsers, bis Sie wieder auf der Startseite des Chain Store-Add-Ins sind, und wählen Sie dann Bestellungen anzeigen aus. Ihre neue Bestellung ist jetzt aufgelistet.

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

7. Da Sie mit diesem Add-In und dieser Visual Studio-Lösung in anderen Artikeln arbeiten werden, hat es sich bewährt, das Add-In ein letztes Mal zurückzuziehen, wenn Sie Ihre Arbeit daran für eine Weile abgeschlossen haben. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie die Option Zurückziehen aus.

Nächste Schritte

Das Add-In hängt von zwei Listen ab, die Sie manuell erstellt haben. Sie möchten nicht, dass Ihre Benutzer dies tun müssen. Im nächsten Artikel beginnen Sie mit der automatischen Erstellung dieser Listen. Der erste wichtige Schritt besteht darin, benutzerdefinierte Handler für das Ereignis der Installation eines Add-Ins zu erstellen: Behandeln von Add-In-Ereignissen im vom Anbieter gehosteten Add-In.