Erstellen von Benutzerfreundlichkeitskomponenten in SharePointCreate UX components in SharePoint

Das Modell für SharePoint-Add-Ins bietet viele UX-Komponenten und Mechanismen, die Ihnen ermöglichen, in SharePoint-Add-Ins ein optimales Nutzungserlebnis zu bieten. Das Nutzungserlebnis im Add-In-Modell ist außerdem so flexibel, dass Sie die Verfahren und Plattformen verwenden können, die sich am besten an die Anforderungen von Endbenutzern anpassen lassen.The model for SharePoint Add-ins offers many UX components and mechanisms that help you build a great user experience in SharePoint Add-ins. The user experience in the add-in model is also flexible enough to let you use the techniques and platforms that best adapt to the needs of end users.

In der folgenden Tabelle sind Ressourcen aufgeführt, die Informationen zum Erstellen und Verwenden von UX-Komponenten in Add-Ins bieten.The following table lists resources to help you learn about creating and using UX components in add-ins.

Ressourcen und Anweisungen zum Erstellen von UX-Komponenten in SharePoint-Add-InsResources and guidance for creating UX components in SharePoint Add-ins

ArtikelArticle BeschreibungDescription
Verwenden des Stylesheets einer SharePoint-Website in Add-Ins für SharePointUse a SharePoint website's style sheet in SharePoint Add-ins Sie können in Ihrem SharePoint-Add-In auf das Stylesheet einer SharePoint-Website verweisen und es zum Formatieren Ihrer Webseiten nutzen, indem Sie das Stylesheet in SharePoint verwenden. Wenn ein Benutzer das Stylesheet oder Design der SharePoint-Website ändert, können Sie außerdem die neue Gruppe von Formatvorlagen in Ihr Add-In übernehmen, ohne den Stylesheet-Verweis im Add-In ändern zu müssen.You can reference the style sheet of a SharePoint website in your SharePoint Add-in and use it to style your webpages by using the style sheet in SharePoint. In addition, if someone changes the SharePoint website's style sheet or theme, you can adopt the new set of styles in your add-in without modifying the style sheet reference in your add-in.
Verwenden des Client-Chromsteuerelements in SharePoint-Add-InsUse the client chrome control in SharePoint Add-ins Dank des Chromsteuerelements in SharePoint können Sie den Kopfzeilenstil einer bestimmten SharePoint-Website in Ihrem Add-In verwenden, ohne eine Serverbibliothek registrieren zu müssen oder eine bestimmte Technologie bzw. ein bestimmtes Tool zu verwenden. Sie müssen dazu eine SharePoint-JavaScript-Bibliothek durch ein standardmäßiges <script>-Tag registrieren. Sie können einen Platzhalter bereitstellen, indem Sie ein HTML- div-Element verwenden und das Steuerelement mit den verfügbaren Optionen weiter anpassen. Das Steuerelement erhält sein Aussehen durch die angegebene SharePoint-Website. The chrome control in SharePoint enables you to use the header styling of a specific SharePoint site in your add-in without needing to register a server library or use a specific technology or tool. To use this functionality, you must register a SharePoint JavaScript library through a standard <script> tag. You can provide a placeholder by using an HTML div element and further customize the control by using the available options. The control inherits its appearance from the specified SharePoint website.
Erstellen von Add-In-Webparts zur Installation mit Ihrem SharePoint-Add-InCreate add-in parts to install with your SharePoint Add-in Mit Add-In-Parts können Sie Ihr Add-In-Nutzungserlebnis direkt in der Hostwebsite anzeigen. Ein Add-In-Part zeigt Ihren Add-In-Inhalt mithilfe eines IFrame an. Endbenutzer können das Nutzungserlebnis individuell anpassen, indem sie die benutzerdefinierten Eigenschaften verwenden, die Sie für Ihr Add-In-Part bereitstellen. Die Add-In-Webseite erhält die benutzerdefinierten Eigenschaftswerte durch Parameter in der Abfragezeichenfolge.With add-in parts, you can show your add-in user experience right in the host web. An add-in part displays your add-in content using an IFrame. End users can customize the experience using the custom properties that you can provide for your add-in part. The add-in webpage receives the custom property values through parameters in the query string.
Gewusst wie: Erstellen benutzerdefinierter Aktionen zur Bereitstellung mit Add-Ins für SharePointCreate custom actions to deploy with SharePoint Add-ins Bei der SharePoint-Add-In-Erstellung ermöglichen Ihnen benutzerdefinierte Aktionen die Interaktion mit Listen und dem Menüband in der Hostwebsite.When you are creating a SharePoint Add-in, custom actions let you interact with the lists and the ribbon in the host web. Eine benutzerdefinierte Aktion wird für die Hostwebsite bereitgestellt, wenn Endbenutzer Ihr Add-In installieren.A custom action deploys to the host web when end users install your add-in. Benutzerdefinierte Aktionen können eine Remotewebseite öffnen und Informationen über die Abfragezeichenfolge übergeben.Custom actions can open a remote webpage and pass information through the query string. Für Add-Ins stehen zwei Arten von benutzerdefinierten Aktionen zur Verfügung: Menüband und Bearbeitungssteuerelementblock.Two types of custom actions are available for add-ins: Ribbon and Edit Control Block.
Anpassen einer Listenansicht in SharePoint-Add-Ins durch clientseitiges RenderingCustomize a list view in SharePoint Add-ins using client-side rendering Das clientseitige Rendering stellt eine Möglichkeit dar, wie Sie selbst Ausgaben für eine Gruppe von Steuerelementen, die in einer SharePoint-Seite gehostet werden, erzeugen können.Client-side rendering provides a mechanism that you can use to produce your own output for a set of controls that are hosted on a SharePoint page. Dieser Mechanismus ermöglicht die Verwendung bekannter Technologien wie HTML und JavaScript zum Definieren der Wiedergabelogik der SharePoint-Listenansichten.This mechanism enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of SharePoint list views. Bei clientseitigem Rendering können Sie Ihre eigenen JavaScript-Ressourcen angeben und sie in den für Ihre Add-Ins verfügbaren Datenspeicheroptionen hosten, z. B. in einer Dokumentbibliothek.In client-side rendering, you can specify your own JavaScript resources and host them in the data storage options available to your add-ins, such as a document library.
Verwenden des clientseitigen Steuerelements „Personenauswahl“ in von SharePoint gehosteten Share Point-Add-InsUse the client-side People Picker control in SharePoint-hosted SharePoint Add-ins Mit dem clientseitigen Steuerelement „Personenauswahl“ können Benutzer schnell nach gültigen Benutzerkonten für Personen, Gruppen und Ansprüche in ihrer Organisation suchen, und diese auswählen.The client-side People Picker control lets users quickly search for and select valid user accounts for people, groups, and claims in their organization. Die Auswahl ist ein HTML- und JavaScript-Steuerelement, das für alle Browser unterstützt wird.The picker is an HTML and JavaScript control that provides cross-browser support.
Hervorheben von Inhalt und Verbessern der Funktionalität von in SharePoint gehosteten SharePoint-Add-Ins mit dem Legenden-SteuerelementHighlight content and enhance the functionality of SharePoint-hosted SharePoint Add-ins with the callout control Das Popupsteuerelement von SharePoint ermöglicht eine flexible Interaktion mit dem Benutzer sowie die Präsentation der Funktionen Ihrer in SharePoint gehosteten App.The SharePoint callout control provides a flexible way to engage your user and showcase your SharePoint-hosted app's functionality. In diesem Artikel erfahren Sie, wie Sie dieses Steuerelement erstellen, Ihrer Seite hinzufügen und sein Aussehen und Verhalten anpassen können.This article shows you how to construct this control, add it to your page, and customize its appearance and behavior.
Einschließen eines Webparts auf einer Webseite im Add-In-WebInclude a web part in a webpage on the add-in web Erfahren Sie, wie Sie ein Webpart auf einer Seite in einem SharePoint-Add-In einschließen.How to include a web part on a page in a SharePoint Add-in.

Nächste Schritte: Arbeiten mit Daten in SharePoint-Add-InsNext steps: Working with data in SharePoint Add-ins

Haben Sie die Entwicklung einer optimalen UX für Ihr Add-In abgeschlossen?Have you finished designing a great UX for your add-in? Integrieren Sie Daten mit den Mechanismen, die Ihnen im Modell für SharePoint-Add-Ins zur Verfügung stehen. Weitere Informationen finden Sie unter Arbeiten mit externen Daten in SharePoint.Incorporate data with the mechanisms available to you in the model for SharePoint Add-ins. For more information, see Work with external data in SharePoint.

Siehe auchSee also