Erstellen einer benutzerdefinierten Menüband-Schaltfläche im Hostweb eines SharePoint-Add-InsCreate a custom ribbon button in the host web of a SharePoint Add-in

Dies ist der neunte einer Reihe von Artikeln über die Grundlagen der Entwicklung von von SharePoint 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 SharePoint gehosteten SharePoint-Add-Ins finden.This is the ninth in a series of articles about the basics of developing SharePoint-hosted SharePoint Add-ins. You should first be familiar with SharePoint Add-ins and the previous articles in this series, which you can find at Get started creating SharePoint-hosted SharePoint Add-ins.

Hinweis

Wenn Sie unsere Artikelreihe zum Thema SharePoint-gehostete Add-Ins durchgearbeitet haben, haben Sie bereits eine Visual Studio-Lösung, die Sie für diesen Artikel verwenden können.If you have been working through this series about SharePoint-hosted add-ins, you have a Visual Studio solution that you can use to continue with this topic. Sie können auch das Repository unter SharePoint_SP-hosted_Add-Ins_Tutorials herunterladen und die Datei „BeforeRibbon.sln“ öffnen.You can also download the repository at SharePoint_SP-hosted_Add-Ins_Tutorials and open the BeforeRibbon.sln file.

Alle SharePoint-Add-Ins können von der Seite Websiteinhalte des Hostwebs ausgeführt werden, indem Sie auf die Kachel des Add-Ins klicken.All SharePoint Add-ins can be run from the Site Contents page of the host web by selecting the add-in's tile. Die Funktionalität eines SharePoint-Add-Ins kann auch über benutzerdefinierte Aktionen im Hostweb zur Verfügung gestellt werden, die benutzerdefinierte Menübandschaltflächen oder benutzerdefinierte Menüelemente sind.The functionality of a SharePoint Add-in can also be exposed on the host web through custom actions, which are custom ribbon buttons or custom menu items. In diesem Artikel fügen Sie eine Schaltfläche zum Menüband eines Hostwebs hinzu.In this article you add a button to the ribbon on a host web.

Vorbereiten des HostwebsPrepare the host web

Zum Hinzufügen der Schaltfläche zum Menüband eines Kalenders im Hostweb führen Sie die folgenden Schritte in der Benutzeroberfläche Ihrer SharePoint-Entwicklerwebsite aus.To add the button to the ribbon of a calendar on the host web, take the following steps in the UI of your SharePoint developer site.

  1. Wählen Sie auf der Startseite der Website Websiteinhalte > Add-In hinzufügen > Kalender aus.From the home page of the site, select Site Contents > add and add-in > Calendar.

  2. Geben Sie im Dialogfeld Kalender hinzufügen für Name den Wert Planung für Orientierung für Mitarbeiter ein, und wählen Sie dann Erstellen aus.In the Adding Calendar dialog, for the Name, enter Employee Orientation Schedule, and then select Create.

  3. Wenn der Kalender geöffnet wird, setzen Sie den Cursor auf ein beliebiges Datum, bis der Link Hinzufügen auf dem Datum angezeigt wird, und wählen Sie dann Hinzufügen aus.When the calendar opens, put the cursor on any date until the Add link appears on the date, and then select Add.

  4. Geben Sie im Dialogfeld Planung für Orientierung für Mitarbeiter - neues Element für Titel den Text Orientierung Cassi Hicks ein.In the Employee Orientation Schedule - New Item dialog, for the Title, enter Orient Cassi Hicks. Behalten Sie für die anderen Felder die Standardwerte bei, und wählen Sie dann Speichern aus.Leave the other fields at their defaults, and then select Save.

    Der Kalender sollte ähnlich wie im folgenden Beispiel aussehen:The calendar should look similar to the following:

    Abbildung 1. Benutzerdefinierter KalenderFigure 1. Custom calendar

    Ein Kalender namens „Planung für Orientierung für Mitarbeiter“ mit dem Element „Orientierung Cassie Hicks“ am 1. Juni

Wichtig

Im nächsten Verfahren muss der Kalender in der Benutzeroberfläche von Visual Studio sichtbar sein, was aber nicht der Fall sein wird, wenn Visual Studio geöffnet war, als Sie den Kalender erstellt haben.The next procedure requires that the calendar be visible in the UI of Visual Studio, but it won't be if Visual Studio was open when you created the calendar. Bevor Sie fortfahren, schließen Sie Visual Studio, und melden Sie sich auch von allen Browserfenstern und PowerShell-Konsolen ab, mit denen Sie bei Ihrer Entwicklerwebsite angemeldet sind.Before you continue, close Visual Studio, and sign out of any browser windows and PowerShell consoles where you are signed in to your developer site.

Hinzufügen einer benutzerdefinierten MenübandaktionAdd a ribbon custom action

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt EmployeeOrientation, und wählen Sie Hinzufügen > Neues Element > Office/SharePoint > Benutzerdefinierte Menübandaktion aus.In Solution Explorer, right-click the EmployeeOrientation project, and select Add > New Item > Office/SharePoint > Ribbon Custom Action. Nennen Sie sie RunOrientationAdd-in, und wählen Sie dann Hinzufügen aus.Name it RunOrientationAdd-in, and then select Add.

  2. Der Assistent „Benutzerdefinierte Aktion für das Menüband erstellen“ stellt Ihnen eine Reihe von Fragen.The Create Custom Action for Ribbon Wizard asks you a series of questions. Geben Sie die Antworten aus der folgenden Tabelle ein, und wählen Sie dann Fertig stellen aus.Give the answers from the following table, and then select Finish.

    Frage zur EigenschaftProperty question AntwortAnswer
    Wo möchten Sie die benutzerdefinierte Aktion verfügbar machen?Where do you want to expose the custom action? Wählen Sie Hostweb aus.Select Host Web.
    Wo gilt die benutzerdefinierte Aktion?Where is the custom action scoped to? Wählen Sie Listeninstanz (nicht Listenvorlage) aus.Select List Instance (not List Template).
    Für welches spezielle Element gilt die benutzerdefinierte Aktion?Which particular item is the custom action scoped to? Wählen Sie Planung für Orientierung für Mitarbeiter aus.Select Employee Orientation Schedule.
    Wo befindet sich das Steuerelement?Where is the control located? Verwenden Sie nicht die Dropdown-Auswahlmöglichkeiten.Do not use the drop-down selections. Geben Sie stattdessen Ribbon.Calendar.Events.Actions.Controls._children ein.Instead, enter Ribbon.Calendar.Events.Actions.Controls._children. (Der dritte Teil, Events, identifiziert die Registerkarte des Menübands und der vierte Teil, Actions, identifiziert die Schaltflächengruppe.)(The third part, Events, identifies the tab of the ribbon, and the fourth part, Actions, identifies the button group.)
    Wie lautet der Text im Menüelement?What is the text on the menu item? Geben Sie Orientierung für Mitarbeiter ein.Enter Employee Orientation.
    Wohin navigiert die benutzerdefinierte Aktion?Where does the custom action navigate to? Verwenden Sie nicht die Dropdown-Auswahlmöglichkeiten.Do not use the drop-down selections. Geben Sie stattdessen ~appWebUrl/Lists/NewEmployeesInSeattle ein.Instead, enter ~appWebUrl/Lists/NewEmployeesInSeattle. Dies ist die Listenansichtsseite für die Liste, die sich im Add-In-Web befindet, damit die Menübandschaltfläche im Hostweb eine Seite im Add-In-Web öffnet.This is the list view page for the list, which is on the add-in web, so the ribbon button on the host web opens a page on the add-in web.

Überprüfen des Add-In-Web-FeaturesInspect the add-in web feature

Erweitern Sie im Projektmappen-Explorer den Ordner Features, und wählen Sie das Feature NewEmployeeOrientationComponents aus.In Solution Explorer, expand the Features folder, and select the NewEmployeeOrientationComponents feature. Der Feature-Designer wird geöffnet.The Feature designer opens.

Beachten Sie, dass die benutzerdefinierte Aktion, die Sie erstellt haben, RunOrientationAdd-in, in Elemente in der Lösung, jedoch nicht in Elemente im Feature aufgelistet wird.Notice that the custom action that you created, RunOrientationAdd-in, is listed in Items in the solution, but not in Items in the feature. Der Grund dafür ist, dass das Feature an das Add-In-Web, Ihre benutzerdefinierte Aktion aber an das Hostweb bereitgestellt wird.This is because the feature is deployed to the add-in web, but your custom action is deployed to the host web.

Wenn Sie das Add-In in Visual Studio zur Bereitstellung für die Produktion packen oder F5 in Visual Studio drücken, erstellen die Office Developer Tools für Visual Studio ein spezielles Hostwebfeature, fügen die benutzerdefinierte Aktion hinzu und stellen sie an das Hostweb bereit.When you package the add-in in Visual Studio for deployment to production, or when you select F5 in Visual Studio, the Office Developer Tools for Visual Studio creates a special host web feature, adds the custom action to it, and deploys it to the host web. Sie sollten das Hostwebfeature niemals bearbeiten. Darum wird es erst zum Zeitpunkt des Packens erstellt.You should never edit the host web feature; that is why it is not created until packaging time.

Abbildung 2. Feature-DesignerFigure 2. Feature designer

Feature-Designer mit Spalten namens „Elemente in der Lösung“ und „Elemente im Feature“.

Ausführen und Testen des Add-InsRun and test the add-in

  1. 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.Use the F5 key to deploy and run your add-in. Visual Studio makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in.

  2. Die Standardseite des SharePoint-Add-Ins wird geöffnet.The default page of the SharePoint Add-in opens. Navigieren Sie zur Startseite Ihrer Entwicklerwebsite (die das Hostweb ist).Go to the home page of your developer site (which is the host web). In der linken oberen Ecke der Seite finden Sie einen Breadcrumblink dahin.There is a breadcrumb link to it in the upper-left corner of the page.

  3. Wählen Sie auf der Startseite des Hostwebs Websiteinhalte aus, und wählen Sie auf der Seite Websiteinhalte den Kalender Planung für Orientierung für Mitarbeiter aus (nicht das Add-In Orientierung für Mitarbeiter).On the host web's home page, select Site Contents, and on the Site Contents page, select the Employee Orientation Schedule calendar (not the Employee Orientation add-in).

  4. Wenn der Kalender geöffnet wird, wählen Sie das Ereignis Orientierung Cassie Hicks aus.When the calendar opens, select the event Orient Cassie Hicks. Wenn die Registerkarte Ereignisse im Menüband nicht automatisch geöffnet wird, öffnen Sie sie.If the Events tab on the ribbon doesn't open automatically, open it. Sie sollte ähnlich wie im folgenden Beispiel aussehen:It should look similar to the following:

    Abbildung 3. Menüband-Registerkarte „Ereignisse“ mit benutzerdefinierter SchaltflächeFigure 3. Events ribbon tab with custom button

    Das Menüband „Ereignisse“ mit einer benutzerdefinierten Schaltfläche namens „Orientierung für Mitarbeiter“

  5. Wählen Sie in der Gruppe Aktionen im Menüband die Option Orientierung für Mitarbeiter aus.In the Actions group on the ribbon, select Employee Orientation. Die Listenansichtsseite für Neue Mitarbeiter in Seattle wird geöffnet.The list view page for New Employees in Seattle opens.

  6. Schließen Sie zum Beenden der Debugsitzung das Browserfenster, oder beenden Sie das Debuggen in Visual Studio.To end the debugging session, close the browser window or stop debugging 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.Each time that you select F5, Visual Studio will retract the previous version of the add-in and install the latest one.

  7. You will work with this add-in and Visual Studio solution in other articles, and it's a good practice to retract the add-in one last time when you are done working with it for a while. Right-click the project in Solution Explorer and select Retract.You will work with this add-in and Visual Studio solution in other articles, and it's a good practice to retract the add-in one last time when you are done working with it for a while. Right-click the project in Solution Explorer and select Retract.

Nächste SchritteNext steps

Im nächsten Artikel dieser Reihe fügen Sie JavaScript zum SharePoint-Add-In hinzu und greifen auf SharePoint-Daten mit dem JavaScript-Objektmodell von SharePoint zu: Verwenden von SharePoint-JavaScript-APIs zum Arbeiten mit SharePoint-Daten.In the next article in this series, you'll add JavaScript to the SharePoint Add-in and access SharePoint data with SharePoint's JavaScript object model: Use the SharePoint JavaScript APIs to work with SharePoint data.