Wussten Sie, dass Sie Ihre SharePoint Framework-Webparts ganz einfach auf modernen Seiten testen können?
Einfaches Testen von SharePoint Framework-Teilen auf modernen Seiten
Wenn Sie SharePoint Framework Webparts erstellen, können Sie diese ganz einfach auf modernen Seiten Ihrer Website testen, ohne das Lösungspaket in Ihrem App-Katalog bereitzustellen. Um Ihr Webpart auf einer Seite zu testen, stellen Sie zunächst sicher, dass Sie den lokalen gulp Server gestartet haben, indem Sie entweder den Befehl gulp serve oder gulp serve -nobrowser ausführen. Navigieren Sie dann im Webbrowser zu Ihrer Seite und fügen Sie an die URL ?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js an. Die Seite wird neu geladen und Sie werden in einem Popup aufgefordert zu bestätigen, dass Sie nun Debug-Skripte laden.
Sobald Sie bestätigen, dass Sie die von Ihnen entwickelten Webparts laden möchten, können Sie die Seite bearbeiten und in der Toolbox eines Ihrer lokalen Webparts auswählen.
Wie das funktioniert
Dieser Ansatz zum Testen von Webparts auf modernen Seiten verwendet denselben Mechanismus wie beim Testen von SharePoint Framework-Erweiterungen. Im Moment unterstützt die SharePoint Framework Workbench das Testen von Erweiterungen nicht, und Sie können nur überprüfen, ob sie wie erwartet funktionieren, indem Sie sie auf einer SharePoint-Website testen. Dieser Ansatz ist jedoch nicht auf SharePoint Framework-Erweiterungen beschränkt und kann auch zum Testen von Webparts verwendet werden.
Warum sollten Sie Webparts auf Seiten testen?
Wenn Sie SharePoint Framework-Webparts erstellen, können Sie sie mit der lokalen Workbench testen. Das ist nicht nur bequem, sondern auch sehr effizient: Jedes Mal, wenn Sie etwas in Ihrem Code ändern, wird die lokale Workbench automatisch neu geladen und zeigt Ihre letzten Änderungen an.
In einigen Fällen, z. B. bei der Erstellung von Webparts, die mit SharePoint kommunizieren, können Sie die lokale SharePoint-Workbench nicht verwenden, da Sie Zugriff auf die SharePoint-APIs benötigen, die nur im Kontext einer SharePoint-Website aufgerufen werden können. In solchen Fällen können Sie statt der lokalen Workbench die gehostete SharePoint-Workbench verwenden, auf die Sie zugreifen können, indem Sie /_layouts/15/workbench.aspx zur URL Ihrer Website hinzufügen, z. B. https://contoso.sharepoint.com/sites/team-a/_layouts/15/workbench.aspx. Warum sollten Sie also Ihre Webparts auf Seiten testen wollen?
UI-Einschränkungen
Die SharePoint Framework-Workbench ahmt auf praktische Weise die Arbeitsfläche moderner SharePoint-Seiten nach. Aber es ahmt nicht alle Aspekte dieser Seiten nach. Die Breite der Arbeitsfläche ist unterschiedlich, nicht alle Themenfarben werden wiedergegeben, und die Workbench ermöglicht es Ihnen nicht, die Full-Bleed-Erfahrung zu testen, bei der sich ein Webpart über die gesamte Breite des Webbrowsers ohne horizontalen Rand oder Polsterung erstreckt.
Funktioniert es mit anderen Webparts und Erweiterungen?
Mit der SharePoint Workbench können Sie, unabhängig davon, ob sie lokal oder gehostet ist, nur Webparts aus Ihrer Lösung testen. Was aber, wenn Sie sehen möchten, wie Ihr Webpart mit anderen Webparts auf der Seite zusammenarbeitet? Das Testen Ihrer lokalen Lösung auf modernen Seiten mit dem von mir beschriebenen Ansatz ist viel effizienter als das Paketieren Ihres Projekts, das Bereitstellen im App-Katalog und das Hinzufügen des Webparts auf der Seite. Und dann das Ganze noch einmal zu machen, nachdem Sie etwas geändert haben.
Zusammenfassung
Wenn Sie SharePoint Framework-Webparts erstellen, können Sie diese ganz einfach auf modernen Seiten Ihrer Website testen, ohne das Lösungspaket in Ihrem App-Katalog bereitzustellen. So können Sie effizient prüfen, ob Ihre Webparts wie erwartet funktionieren und nicht mit anderen Elementen auf der Seite kollidieren.
Dieser Blogbeitrag wurde ursprünglich auf dem Waldek-Blog veröffentlicht .
Durch die Verwendung des SharePoint Frameworks befolgen Sie die Best Practices für die Erstellung und Sicherung von Anpassungen. Klicken Sie auf die Schaltfläche unten, um mehr darüber zu erfahren.
