在 SharePoint 中创建 UX 组件Create UX components in SharePoint

SharePoint 加载项模型提供了许多 UX 组件和机制,可帮助你在 SharePoint 加载项中营造出色的用户体验。加载项模型中的用户体验也足够灵活,使你能够使用最能满足最终用户需求的技术和平台。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.

下表列出了一些资源,帮助你了解如何在加载项中创建和使用 UX 组件。The following table lists resources to help you learn about creating and using UX components in add-ins.

在 SharePoint 加载项中创建 UX 组件的资源和指南Resources and guidance for creating UX components in SharePoint Add-ins

文章Article 说明Description
在 SharePoint 外接程序中使用 SharePoint 网站的样式表Use a SharePoint website's style sheet in SharePoint Add-ins 可以在您的 SharePoint 外接程序中引用 SharePoint 网站的样式表,并通过使用 SharePoint 中的样式表将其用于设置您网页的样式。此外,如果有人更改了 SharePoint 网站的样式表或主题,则可以在您的外接程序中采用一组新的样式,而无需修改您的外接程序中的样式表引用。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.
在 SharePoint 外接程序中使用客户端部件版式控制Use the client chrome control in SharePoint Add-ins 利用 SharePoint 的部件版式控制,您无需注册服务器库或使用特定技术或工具即可在外接程序中使用特定 SharePoint 网站的标题样式。若要使用此功能,您必须通过标准 <script> 标记注册 SharePoint JavaScript 库。您可使用 HTML div 元素提供占位符并使用可用选项进一步自定义控件。该控件继承指定的 SharePoint 网站的外观。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.
创建外接程序部件以安装 SharePoint 外接程序Create add-in parts to install with your SharePoint Add-in 利用外接程序部件,您可以直接在主机 Web 中表明您的外接程序用户体验。外接程序部件使用 IFrame 显示您的外接程序内容。最终用户可以使用可为外接程序部件提供的自定义属性来自定义体验。外接程序网页通过查询字符串中的参数接收自定义属性值。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.
创建自定义操作以部署 SharePoint 外接程序Create custom actions to deploy with SharePoint Add-ins 创建 SharePoint 加载项时,可以使用自定义操作与主机 Web 中的列表和功能区交互。When you are creating a SharePoint Add-in, custom actions let you interact with the lists and the ribbon in the host web. 最终用户安装加载项时,会在主机 Web 上部署自定义操作。A custom action deploys to the host web when end users install your add-in. 自定义操作可以打开远程网页,并通过查询字符串传递信息。Custom actions can open a remote webpage and pass information through the query string. 加载项可使用两种类型的自定义操作:功能区和编辑控制块。Two types of custom actions are available for add-ins: Ribbon and Edit Control Block.
使用客户端呈现在 SharePoint 加载项中自定义列表视图Customize a list view in SharePoint Add-ins using client-side rendering 客户端呈现提供了一种机制,可用来为 SharePoint 页面中托管的一组控件生成自己的输出。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. 此机制可以让用户使用知名技术(例如 HTML 和 JavaScript)定义 SharePoint 列表视图的呈现逻辑。This mechanism enables you to use well-known technologies, such as HTML and JavaScript, to define the rendering logic of SharePoint list views. 在客户端呈现中,您可以指定自己的 JavaScript 资源,并在诸如文档库之类的可用于外接程序的数据存储选项中托管它们。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.
在 SharePoint 托管的 SharePoint 加载项中使用客户端人员选取器控件Use the client-side People Picker control in SharePoint-hosted SharePoint Add-ins 使用客户端人员选取器控件,用户可以为组织中的人员、组和声明快速搜索和选择有效的用户帐户。The client-side People Picker control lets users quickly search for and select valid user accounts for people, groups, and claims in their organization. 选取器是 HTML 和 JavaScript 控件,提供跨浏览器支持。The picker is an HTML and JavaScript control that provides cross-browser support.
使用标注控件突出显示内容并改进 SharePoint 托管的 SharePoint 加载项的功能Highlight content and enhance the functionality of SharePoint-hosted SharePoint Add-ins with the callout control SharePoint 标注控件可提供灵活的方式来吸引用户,并展示 SharePoint 托管的应用的功能。The SharePoint callout control provides a flexible way to engage your user and showcase your SharePoint-hosted app's functionality. 本文演示如何构造此控件、将其添加到网页和自定义其外观和行为。This article shows you how to construct this control, add it to your page, and customize its appearance and behavior.
在加载项 Web 的网页中包括 Web 部件Include a web part in a webpage on the add-in web 如何在 SharePoint 加载项的页面中添加 Web 部件。How to include a web part on a page in a SharePoint Add-in.

后续步骤:在 SharePoint 加载项中处理数据Next steps: Working with data in SharePoint Add-ins

是否已为加载项设计了一个很棒的 UX?Have you finished designing a great UX for your add-in? 请将数据与 SharePoint 加载项的模型中提供的机制相结合。有关详细信息,请参阅在 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.

另请参阅See also