Erste Schritte zum Erstellen SharePoint-gehosteter SharePoint-Add-InsGet started creating SharePoint-hosted SharePoint Add-ins

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:SharePoint-hosted add-ins are one of the two major types of SharePoint Add-ins. For an overview of SharePoint Add-ins and the two different types, see SharePoint Add-ins. Here's a summary of SharePoint-hosted 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.They contain SharePoint lists, web parts, workflows, custom pages, and other components, all of which are installed on a subweb, called the add-in web, of the SharePoint website where the add-in is installed.
  • Sie bestehen ausschließlich aus JavaScript-Code auf benutzerdefinierten SharePoint-Seiten.The only code they have is JavaScript on custom SharePoint pages.

In diesem Artikel führen Sie die folgenden Schritte aus:In this article, you'll complete the following steps:

  • Einrichten der EntwicklungsumgebungSet up your dev environment
  • Erstellen des Add-In-ProjektsCreate the add-in project
  • Codieren Ihres Add-InsCode your add-in
  • Ausführen des Add-Ins und Testen der ListeRun the add-in and test the list

Einrichten der EntwicklungsumgebungSet up your dev environment

Es gibt zahlreiche verschiedene Möglichkeiten, eine Entwicklungsumgebung für SharePoint-Add-Ins einzurichten. In diesem Abschnitt wird die einfachste von ihnen beschrieben.There are many ways to set up a development environment for SharePoint Add-ins. This section explains the simplest way.

Installieren der ToolsGet the 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.For Visual Studio 2017, installing the Microsoft Office Developer Tools should be done through the Visual Studio 2017 Installer, which can be accessed from the New Project window.

Als Referenz dienen frühere Versionen von Visual Studio oder andere Visual Studio-Dokumentation.Reference earlier versions of Visual Studio or other Visual Studio documentation.

Registrieren für ein Office 365-EntwicklerabonnementSign up for an Office 365 developer subscription

Hinweis

Möglicherweise haben Sie bereits Zugriff auf ein Office 365-Entwicklerabonnement:You might already have access to an Office 365 developer subscription:

So erhalten Sie einen Office 365-Plan:To get an Office 365 plan:

Öffnen der EntwicklerwebsiteOpen your developer site

Navigieren Sie in einem Browser zu der SharePoint-Websitesammlung, die Sie beim Einrichten Ihres Office 365-Entwicklerabonnements erstellt haben.In a browser, navigate to the SharePoint site collection you created when you setup your Office 365 developer subscription. (Wenn Sie über keine Website verfügen, befolgen Sie die hier aufgeführten Anweisungen).(If you don't have a site, follow the instructions here). Nun sollten Sie eine Website sehen, die wie die folgende Abbildung aussieht.You should see a site that looks like the one in the following figure. 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.The Apps / Add-ins in Testing list on the page confirms that the website was made with the SharePoint Developer Site template. Falls stattdessen eine normale Teamwebsite angezeigt wird: Warten Sie einige Minuten, und starten Sie dann die Website neu.If you see a regular team site instead, wait a few minutes and then restart your site.

Hinweis

Notieren Sie die URL der Website. Diese wird verwendet, wenn Sie SharePoint-Add-In-Projekte in Visual Studio erstellen.Make a note of the site's URL; it's used when you create SharePoint Add-in projects in Visual Studio.

Die Startseite Ihrer Entwicklerwebsite mit der Liste der Apps/Add-Ins im TestYour developer site home page with the Apps / Add-ins in Testing list

Screenshot, auf dem die Entwicklerwebsite-Startseite angezeigt ist

Erstellen des Add-In-ProjektsCreate the add-in project

  1. Starten Sie Visual Studio mit der Option Als Administrator ausführen.Start Visual Studio by using the Run as administrator option.

  2. Klicken Sie in Visual Studio auf Datei > Neu > Neues Projekt.In Visual Studio, select File > New > New Project.

  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.In the New Project dialog box, expand the Visual C# node, expand the Office/SharePoint node, and then select Add-ins > Add-in for SharePoint.

  4. Geben Sie dem Projekt den Namen EmployeeOrientation, und klicken Sie auf OK.Name the project EmployeeOrientation, and then select 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.In the Specify the Add-in for SharePoint Settings dialog box, provide the full URL of the SharePoint site that you want to use to debug your add-in. Gemeint ist die URL der Entwicklerwebsite.This is the URL of the developer site. (Verwenden Sie HTTPS in der URL, nicht HTTP.) Wählen Sie unter Wie soll Ihr SharePoint-Add-In gehostet werden? die Option Von SharePoint gehostet aus, und klicken Sie auf Fertig stellen.(Use HTTPS, not HTTP in the URL.) Under How do you want to host your SharePoint Add-in, select SharePoint-hosted, and then select Finish.

  6. Möglicherweise werden Sie aufgefordert, sich bei Ihrer Entwicklerwebsite anzumelden.You may be prompted to sign in to your developer site. Verwenden Sie in diesem Fall die Anmeldeinformationen des Abonnementadministrators.If so, use your subscription administrator's credentials.

  7. Das Projekt wird erstellt. Öffnen Sie im Stammverzeichnis des Projekts die Datei /Pages/Default.aspx.After the project is created, open the file /Pages/Default.aspx from the root of the project. Unter anderem lädt diese generierte Datei eines oder beide der zwei Skripts, die in SharePoint gehostet werden: „sp.runtime.js“ und „sp.js“.Among other things, this generated file loads one or both of two scripts that are hosted on SharePoint: sp.runtime.js and sp.js. Das Markup zum Laden dieser Dateien befindet sich im Steuerelement des Typs Content mit der ID PlaceHolderAdditionalPageHead am Anfang der Datei.The markup for loading these files is in the Content control near the top of the file that has the ID PlaceHolderAdditionalPageHead. Dieses Markup unterscheidet sich je nach der verwendeten Version von Microsoft Office Developer Tools für Visual Studio.The markup varies depending on the version of Microsoft Office Developer Tools for Visual Studio that you are using. 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>.This series of tutorials requires that both files be loaded and that they be loaded with ordinary HTML <script> tags, not <SharePoint:ScriptLink> tags.

    Stellen Sie sicher, dass das Steuerelement PlaceHolderAdditionalPageHead die nachfolgenden Zeilen enthält, und zwar direkt oberhalb der Zeile <meta name="WebPartPageExpansion" content="full" />:Ensure that the following lines are in the PlaceHolderAdditionalPageHead control, just above the line <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.Search the file for any other markup that also loads one or the other of these files and remove the redundant markup. Speichern und schließen Sie die Datei.Save and close the file.

Programmieren des Add-InsCode your add-in

In Ihr erstes SharePoint-gehostetes SharePoint-Add-In integrieren wir die klassische SharePoint-Erweiterung: eine benutzerdefinierte Liste und eine Instanz dieser Liste.For your first SharePoint-hosted SharePoint Add-in, we'll include the classic SharePoint extension: a custom list and list instance.

  1. Öffnen Sie im Projektmappen-Explorer die Datei „AppManifest.xml".In Solution Explorer, open the AppManifest.xml file.

  2. Der Manifest-Designer wird geöffnet. Ändern Sie die Zeichenfolge im Feld Titel in Orientierung für Mitarbeiter.When the manifest designer opens, add a space between the words in the Title field so that it reads Employee Orientation. (Ändern Sie keinesfalls das Feld Name.)(Do not change the Name field.)

  3. Speichern und schließen Sie die Datei.Save and close the file.

  4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie die Option Hinzufügen > Neuer Ordner aus.Right-click the project in Solution Explorer and select Add > New Folder. Geben Sie dem Ordner den Namen „Listen“.Name the folder Lists.

  5. Klicken Sie mit der rechten Maustaste auf den neuen Ordner, und wählen Sie die Option Hinzufügen > Neues Element aus.Right-click the new folder and select Add > New Item. Das Dialogfeld Neues Element hinzufügen wird geöffnet, und der Knoten Office/SharePoint wird angezeigt.The Add New Item dialog opens to the Office/SharePoint node.

  6. Klicken Sie auf Liste.Select List. Geben Sie der Liste den Namen NewEmployeeOrientation, und klicken Sie auf Hinzufügen.Give it the name NewEmployeeOrientation, and then select Add.

  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.On the Choose List Settings page of the SharePoint Customization Wizard, leave the list display name at the default NewEmployeeOrientation, select the Create a customizable list template and a list instance of it option button, select Default (Custom List) on the drop-down list, and then select Finish.

  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.The wizard creates a NewEmployeeOrientation list template with a child list instance named NewEmployeeOrientationInstance. A list designer may open. It is used in a later step.

  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.Expand the NewEmployeeOrientationInstance node in Solution Explorer, if it isn't already, so that you can clearly distinguish the elements.xml file that is a child of the list instance from the elements.xml file that is a child of the list template.

    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 das untergeordnete Element „elements.xml“ der Listenvorlage NewEmployeeOrientation.Open the elements.xml child of the NewEmployeeOrientation list template.

  11. Fügen Sie in das Attribut DisplayName (nicht in das Attribut Name) Leerzeichen ein, damit es besser lesbar ist: „New Employee Orientation“.Add spaces to the DisplayName attribute (not the Name attribute) to make it friendlier: "New Employee Orientation."

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

  13. Übernehmen Sie für alle anderen Attribute jeweils den Standardwert, speichern Sie die Datei, und schließen Sie sie.Leave all other attributes at their default, save the file, and close it.

  14. Falls der Listen-Designer noch nicht geöffnet ist: Klicken Sie im Projektmappen-Explorer auf den Knoten NewEmployeeOrientation.If the list designer is not open, select the NewEmployeeOrientation node in Solution Explorer.

  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.Open the List tab of the designer. This tab is used to set certain values for the list instance, not the list template, but it has some default values that it inherited from the template.

  16. Ändern Sie die Werte auf der Registerkarte Liste wie folgt:Change the values on the List tab to the following:

    • Titel: Neue Mitarbeiter in SeattleTitle: New Employees in Seattle
    • Listen-URL: Listen/NewEmployeesInSeattleList URL: Lists/NewEmployeesInSeattle
    • Beschreibung: Die neuen Mitarbeiter in SeattleDescription: The new employees in Seattle
  17. Übernehmen Sie den Standardstatus der Kontrollkästchen, speichern Sie die Datei, und schließen Sie den Designer.Leave the check boxes at their default status, save the file, and then close the designer.

  18. Im Projektmappen-Explorer wird möglicherweise noch der alte Name der Listeninstanz angezeigt.The list instance may have its old name in Solution Explorer. Sollte das der Fall sein: Öffnen Sie das Kontextmenü von NewEmployeeOrientationInstance, klicken Sie auf Umbenennen, und ändern Sie den Namen in NewEmployeesInSeattle.If so, open the shortcut menu for NewEmployeeOrientationInstance, select Rename, and change the name to NewEmployeesInSeattle.

  19. Öffnen Sie die Datei „schema.xml“.Open the schema.xml file.

  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.)In the View element whose BaseViewID value is "0", replace the existing ViewFields element with the following markup (use exactly this GUID for the FieldRef named Title). Zeilenumbrüche können in der automatisch generierten Datei „schema.xml“ an ungewöhnlichen Stellen gesetzt sein.Line breaks may come at odd places in this autogenerated schema.xml file. Vergewissern Sie sich, dass Sie wirklich das Starttag und das Endtag des Elements ViewFields gefunden haben.Be sure you have found the matching begin and end tags for the ViewFields element. Fügen Sie Zeilenumbrüche ein, um den Code besser lesbar zu machen.Add line breaks to improve readability.

    <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.)Still in the schema.xml file, in the View element whose BaseViewID value is "1", replace the existing ViewFields element with the following markup (use exactly this GUID for the FieldRef named LinkTitle).

    <ViewFields>
      <FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Employee" />
    </ViewFields>
    
  22. Speichern und schließen Sie die Datei „schema.xml“.Save and close the schema.xml file.

  23. Öffnen sie die Datei „elements.xml“, die ein untergeordnetes Element der Listeninstanz NewEmployeesInSeattle ist (nicht die Datei „elements.xml“, die ein untergeordnetes Element der Listenvorlage NewEmployeeOrientation ist).Open the elements.xml file that is a child of the list instance NewEmployeesInSeattle (not the elements.xml that is a child of the list template NewEmployeeOrientation).

  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.In this file, populate the list with some initial data. You do this by adding the following Data element markup as a child element of the ListInstance element.

    <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.Save and close the file.

  26. Doppelklicken Sie im Projektmappen-Explorer auf Feature1, um den Feature-Designer zu öffnen.In Solution Explorer, double-click Feature1 to open the Feature designer. 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.In the designer, set the Title to New Employee Orientation Components and set the Description to Lists and other components for getting employees oriented to the company. Speichern Sie die Datei, und schließen Sie den Designer.Save the file, and then close the 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.If the Feature1 in Solution Explorer has not been automatically renamed, open its shortcut menu, select Rename, and rename it to NewEmployeeOrientationComponents.

  28. Öffnen Sie die Datei „Default.aspx“.Open the Default.aspx file.

  29. Suchen Sie das ASP.NET-Element des Typs Content mit der ID PlaceHolderPageTitleInTitleArea.Find the ASP.NET Content element with the ID PlaceHolderPageTitleInTitleArea. Ersetzen Sie die Standardzeichenfolge Page Title durch Neue Mitarbeiter nach Standort.Replace the default string Page Title with New Employees by Location.

  30. Suchen Sie das ASP.NET-Element des Typs Content mit der ID PlaceHolderMain.Find the ASP.NET Content element with the ID PlaceHolderMain. Ersetzen Sie dessen Inhalt durch das unten aufgeführte Markup.Replace its contents with the following markup. _spPageContextInfo ist ein JavaScript-Objekt, das von SharePoint automatisch in die Seite integriert wird.The _spPageContextInfo is a JavaScript object that SharePoint automatically includes on the page. Die Eigenschaft webAbsoluteUrl dieses Objekts gibt die URL des Add-In-Webs zurück.It's webAbsoluteUrl property returns the URL of the add-in web.

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

Ausführen des Add-Ins und Testen der ListeRun the add-in and test the list

  1. Drücken Sie die Taste F5, um das Add-In bereitzustellen und auszuführen.Use the F5 key to deploy and run your add-in. Visual Studio installiert das Add-In vorübergehend auf Ihrer SharePoint-Testwebsite und führt das Add-In sofort aus.Visual Studio makes a temporary installation of the add-in on your test SharePoint site and immediately runs the add-in. (Weitere Informationen dazu, wie Endbenutzer ein installiertes SharePoint-Add-In ausführen können, finden Sie unter Nächste Schritte).(To find out how end users run an installed SharePoint Add-in, see Next Steps.)

  2. Die Standardseite des Add-Ins wird geöffnet. Klicken Sie auf Neue Mitarbeiter in Seattle, um die Instanz der benutzerdefinierten Liste zu öffnen.When the add-in's default page opens, select the New Employees in Seattle link to open the custom list instance.

    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 aus der Liste.Add and delete items from the list.

  4. 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.To end the debugging session, close the browser window or stop debugging in Visual Studio. Each time that you press F5, Visual Studio will retract the previous version of the add-in and install the latest one.

  5. 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.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 finished working with it for a while. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie die Option Zurückziehen aus.Right-click the project in Solution Explorer, and select Retract.

Nächste SchritteNext steps

Um Ihre Add-Ins zu erstellen, führen Sie die folgenden Schritte in der folgenden Reihenfolge aus:To create your add-ins, walk through the following steps in this order:

  1. Bereitstellung und Installation eines von SharePoint gehosteten SharePoint-Add-InsDeploy and install a SharePoint-hosted SharePoint Add-in
  2. Hinzufügen von Spalten zu einem von SharePoint gehosteten SharePoint-Add-InAdd custom columns to a SharePoint-hosted SharePoint Add-in
  3. Hinzufügen eines benutzerdefinierten Inhaltstyps zu einem von SharePoint gehosteten SharePoint-Add-InAdd a custom content type to a SharePoint-hosted SharePoint Add-in
  4. Hinzufügen eines Webparts zu einer Seite in einem von SharePoint gehosteten SharePoint-Add-InAdd a web part to a page in a SharePoint-hosted SharePoint Add-in
  5. Hinzufügen eines Workflows zu einem von SharePoint gehosteten SharePoint-Add-InAdd a workflow to a SharePoint-hosted SharePoint Add-in
  6. Hinzufügen einer benutzerdefinierten Seite und Formatvorlage zu einem von SharePoint gehosteten Add-In für SharePointAdd a custom page and style to a SharePoint-hosted SharePoint Add-in
  7. Hinzufügen des benutzerdefinierten clientseitigen Renderings für ein von SharePoint-gehostetes SharePoint Add-InAdd custom client-side rendering to a SharePoint-hosted SharePoint Add-in
  8. Erstellen einer benutzerdefinierten Menübandschaltfläche im Hostweb eines SharePoint-Add-InsCreate a custom ribbon button in the host web of a SharePoint Add-in
  9. Verwenden von SharePoint-JavaScript-APIs zum Arbeiten mit SharePoint-DatenUse the SharePoint JavaScript APIs to work with SharePoint data
  10. Arbeiten mit Hostwebdaten aus JavaScript im Add-In-WebWork with host web data from JavaScript in the add-in web