Bereitstellen von SharePoint-Ressourcen aus Ihrem clientseitigen SharePoint-WebpartProvision SharePoint assets from your SharePoint client-side web part

SharePoint-Objekte können im Rahmen der SharePoint Framework-Lösung bereitgestellt werden und werden auf SharePoint-Websites bereitgestellt, wenn die Lösung darauf installiert wird.SharePoint assets can be provisioned as part of the SharePoint Framework solution, and are deployed to SharePoint sites when the solution is installed on it.

Bevor Sie beginnen, führen Sie die Schritte in den folgenden Artikeln aus, um sicherzustellen, dass Sie den grundlegenden Fluss des Erstellens eines benutzerdefinierten, clientseitigen Webparts verstehen:Before you start, complete the procedures in the following articles to ensure that you understand the basic flow of creating a custom client-side web part:

Sie können die nachfolgend beschriebene Anleitung auch anhand dieses Videos in unserem YouTube-Kanal „SharePoint Patterns & Practices“ nachvollziehen:You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:

Erstellen eines neuen Webpart-ProjektsCreate a new web part project

  1. Erstellen Sie an einem Speicherort Ihrer Wahl ein neues Projektverzeichnis:Create a new project directory in your favorite location:

    md asset-deployment-webpart
    
  2. Wechseln Sie in das Projektverzeichnis:Go to the project directory:

    cd asset-deployment-webpart
    
  3. Führen Sie den Yeoman-SharePoint-Generator aus, um eine neue clientseitige Webpartlösung zu erstellen:Create a new client-side web part solution by running the Yeoman SharePoint Generator:

    yo @microsoft/sharepoint
    
  4. Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Werte ein (wählen Sie für alle unten nicht aufgeführten Eingabeaufforderungen die Standardoption aus):When prompted, enter the following values (select the default option for all prompts omitted below):

  • Wie lautet der Name Ihrer Lösung?: asset-deployment-webpartWhat is your solution name?: asset-deployment-webpart

  • Welcher Typ von clientseitiger Komponente soll erstellt werden?: WebPartWhich type of client-side component to create?: WebPart

  • Wie lautet der Name Ihres Webparts?: AssetDeploymentWhat is your Web part name?: AssetDeployment

  • Welches Framework möchten Sie verwenden?: kein JavaScript-WebframeworkWhich framework would you like to use?: No JavaScript web framework

    An diesem Punkt installiert Yeoman die erforderlichen Abhängigkeiten und erstellt ein Gerüst für die Lösungsdateien.At this point, Yeoman installs the required dependencies and scaffolds the solution files. Das kann einige Minuten dauern.This might take a few minutes. Yeoman erstellt ein Gerüst für das Projekt, um auch das AssetDeployment-Webpart einzuschließen.Yeoman scaffolds the project to include your AssetDeployment web part as well.

  1. Führen Sie dann Folgendes aus, um das Webpartprojekt in Visual Studio Code zu öffnen:Next, execute the following to open the web part project in Visual Studio Code:

    code .
    

Erstellen der Ordnerstruktur für Ihre SharePoint-RessourcenCreate folder structure for your SharePoint assets

Wir müssen zuerst einen Ressourcenordner erstellen, in dem die gesamten Featureframeworkressourcen platziert werden, die zum Bereitstellen von SharePoint-Strukturen verwendet werden, wenn das Paket installiert wird.We first need to create an assets folder where we place all feature framework assets used to provision SharePoint structures when a package is installed.

  1. Erstellen Sie einen Ordner mit dem Namen Sharepoint auf der Stammebene der Lösung.Create a folder called sharepoint to the root of the solution.

  2. Erstellen Sie einen Ordner mit dem Namen Ressourcen als Unterordner für den erstellten Sharepoint-Ordner.Create a folder called assets as a subfolder for the created sharepoint folder.

    Die Lösungsstruktur sollte in etwa wie folgt aussehen:Your solution structure should look like the following picture:

    Screenshot, in dem der Ressourcenordner unter dem SharePoint-Ordner in der Lösungsstruktur angezeigt wird

Erstellen von Featureframeworkdateien für die anfängliche BereitstellungCreate feature framework files for initial deployment

Um SharePoint-Ressourcen auf Websites mit Featureframework-Elementen bereitzustellen, müssen wir die erforderlichen XML-Dateien für den Ressourcenordner erstellen.To provision SharePoint assets to sites with feature framework elements, we need to create needed XML files to the asset folder. Unterstützte Elemente für die SharePoint Framework-Lösungspakete sind wie folgt:Supported elements for the SharePoint Framework solution packages are following:

  • Felder/WebsitespaltenFields / site columns
  • InhaltstypenContent types
  • ListeninstanzenList instances
  • Listeninstanzen mit benutzerdefiniertem SchemaList instances with custom schema

Fügen Sie eine Datei „elements.xml“ für SharePoint-Definitionen hinzuAdd an element.xml file for SharePoint definitions

In den folgenden Schritten wird die erforderliche Struktur definiert, die bereitgestellt werden soll.In the following steps, we define the needed structure to be provisioned.

  1. Erstellen Sie eine neue Datei elements.xml im Ordner sharepoint\assets.Create a new file elements.xml in the sharepoint\assets folder.

  2. Kopieren Sie die folgende XML-Struktur in elements.xml.Copy the following XML structure into elements.xml.

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    
        <Field ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}"
                Name="SPFxAmount"
                DisplayName="Amount"
                Type="Currency"
                Decimals="2"
                Min="0"
                Required="FALSE"
                Group="SPFx Columns" />
    
        <Field ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}"
                Name="SPFxCostCenter"
                DisplayName="Cost Center"
                Type="Choice"
                Required="FALSE"
                Group="SPFx Columns">
            <CHOICES>
            <CHOICE>Administration</CHOICE>
            <CHOICE>Information</CHOICE>
            <CHOICE>Facilities</CHOICE>
            <CHOICE>Operations</CHOICE>
            <CHOICE>Sales</CHOICE>
            <CHOICE>Marketing</CHOICE>
            </CHOICES>
        </Field>
    
        <ContentType ID="0x010042D0C1C200A14B6887742B6344675C8B"
                Name="Cost Center"
                Group="SPFx Content Types"
                Description="Sample content types from web part solution">
            <FieldRefs>
                <FieldRef ID="{060E50AC-E9C1-4D3C-B1F9-DE0BCAC300F6}" />
                <FieldRef ID="{943E7530-5E2B-4C02-8259-CCD93A9ECB18}" />
            </FieldRefs>
        </ContentType>
    
        <ListInstance
                CustomSchema="schema.xml"
                FeatureId="00bfea71-de22-43b2-a848-c05709900100"
                Title="SPFx List"
                Description="SPFx List"
                TemplateType="100"
                Url="Lists/SPFxList">
        </ListInstance>
    
    </Elements>
    

Es gibt einige Dinge, die Sie in diesem XML-Code beachten sollten:There are a few things to take note of from this XML:

  • Wir stellen zwei Felder, den Inhaltstyp und eine Listeninstanz mit benutzerdefiniertem Schema auf der Website bereit.We're provisioning two fields to the site, a content type and a list instance with custom schema.
  • Definitionen verwenden das Standardschema für das Featureframework, das SharePoint-Entwickler gut kennen.Definitions use standard Feature Framework schema, which is well known to SharePoint developers.
  • Auf benutzerdefinierte Felder wird in dem eingeführten Inhaltstyp verwiesen.Custom fields are being referenced in the introduced content type.
  • Wir verwenden die CustomSchema-Attribute im ListInstance-Element, um die schema.xml-Datei mit der Bereitstellungszeit für die Liste zu definieren.We use the CustomSchema attribute in the ListInstance element to define a provisioning time schema.xml file for the list. Auf diese Weise basiert die Liste immer noch auf der einsatzbereiten Listenvorlage (die normale benutzerdefinierte Liste „100“ in diesem Fall), es kann jedoch während der anfänglichen Bereitstellung eine alternative Bereitstellungsdefinition definiert werden.This way the list is still based on the out-of-the-box list template (normal custom list '100' in this case), but we can define an alternative provisioning definition during initial provisioning.
  • Beim Bereitstellen von Listeninstanzen mit Features müssen Sie die ID des Features angeben, das mit der jeweiligen Listendefinition verknüpft ist.When provisioning list instances using Features, you must provide the ID of the Feature associated with the particular list definition. Mit dem FeatureId-Attribut können Sie die ID des Features bereitstellen, das die Listendefinition enthält.Using the FeatureId attribute you're supposed to provide the ID of the Feature, which contains the List Definition. Beispiel: Wenn Sie eine Instanz einer benutzerdefinierten Liste bereitstellen, muss das FeatureId-Attribut auf {00bfea71-de22-43b2-a848-c05709900100} festgelegt werden.As an example: if you’re provisioning an instance of a custom list the FeatureId attribute should be set to {00bfea71-de22-43b2-a848-c05709900100}.

Weitere Einzelheiten zum Schema des Featureelement-Manifests finden Sie unter: Verwenden von Features in SharePoint Foundation.For more detail on the Feature element manifest schema, see: Using Features in SharePoint Foundation.

Fügen Sie die Datei „schema.xml“ zum Definieren der Listenstruktur hinzuAdd a schema.xml file for defining list structure

Im vorherigen Schritt haben wir auf die Datei schema.xml im CustomSchema-Attribut des ListInstance-Elements verwiesen, diese Datei muss also in das Paket eingeschlossen werden.In the previous step, we referenced the schema.xml file in the CustomSchema attribute of the ListInstance element, so we need to include that file in our package.

  1. Erstellen Sie eine neue Datei schema.xml im Ordner sharepoint\assets.Create a new file schema.xml in the sharepoint\assets folder.

  2. Kopieren Sie die folgende XML-Struktur in schema.xml.Copy the following XML structure into schema.xml.

    <List xmlns:ows="Microsoft SharePoint" Title="Basic List" EnableContentTypes="TRUE" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/Basic List" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">
      <MetaData>
        <ContentTypes>
          <ContentTypeRef ID="0x010042D0C1C200A14B6887742B6344675C8B" />
        </ContentTypes>
        <Fields></Fields>
        <Views>
          <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="AllItems.aspx">
            <XslLink Default="TRUE">main.xsl</XslLink>
            <JSLink>clienttemplates.js</JSLink>
            <RowLimit Paged="TRUE">30</RowLimit>
            <Toolbar Type="Standard" />
            <ViewFields>
              <FieldRef Name="LinkTitle"></FieldRef>
              <FieldRef Name="SPFxAmount"></FieldRef>
              <FieldRef Name="SPFxCostCenter"></FieldRef>
            </ViewFields>
            <Query>
              <OrderBy>
                <FieldRef Name="ID" />
              </OrderBy>
            </Query>
          </View>
        </Views>
        <Forms>
          <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
          <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
          <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
        </Forms>
      </MetaData>
    </List>
    

Es gibt einige Dinge, die Sie in diesem XML-Code beachten sollten:There are a few things to take note of from this XML:

  • Auf den benutzerdefinierten Inhaltstyp, der unter Verwendung der Datei elements.xml bereitgestellt wird, wird im ContentTypeRef-Element verwiesen.The custom content type deployed by using the elements.xml file is referenced in the ContentTypeRef element.
  • Im FieldRef-Element wird auf benutzerdefinierte Felder namens SPFxAmount und SPFxCostCenter verwiesen.Custom fields called SPFxAmount and SPFxCostCenter are referenced in the FieldRef element.

Weitere Informationen zum Schema Schema.xml finden Sie unter: Grundlegendes zu Schema.xml-Dateien.For more information about the Schema.xml schema, see: Understanding Schema.xml Files.

Stellen Sie sicher, dass Definitionen in der Buildpipeline verwendet werdenEnsure that definitions are taken into use in build pipeline

Zu diesem Zeitpunkt haben wir die Dateien für die Bereitstellung von SharePoint-Ressourcen mithilfe des Feature-Schemas der Lösung erstellt, wenn diese bereitgestellt wird.At this point, we've created the files for provisioning SharePoint assets using the Feature schema from the solution when it's deployed. Der nächste Schritt besteht darin, sie in die *.sppkg-Datei des SharePoint-Pakets aufzunehmen.The next step is to include them in the SharePoint package *.sppkg file.

  1. Öffnen Sie package-solution.json im Ordner „config“.Open package-solution.json from the config folder.

    Die Datei package-solution.json definiert die Paketmetadaten, wie im folgenden Code dargestellt:The package-solution.json file defines the package metadata as shown in the following code:

  2. Stellen Sie sicher, dass die neuen Featureframework-Dateien im SharePoint-Paket enthalten sind.Ensure the new Feature Framework files included in the SharePoint Package.

    Verwenden Sie eine Featureframework-Featuredefinition für das Lösungspaket.Include a Feature Framework feature definition for the solution package. Fügen Sie eine JSON-Definition für das erforderliche Feature in die Lösungsstruktur ein, wie im folgenden Code dargestellt:Include a JSON definition for the needed feature in the solution structure as demonstrated in the following code:

    {
      "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
      "solution": {
        //...
        "version": "1.0.0.0",
        "includeClientSideAssets": true,
        "isDomainIsolated": false,
        // >>> START
        //     add the following to the package-solution.json file
        "features": [{
          "title": "asset-deployment-webpart-client-side-solution",
          "description": "asset-deployment-webpart-client-side-solution",
          "id": "00000000-0000-0000-0000-000000000000",     // <-- Update new GUID
          "version": "1.0.0.0",
          "assets": {
            "elementManifests": [
              "elements.xml"
            ],
            "elementFiles":[
              "schema.xml"
            ]
          }
        }]
        // <<< END
      },
      "paths": {
        "zippedPackage": "solution/asset-deployment-webpart.sppkg"
      }
    }
    

Es gibt einige Dinge, die Sie in diesem XML-Code beachten sollten:There are a few things to take note of from this XML:

  • Sie müssen eine eindeutige GUID für die id-Eigenschaft in der feature-Eigenschaft definieren.Make sure you define a unique GUID for the id property in the feature property.
  • Sie können technisch gesehen mehrere Features im Paket haben, da die features-Eigenschaft ein Array ist.You can technically have multiple features in the package because the features property is an array. Dies wird jedoch nicht empfohlen.However, this isn't recommended.
  • Auf elements.xml wird unter elementManifests verwiesen, damit es ordnungsgemäß für die Featuredefinition als Elementmanifest-Datei gepackt wird.elements.xml is referenced under elementManifests so that it's properly packaged for the feature definition as an element manifest file.
  • In der Definition können mehrere element.xml-Dateien vorhanden sein, und diese würden in der Reihenfolge ausgeführt werden, in der sie in der JSON-Definition erwähnt werden.You can have multiple element.xml files in the definition, and they would be executed in the order they're mentioned in the JSON definition. Im Allgemeinen sollten Sie die Verwendung mehrerer element.xml-Dateien vermeiden, da dadurch eine unnötige Komplexität entsteht.Typically, you should avoid using multiple element.xml files because this adds unnecessary complexity. Sie können alle erforderlichen Ressourcen in einer einzigen element.xml-Datei definieren.You can define all needed assets in a single element.xml file.

Bereitstellen und Testen der Bereitstellung von RessourcenDeploy and test asset provisioning

Jetzt sind Sie bereit, die Lösung in SharePoint bereitzustellen.Now you're ready to deploy the solution to SharePoint. Da wir Ressourcen direkt auf SharePoint-Websites bereitstellen, wenn die Lösung installiert wird, können Sie die Funktion in der lokalen oder Online-Workbench nicht testen.Because we're provisioning assets directly to the SharePoint sites when the solution is installed, you can't test the capability in a local or online Workbench.

  1. Führen Sie in der Konsole den folgenden Befehl aus, um Ihre clientseitige Lösung, die das Webpart enthält, zu verpacken, damit die grundlegende Struktur für das Verpacken vorbereitet wird:In the console, execute the following command to package your client-side solution that contains the web part to get the basic structure ready for packaging:

    gulp bundle
    
  2. Führen Sie den folgenden Befehl aus, um das Lösungspaket zu erstellen:Execute the following command to create the solution package:

    gulp package-solution
    

    Der Befehl erstellt das Paket asset-deployment-webpart.sppkgim Ordner sharepoint/solution.The command creates the asset-deployment-webpart.sppkg package in the sharepoint/solution folder.

  3. Vor dem Testen des Pakets in SharePoint sehen wir uns schnell die Standardstrukturen an, die für das Paket um die definierten Featureframeworkelemente herum erstellt wurden.Before testing the package in SharePoint, let's quickly have a look on the default structures created for the package around the defined feature framework elements.

    Wechseln Sie zurück zur Seite von Visual Studio Code, und erweitern Sie den Ordner sharepoint/solution/debug, der die raw.xml-Strukturen enthält, die in das eigentliche *.sppkg-Paket eingeschlossen werden sollen.Move back to the Visual Studio Code side and expand the sharepoint/solution/debug folder, which contains the raw XML structures to be included in the actual *.sppkg package.

    Screenshot, in dem der Debugordner unter dem SharePoint-Ordner in der Lösungsstruktur angezeigt wird

  4. Stellen Sie das Paket, das generiert wurde, im App-Katalog bereit.Deploy the package that was generated to the app catalog.

    Navigieren Sie im Browser zum App-Katalog Ihres Mandanten.In the browser, navigate to your tenant's app catalog.

  5. Laden Sie das Paket asset-deployment-webpart.sppkg, das sich im Ordner sharepoint/solution befindet, in den App-Katalog hoch, oder platzieren Sie es dort per Drag & Drop.Upload or drag and drop the asset-deployment-webpart.sppkg located in the sharepoint/solution folder to the app catalog. In SharePoint wird ein Dialogfeld angezeigt, und Sie werden aufgefordert, der clientseitigen Lösung, die bereitgestellt werden soll, zu vertrauen.SharePoint displays a dialog and asks you to trust the client-side solution to deploy.

    Dialogfeld für die Vertrauensstellung für die Bereitstellung des Lösungspakets

    Hinweis

    SharePoint überprüft das veröffentlichte Paket, wenn es bereitgestellt wird.SharePoint validates the published package when it's deployed. Sie sehen den Vertrauensdialog nur, wenn das Paket für die Bereitstellung gültig ist.You only see the trust dialog if the package is valid for deployment. Sie können auch den Status dieser Überprüfung in der Spalte Gültiges App-Paket im App-Katalog anzeigen.You can also see the status around this validation from the Valid App Package column in the app catalog.

  6. Wechseln Sie zu der Website, auf der Sie die Bereitstellung der SharePoint-Ressource testen möchten.Go to the site where you want to test the SharePoint asset provisioning. Dies könnte eine Websitesammlung im Mandanten sein, auf dem Sie dieses Lösungspaket bereitgestellt haben.This could be any site collection in the tenant where you deployed this solution package.

  7. Klicken Sie auf der oberen Navigationsleiste rechts auf das Zahnradsymbol und anschließend auf App hinzufügen, um Ihre Apps-Seite aufzurufen.Select the gear icon on the top nav bar on the right, and then select Add an app to go to your Apps page.

  8. Geben Sie im Feld Suchen die Zeichenfolge deployment ein, und drücken Sie die EINGABETASTE, um Ihre Apps zu filtern.In the Search box, enter deployment, and then select ENTER to filter your apps.

    Suchen nach der App auf der Website

  9. Wählen Sie die App asset-deployment-webpart-client-side-solution aus, um die App auf der Website zu installieren.Select the asset-deployment-webpart-client-side-solution app to install the app on the site. Wenn die Installation abgeschlossen ist, aktualisieren Sie die Seite, indem Sie F5 drücken.When installation is completed, refresh the page by selecting F5. Beachten Sie, dass die benutzerdefinierte SPFx-Liste auf der Website als Teil der Lösungspaketbereitstellung bereitgestellt wurde.Notice how the custom SPFx List has been provisioned to site as part of the solution package deployment.

    Neue SPFx-Liste und App, die auf der Websiteinhaltsseite sichtbar sind, nachdem die Lösung bereitgestellt wurde

  10. Klicken Sie auf SPFx-Liste, um zu der Liste zu wechseln.Select SPFx List to move to the list. Beachten Sie, dass die benutzerdefinierten Felder Betrag und Kostenstelle automatisch in der Standardansicht der Liste angezeigt werden.Notice how the custom fields Amount and Cost Center are visible automatically in the default view of the list.

    Standardmäßige Listenansicht für eine benutzerdefinierte Liste, in der standardmäßig zusätzliche Felder angezeigt werden

Definieren von Upgradeaktionen für die neue VersionDefine upgrade actions for new version

Immer dann, wenn Sie eine neue Version Ihrer SharePoint Framework-Lösung erstellen, gibt es möglicherweise erforderliche Änderungen an den bereitgestellten SharePoint-Ressourcen. Sie können die Unterstützung der Upgradeaktion für das Featureframework nutzen, wenn eine neue Version des Pakets bereitgestellt wird.Whenever you build a new version of your SharePoint Framework solution, you might have some required changes on the provisioned SharePoint assets. You can take advantage of the Feature Framework upgrade action support when a new version of the package is being deployed.

SharePoint Framework-Lösungen unterstützen die folgenden Upgradeaktionsdefinitionen für das Featureframework:SharePoint Framework solutions do support the following Feature Framework upgrade action definitions:

  • ApplyElementManifestApplyElementManifest
  • AddContentTypeFieldAddContentTypeField

Weitere Informationen zu den Upgradeaktionsdefinitionen für das Featureframework finden Sie im Artikel Aktualisierungsverfahren für SharePoint-Add-Ins.For more information on the Feature Framework upgrade action definitions, see: SharePoint Add-ins update process.

Fügen Sie eine neue „element.xml“-Datei für die neue Version hinzuAdd a new element.xml file for the new version

  1. Wechseln Sie zurück zu Ihrer Lösung in Visual Studio Code.Go back to your solution in Visual Studio Code.

  2. Erstellen Sie eine neue Datei elements-v2.xml im Ordner sharepoint\assets.Create a new file elements-v2.xml in the sharepoint\assets folder.

  3. Kopieren Sie die folgende XML-Struktur in die Datei elements-v2.xml, in der eine neue SharePoint-Liste definiert wird, die mit dem Titel Neue Liste bereitgestellt werden soll.Copy the following XML structure into elements-v2.xml, which defines a new SharePoint list to be provisioned with a title of New List.

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
      <ListInstance
        FeatureId="00bfea71-de22-43b2-a848-c05709900100"
        Title="New List"
        Description="New list provisioned from v2"
        TemplateType="100"
        Url="Lists/NewList">
      </ListInstance>
    </Elements>
    

Wichtig

Ändern Sie die GUID in dieser XML nicht.Don't change the GUID in this XML. Diese verweist auf die GUID, in der der Listentyp definiert ist.This points to the GUID where the list type is defined.

  1. Außerdem wird eine Definition für die tatsächlichen Upgradeaktionen für das Featureframework benötigten, erstellen Sie daher eine neue Datei upgrade-actions-v2.xml im Ordner sharepoint\assets.We also need a definition for actual Feature Framework upgrade actions, so create a new file upgrade-actions-v2.xml in the sharepoint\assets folder.

  2. Kopieren Sie die folgende XML-Struktur in upgrade-actions-v2.xml.Copy the following XML structure into upgrade-actions-v2.xml. Beachten Sie, dass der Feature-GUID-Verweis in dem Pfad auf den automatisch erstellten Ordner unter dem Ordner sharepoint/solution/debug verweist und basierend auf Ihrer Lösung aktualisiert werden muss.Notice that the feature GUID reference in the path refers to the automatically created folder under the sharepoint/solution/debug folder and has to be updated based on your solution. Diese GUID stimmt auch mit der GUID des Features überein, die wir in der Datei package-solution.json definiert haben.This GUID also matches the GUID of the feature, which we defined in the package-solution.json file.

    <ApplyElementManifests>
      <ElementManifest Location="{feature-guid}\elements-v2.xml" />
    </ApplyElementManifests>
    

Wichtig

Die {feature-guid} sollte der GUID des Features entsprechen, das Sie der Datei package-solution.json hinzugefügt haben.The {feature-guid} should match the GUID of the feature you added to the package-solution.json file.

Stellen Sie die neue Version in SharePoint bereitDeploy the new version to SharePoint

Als Nächstes müssen wir sowohl die Lösungsversion als auch die Featureversion aktualisieren, die für die Bereitstellung der Ressource verantwortlich ist.Next, we need to update both the solution version and the feature version responsible for the asset provisioning.

Wichtig

Die Lösungsversion gibt für SharePoint an, dass eine neue Version der SharePoint Framework-Lösung zur Verfügung steht.The solution version indicates for SharePoint that there's a new version of the SharePoint Framework solution available. Durch die Featureversion wird sichergestellt, dass die Upgradeaktionen entsprechend ausgeführt werden, wenn das Lösungspaket auf den vorhandenen Websites aktualisiert wird.The feature version ensures that the upgrade actions are executed accordingly when the solution package is upgraded in the existing site(s).

  1. Öffnen Sie package-solution.json im Ordner config, und aktualisieren Sie die Versionswerte sowohl für die Lösung als auch für das Feature auf 2.0.0.0.Open package-solution.json from the config folder and update the version values for both the solution and the feature to 2.0.0.0.

  2. Außerdem müssen elements-v2.xml im Abschnitt „elementManifest“ einschließen sowie das „upgradeActions“-Element mit einem Zeiger auf die erstellte upgrade-actions-v2.xml-Datei.We also need to include elements-v2.xml under the elementManifest section, and need to include the upgradeActions element with a pointer to the created upgrade-actions-v2.xml file.

    Nachfolgend sehen Sie die vollständige package-solution.json-Datei mit den erforderlichen Änderungen.Here's the complete package-solution.json file with needed changes. Beachten Sie, dass die Bezeichner für Ihre Lösung etwas anders aussehen könnten, konzentrieren Sie sich daher nur auf das Hinzufügen der fehlenden Teile.Notice that identifiers for your solution could be slightly different, so concentrate on adding only the missing pieces.

    {
      "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
      "solution": {
        //...
        "version": "2.0.0.0",
        "includeClientSideAssets": true,
        "isDomainIsolated": false,
        "features": [{
          "title": "asset-deployment-webpart-client-side-solution",
          "description": "asset-deployment-webpart-client-side-solution",
          "id": "{feature-guid}",
          "version": "2.0.0.0",
          "assets": {
            "elementManifests": [
              "elements.xml",
              "elements-v2.xml"
            ],
            "elementFiles":[
              "schema.xml"
            ],
            "upgradeActions":[
              "upgrade-actions-v2.xml"
            ]
          }
        }]
        //...
      }
    }
    

    Wichtig

    Beachten Sie, dass auch das elements-v2.xml-Element unter dem Abschnitt „elementManifest“ eingeschlossen wurde.Notice that we also included the elements-v2.xml under the elementManifest section. Dadurch wird sichergestellt, dass das Endergebnis bei Installation dieses Pakets auf einer bereinigten Website als Version 2.0 mit den aktualisierten Paketen übereinstimmt.This ensures that when you install this package to a clean site as a version 2.0, the end result will match the upgraded packages.

  3. Führen Sie im Konsolenfenster den folgenden Befehl aus, um Ihre clientseitige Lösung, die das Webpart enthält, erneut zu verpacken, damit die grundlegende Struktur für das Verpacken vorbereitet wird:In the console window, execute the following command to repackage your client-side solution that contains the web part so that we get the basic structure ready for packaging:

    gulp bundle
    
  4. Führen Sie den folgenden Befehl aus, um das Lösungspaket zu erstellen:Execute the following command to create the solution package:

    gulp package-solution
    

    Der Befehl erstellt eine neue Version des Lösungspakets im Ordner SharePoint/Lösung.The command creates a new version of the solution package in the sharepoint/solution folder. Beachten Sie, dass Sie anhand des Ordners sharepoint/solution/debug leicht erkennen können, ob die aktualisierten XML-Dateien im Lösungspaket enthalten sind.Notice that you can easily confirm from the sharepoint/solution/debug folder that the updated XML files are included in the solution package.

  5. Als Nächstes müssen Sie die neue Version, die generiert wurde, im App-Katalog bereitstellen.Next you need to deploy the new version that was generated to the app catalog. Wechseln Sie zum App-Katalog des Mandanten.Go to your tenant's app catalog.

  6. Laden Sie das Paket asset-deployment-webpart.sppkg, das sich im Ordner sharepoint/solution befindet, in den App-Katalog hoch, oder platzieren Sie es dort per Drag & Drop.Upload or drag and drop the asset-deployment-webpart.sppkg located in the sharepoint/solution folder to the app catalog. Sie werden von SharePoint aufgefordert, zu bestätigen, dass die vorhandene Version überschrieben werden soll.SharePoint requests that you confirm overriding the existing version.

    Ersetzen der Frage aus dem App-Katalog

  7. Klicken Sie auf Ersetzen, um ein Update auf die neueste Version im App-Katalog durchzuführen.Select Replace It to update the latest version to the app catalog.

  8. Wählen Sie Bereitstellen aus, um auch der neuesten Version zu vertrauen. Select Deploy to trust the latest version.

    Beachten Sie, dass die Spalte App-Version für die asset-deployment-webpart-client-side-solution nun auf 2.0.0.0 aktualisiert wurde.Notice that the App Version column for the asset-deployment-webpart-client-side-solution is now updated to be 2.0.0.0.

    Nahaufnahme der Lösungszeile im App-Katalog mit aktualisierter Versionsnummer

Aktualisieren Sie die vorhandene Instanz auf der WebsiteUpdate an existing instance in the site

Da das Paket im App-Katalog aktualisiert wurde, können wir zur SharePoint-Inhaltswebsite wechseln und das Upgrade für die vorhandene Instanz durchführen.With the package been updated in the app catalog, we can move to the SharePoint content site and do the upgrade for the existing instance.

  1. Wechseln zu der Website, auf der Sie die erste Version der SharePoint Framework-Lösung bereitgestellt haben.Go to the site where you deployed the first version of the SharePoint Framework solution.

  2. Wechseln Sie auf die Seite Websiteinhalte.Go to the Site Contents page.

  3. Wählen der Option Details aus dem Kontextmenü der Lösung asset-deployment-webpart-client-side-solutionSelect Details from the context menu of the asset-deployment-webpart-client-side-solution solution.

    Kontextmenü des vorhandenen Pakets auf der Website

    Dadurch werden die aktuellen Details zu der installierten SharePoint Framework-Lösung vorgestellt.This presents the current details around the installed SharePoint Framework solution. Auf dieser Seite wird nun der Text als Es ist eine neue Version dieser App verfügbar angezeigt, um anzugeben, dass eine neue Version verfügbar ist.This page also now shows the text as There is a new version of this app. Get it now to indicate that there's a new version available.

    Kontextmenü des vorhandenen Pakets auf der Website

  4. Klicken Sie auf die Schaltfläche HERUNTERLADEN, um den Updateprozess für das Paket zu starten.Select the GET IT button to start the update process for the package.

    App-Status wurde zu Updates auf der Seite der Websiteinhalte aktualisiert

    Wenn Sie zur klassischen Umgebung wechseln, sehen Sie weitere Details zur tatsächlichen Upgrade-Aktion, die für die SharePoint-Frameworklösung angewendet wird.If you move to the classic experience, you can see more details on the actual upgrade action being applied for the SharePoint Framework solution.

    App-Status wurde zu Updates auf der Seite der Websiteinhalte aktualisiert

    Hinweis

    Da das SharePoint-Framework dieselbe App-Struktur wie SharePoint-Add-Ins verwendet, weist der Status für das Upgrade auf ein Update für ein Add-In oder eine App hin.Because the SharePoint Framework uses the same app infrastructure as SharePoint Add-ins, the status for the upgrade indicates that the update can happen for an add-in or an app.

    Das Update kann eine Weile dauern, wenn der Lösungsstatus jedoch wieder zu „normal“ wechselt, aktualisieren Sie die Seite mit den Websiteinhalten, um zu bestätigen, dass die neue Liste erfolgreich als Teil des Updateprozesses bereitgestellt wurde.The update can take a while, but when the solution status changes to normal again, refresh the site contents page to confirm that a new list called New List has been successfully provisioned as part of the update process.

    Die Seite mit den Websiteinhalten mit einer zusätzlichen neuen Liste, die erstellt wird

    Wir haben diese Instanz jetzt erfolgreich auf die neueste Version aktualisiert.Now we've successfully upgraded this instance to the latest version. Diese Option des Featureframeworks für die SharePoint-Ressourcenbereitstellung ähnelt dem SharePoint-Add-In-Modell.This Feature Framework option for SharePoint asset provisioning similar to the SharePoint Add-in model. Der wichtigste Unterschied besteht darin, dass die Ressourcen direkt auf der normalen SharePoint-Website bereitgestellt werden, da es das Konzept „App-/Add-In-Web“ bei SharePoint Framework-Lösungen nicht gibt.The key difference is that the assets are being provisioned directly to a normal SharePoint site, because there's no concept called app or add-in web with SharePoint Framework solutions.

Weitere InformationenSee also