Hinzufügen von jQueryUI Accordion zu Ihrem clientseitigen SharePoint-Webpart

Wenn Sie jQueryUI Accordion zu Ihrem Webpartprojekt hinzufügen möchten, müssen Sie ein neues Webpart erstellen, wie im folgenden Bild dargestellt.

Stellen Sie sicher, dass Sie die folgenden Schritte ausgeführt haben, bevor Sie starten:

• Erstellen des ersten Webparts

Sie können die Schritte auch anhand dieses Videos in unserem YouTube-Kanal „Microsoft 365 Platform Community (PnP)“ nachvollziehen:

Die Entwicklertoolkette verwendet Webpack & SystemJS, um Ihre Webparts zu bündeln und zu laden. Dies schließt das Laden externer Abhängigkeiten, z. B. jQuery oder jQueryUI, ein. Um externe Abhängigkeiten zu laden, müssen Sie folgende Schritte ausführen:

• Rufen Sie die externe Bibliothek über NPM ab, oder laden Sie sie direkt vom Anbieter herunter.
• Falls verfügbar, installieren Sie die TypeScript-Typdeklarationen des entsprechenden Frameworks.
• Aktualisieren Sie, falls erforderlich, die Lösungskonfiguration, um die externe Abhängigkeit nicht in das Webpartbundle einzuschließen.

Erstellen eines neuen Webpart-Projekts

1. Erstellen Sie an einem Speicherort Ihrer Wahl ein neues Projektverzeichnis:

   md jquery-webpart
   

2. Wechseln Sie in das Projektverzeichnis:

   cd jquery-webpart
   

3. Erstellen Sie ein neues Projekt, indem Sie den Yeoman SharePoint-Generator aus dem neuen Verzeichnis heraus, das Sie erstellt haben, ausführen:

   yo @microsoft/sharepoint
   

   Der Yeoman SharePoint-Generator zeigt eine Reihe von Fragen an. Akzeptieren Sie für alle Fragen die Standardoptionen mit Ausnahme der folgenden Fragen:

   • Welcher Typ von clientseitiger Komponente soll erstellt werden? : Webpart
   • Welches Framework möchten Sie verwenden?: Kein JavaScript-Framework

An diesem Punkt installiert Yeoman die erforderlichen Abhängigkeiten und erstellt ein Gerüst für die Lösungsdateien, einschließlich des Webparts. Das kann einige Minuten dauern.

Installieren Sie die Pakete „jQuery“ und „jQueryUI NPM“.

Das Webpart verwendet jQuery und das Accordion-Objekt, das im jQueryUI-Projekt enthalten ist. Um diese zu verwenden, fügen Sie sie zu den Abhängigkeiten des Projekts hinzu:

1. Führen Sie in der Konsole Folgendes aus, um das Paket „jQuery NPM“ zu installieren:

   npm install jquery@2
   

2. Führen Sie nun Folgendes aus, um das Paket „jQuery NPM“ zu installieren:

   npm install jqueryui
   

3. Als nächstes müssen Sie die TypeScript-Typdeklarationen für das Projekt installieren, um den Entwicklungsprozess zu vereinfachen.

   Führen Sie in der Konsole die folgenden Befehle aus, um die Typdeklarationspakete zu installieren:

   npm install @types/jquery@2 --save-dev
   npm install @types/jqueryui --save-dev
   

Ausschließen externer Abhängigkeiten aus dem Webpartbundle

Standardmäßig werden alle Abhängigkeiten, auf die im Code des Projekts verwiesen wird, dem resultierenden Webpartbundle hinzugefügt. In den meisten Fällen ist dies nicht ideal, da die Dateigröße unnötig erhöht wird. Sie können das Projekt so konfigurieren, dass die Abhängigkeiten aus dem Webpartbundle ausgeschlossen werden, und stattdessen die SharePoint-Framework-Runtime anweisen, sie als Abhängigkeiten zu laden, bevor das Webpartbunde geladen wird.

1. Öffnen Sie in Visual Studio Code (VS Code) die Datei config\config.json.

   Diese Datei enthält Informationen zu Ihren Bundles und externen Abhängigkeiten.

   Die bundles-Eigenschaft enthält die standardmäßigen Bundleinformationen. In diesem Fall das jQuery-Webpart-Bundle. Wenn Sie Ihrer Lösung weitere Webparts hinzufügen, wird pro Webpart ein Eintrag angezeigt.

   "bundles": {
     "j-query-web-part": {
       "components": [
         {
           "entrypoint": "./lib/webparts/jQuery/JQueryWebPart.js",
           "manifest": "./src/webparts/jQuery/JQueryWebPart.manifest.json"
         }
       ]
     }
   },
   

2. Die externals-Eigenschaft enthält die Bibliotheken, die nicht in das generierte Bundle einbezogen werden sollen. Der Bündelungsvorgang verwendet die Werte dieser Eigenschaft auch zur Konfiguration des Modulladeprogramms des SharePoint Frameworks, um die Referenzbibliotheken vor dem Laden des Webpart-Bundles zu laden.

   "externals": {},
   

3. Schließen Sie jQuery und jQueryUI aus dem generierten Bundle aus, indem Sie die folgenden zwei Module zur externals-Eigenschaft hinzufügen:

   {
     "externals": {
       "jquery": "node_modules/jquery/dist/jquery.min.js",
       "jqueryui": "node_modules/jqueryui/jquery-ui.min.js"
     },
   }
   

   Wenn Sie nun Ihr Projekt erstellen, werden jQuery und jQueryUI nicht im standardmäßigen Webpartbundle gebündelt.

   Die fertige Datei config.json sollte nun ähnlich der folgenden Datei aussehen:

   {
     "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
     "version": "2.0",
     "bundles": {
       "j-query-web-part": {
         "components": [
           {
             "entrypoint": "./lib/webparts/jQuery/JQueryWebPart.js",
             "manifest": "./src/webparts/jQuery/JQueryWebPart.manifest.json"
           }
         ]
       }
     },
     "externals": {
       "jquery": "node_modules/jquery/dist/jquery.min.js",
       "jqueryui": "node_modules/jqueryui/jquery-ui.min.js"
     },
     "localizedResources": {
       "JQueryWebPartStrings": "lib/webparts/jQuery/loc/{locale}.js"
     }
   }
   

Erstellen von Accordion

An diesem Punkt ist das Projekt so konfiguriert, dass es von jQuery und jQueryUI abhängt, diese aber nicht in das Bundle der resultierenden Lösung eingeschlossen werden. Der nächste Schritt besteht darin, das Webpart durch Hinzufügen des Accordion-Objekts zum Webpart zu implementieren.

Hinzufügen des Accordion-HTML-Codes

1. Fügen Sie in VS Code im Ordner ./src/webparts/jQuery eine neue Datei MyAccordionTemplate.ts hinzu.

2. Fügen Sie eine MyAccordionTemplate-Klasse hinzu, die den HTML-Code für das Accordion-Objekt enthält. Fügen Sie der Datei MyAccordionTemplate.ts den folgenden Code hinzu:

   export default class MyAccordionTemplate {
     public static templateHtml: string =  `
       <div class="accordion">
         <h3>Section 1</h3>
         <div>
             <p>
             Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
             ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
             amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
             odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
             </p>
         </div>
         <h3>Section 2</h3>
         <div>
             <p>
             Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
             purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
             velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
             suscipit faucibus urna.
             </p>
         </div>
         <h3>Section 3</h3>
         <div>
             <p>
             Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
             Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
             ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
             lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
             </p>
             <ul>
             <li>List item one</li>
             <li>List item two</li>
             <li>List item three</li>
             </ul>
         </div>
         <h3>Section 4</h3>
         <div>
             <p>
             Cras dictum. Pellentesque habitant morbi tristique senectus et netus
             et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
             faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
             mauris vel est.
             </p>
             <p>
             Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
             Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
             inceptos himenaeos.
             </p>
         </div>
     </div>`;
   }
   

3. Speichern Sie die Datei.

Importieren des Accordion-HTML-Codes

1. Öffnen Sie in VS Code ./src/webparts/jQuery/JQueryWebPart.ts.

2. Fügen Sie die folgende import-Anweisung unmittelbar nach den vorhandenen import-Anweisungen am Anfang der Datei hinzu:

   import MyAccordionTemplate from './MyAccordionTemplate';
   

Importieren von jQuery und jQueryUI

1. Importieren Sie jQuery auf die gleiche Weise in Ihr Webpart, wie Sie MyAccordionTemplate importiert haben.

   Fügen Sie die folgende import-Anweisung nach den vorhandenen import-Anweisungen ein:

   import * as jQuery from 'jquery';
   import 'jqueryui';
   

2. Das jQueryUI-Projekt verwendet eine externe CSS-Datei zur Implementierung seiner Benutzeroberfläche. Das Webpart muss diese CSS-Datei zur Laufzeit laden:

   1. Wenn Sie eine CSS-Datei zur Laufzeit laden möchten, verwenden Sie das Modulladeprogramm von SharePoint, indem Sie das SPComponentLoader-Objekt verwenden.

      Fügen Sie die folgende import-Anweisung hinzu.

      import { SPComponentLoader } from '@microsoft/sp-loader';
      

   2. Laden Sie die jQueryUI-Formatvorlagen in der JQueryWebPart-Webpartklasse, indem Sie einen Konstruktor hinzufügen und den SPComponentLoader verwenden.

      Fügen Sie den folgenden Konstruktor zu Ihrem Webpart hinzu.

      public constructor() {
        super();
      
        SPComponentLoader.loadCss('//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css');
      }
      

      Durch diesen Code wird Folgendes ausgeführt:

      • Aufruf des übergeordneten Konstruktors mit dem Kontext zum Initialisieren des Webparts.
      • Asynchrones Laden der Accordion-Formatvorlagen in der CSS-Datei aus einem CDN.

Rendern des Accordion-Objekts

1. Suchen Sie in der Datei jQueryWebPart.ts die render()-Methode.

2. Legen Sie den inneren HTML-Code des Webparts fest, um den Accordion-HTML-Code zu rendern, indem Sie den Inhalt der render()-Methode durch Folgendes ersetzen:

   this.domElement.innerHTML = MyAccordionTemplate.templateHtml;
   

3. jQueryUI Accordion weist einige Optionen auf, die Sie zum Anpassen des Accordions festlegen können. Definieren Sie nach der vorhandenen this.domElement.innerHTML = MyAccordionTemplate.templateHtml; Codezeile einige Optionen für Ihr Accordion:

   const accordionOptions: JQueryUI.AccordionOptions = {
     animate: true,
     collapsible: false,
     icons: {
       header: 'ui-icon-circle-arrow-e',
       activeHeader: 'ui-icon-circle-arrow-s'
     }
   };
   

   Sie können über die TypeScript-Typdeklaration eine Typvariable mit dem Namen JQueryUI.AccordionOptions und die unterstützten Eigenschaften angeben.

   Wenn Sie mit IntelliSense experimentieren, stellen Sie fest, dass Sie volle Unterstützung für in JQueryUI. verfügbare Methoden sowie die Methodenparameter erhalten.

4. Initialisieren Sie schließlich das Accordion:

   jQuery('.accordion', this.domElement).accordion(accordionOptions);
   

   Wie Sie sehen können, verwenden Sie die Variable jQuery, die Sie zum Importieren des jquery-Moduls verwendet haben. Initialisieren Sie dann das Accordion.

   Die endgültige render()-Methode sollte folgendermaßen aussehen:

   public render(): void {
     this.domElement.innerHTML = MyAccordionTemplate.templateHtml;
   
     const accordionOptions: JQueryUI.AccordionOptions = {
       animate: true,
       collapsible: false,
       icons: {
         header: 'ui-icon-circle-arrow-e',
         activeHeader: 'ui-icon-circle-arrow-s'
       }
     };
   
     jQuery('.accordion', this.domElement).accordion(accordionOptions);
   }
   

5. Speichern Sie die Datei.

Anzeigen des Webparts

1. Stellen Sie in der Konsole sicher, dass Sie sich immer noch im Ordner jquery-webpart befinden, und führen Sie Folgendes aus, um das Webpart zu erstellen und in der Vorschau anzuzeigen:

   gulp serve --nobrowser
   

   Öffnen Sie nach dem Start des Webservers einen Browser, und navigieren Sie zur gehosteten Workbench einer SharePoint-Website, um Ihr Projekt zu testen. Zum Beispiel: https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx.

2. Wählen Sie im auf der Workbench das + (Pluszeichen) aus, um die Liste von Webparts anzuzeigen, und führen Sie das jQuery-Webpart hinzu. Jetzt sollte das jQueryUI Accordion angezeigt werden.

   

3. Drücken Sie in der Konsole, in der gulp serve ausgeführt wird, auf STRG+C, um die Aufgabe abzubrechen.