Использование экспериментального мини-приложения Desktop List View в надстройках SharePoint
Используйте мини-приложение Desktop List View на любой веб-странице, даже если она не размещена в SharePoint. Используйте мини-приложение List View в своих надстройках, чтобы показывать данные из списков, размещенных на сайте SharePoint.
Предупреждение
Экспериментальные мини-приложения Office для веб-страниц предоставляются только в целях исследования и сбора отзывов. Не используйте их в рабочей среде. Поведение мини-приложений Office для веб-страниц может существенно измениться в будущих выпусках. Ознакомьтесь с условиями лицензии на экспериментальные мини-приложения Office для веб-страниц.
С помощью мини-приложения "Представление списка" вы можете отображать данные в списке SharePoint подобно тому, как это делается с помощью обычного мини-приложения "Представление списка", но вы можете использовать его даже в тех надстройках и на веб-сайтах, которые не размещены в SharePoint.
Мини-приложение Desktop List View, в котором показаны данные в списке
Вы можете указать в списке SharePoint представление, которое вы хотите использовать для отображения данных. Виджет "Представление списка" отображает столбцы и элементы в порядке, который указывает представление.
Виджет "Представление списка" использует междоменную библиотеку для получения данных списка. Поэтому связь происходит на уровне клиента.
Примечание.
Мини-приложение Desktop List View позволяет выполнять не все сценарии собственного представления списка.
В текущей версии мини-приложения не включены следующие сценарии:
- использование виджета в схемах проверки подлинности, неподдерживаемых междоменной библиотекой;
- использование виджета с другими источниками данных, кроме библиотек и списков SharePoint;
- привязка виджета к данным;
- представления с сенсорным управлением;
- встроенная правка пользователями;
- показ информации о присутствии;
- настраиваемые шаблоны отрисовки;
- локальные сценарии. В данный момент виджет работает только в SharePoint Online.
Необходимые условия для использования примеров в этой статье
Для выполнения примеров, описанных в этой статье, вам необходимо следующее:
Visual Studio 2013 или более поздней версии.
Диспетчер пакетов NuGet. Дополнительные сведения см. в разделе Установка клиентских средств NuGet.
Среда разработки SharePoint (для локальных сценариев требуется изоляция приложений).
Пакет NuGet "Экспериментальные мини-приложения Office для веб-страниц". Дополнительные сведения об установке пакетов NuGet см. в статье Пользовательский интерфейс диспетчера пакетов NuGet. Вы также можете просмотреть страницу коллекции NuGet.
Использование мини-приложения Desktop List View в надстройке SharePoint с размещением у поставщика
В этом примере показана простая страница, размещенная вне SharePoint, которая объявляет мини-приложение Desktop List View.
Чтобы использовать мини-приложение Desktop List View:
Создайте надстройку SharePoint и веб-проекты.
создайте список на сайте надстройки. Этот шаг также гарантирует создание сайта при развертывании надстройки.
Примечание.
Междоменная библиотека требует наличия сайта надстройки. Мини-приложение List View связывается с SharePoint с помощью междоменной библиотеки.
Создайте страницу надстройки, которая объявляет экземпляр мини-приложения List View, используя разметку HTML.
Создание надстройки SharePoint и веб-проектов
Откройте Visual Studio от имени администратора. (Для этого выберите значок Visual Studio в меню Пуск и пункт Запуск от имени администратора.)
Создайте проект, используя шаблон Надстройка SharePoint. Шаблон "Надстройка SharePoint" находится в разделе Шаблоны>Visual C#>Office/SharePoint>Надстройки.
Укажите URL-адрес веб-сайта SharePoint, который вы хотите использовать для отладки.
Выберите для надстройки вариант размещения Размещено у поставщика.
Примечание.
Вы также можете использовать мини-приложение Desktop List View с другими вариантами размещения или даже с надстройками Office или собственным веб-сайтом.
Выберите Приложение веб-форм ASP.NET в качестве типа проекта веб-приложения.
Выберите службу контроля доступа Windows Azure в качестве способа проверки подлинности.
Создание списка на сайте надстройки
Выберите проект надстройки SharePoint в обозревателе решений, а затем — команду Добавить>Создать элемент.
Выберите Элементы Visual C#>Office/SharePoint>Список. Введите Объявления в текстовое поле Имя и нажмите кнопку Добавить.
Выберите Создать экземпляр списка на основе существующего шаблона списка. Выберите шаблон Объявления и нажмите кнопку Готово.
Добавление новой страницы, использующей мини-приложение Desktop List View
Выберите папку Страницы веб-проекта в обозревателе решений.
Скопируйте следующий код и вставьте его в файл ASPX в проекте. Этот код выполняет следующие задачи.
добавляет ссылки на необходимые библиотеки и ресурсы Office;
предоставляет заполнитель для виджета "Представление списка";
инициализирует среду выполнения элементов управления;
запускает метод renderAll среды выполнения элементов управления Office;
<!DOCTYPE html> <html> <head> <!-- IE9 or superior --> <meta http-equiv="x-ua-compatible" content="IE=10"> <title>Desktop List View HTML Markup</title> <!-- Controls Specific CSS File --> <link rel="stylesheet" type="text/css" href="/Scripts/Office.Controls.css" /> <!-- Ajax, jQuery, and utils --> <script src=" https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js.js"> </script> <script src=" https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"> </script> <script type="text/javascript"> // Function to retrieve a query string value. // For production purposes you may want to use // a library to handle the query string. function getQueryStringParameter(paramToRetrieve) { var params = document.URL.split("?")[1].split("&"); var strParams = ""; for (var i = 0; i < params.length; i = i + 1) { var singleParam = params[i].split("="); if (singleParam[0] == paramToRetrieve) return singleParam[1]; } } </script> <!-- Cross-Domain Library and Office controls runtime --> <script type="text/javascript"> //Register namespace and variables used through the sample Type.registerNamespace("Office.Samples.ListViewBasic"); //Retrieve context tokens from the querystring Office.Samples.ListViewBasic.appWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl")); Office.Samples.ListViewBasic.hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl")); Office.Samples.ListViewBasic.ctag = decodeURIComponent(getQueryStringParameter("SPClientTag")); //Pattern to dynamically load JSOM and the cross-domain library var scriptbase = Office.Samples.ListViewBasic.hostWebUrl + "/_layouts/15/"; //Get the cross-domain library $.getScript(scriptbase + "SP.RequestExecutor.js", //Get the Office controls runtime and // continue to the createControl function function () { $.getScript("../Scripts/Office.Controls.js", createControl); } ); </script> <!-- List View --> <script src="../Scripts/Office.Controls.ListView.debug.js" type="text/javascript"> </script> <!-- SharePoint CSS --> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { // The resource files are in a URL in the form: // web_url/_layouts/15/Resource.ashx var scriptbase = Office.Samples.ListViewBasic.appWebUrl + "/_layouts/15/"; // Dynamically create the invisible iframe. var blankiframe; var blankurl; var body; blankurl = Office.Samples.ListViewBasic.appWebUrl + "/Pages/blank.html"; blankiframe = document.createElement("iframe"); blankiframe.setAttribute("src", blankurl); blankiframe.setAttribute("style", "display: none"); body = document.getElementsByTagName("body"); body[0].appendChild(blankiframe); // Dynamically create the link element. var dclink; var head; dclink = document.createElement("link"); dclink.setAttribute("rel", "stylesheet"); dclink.setAttribute("href", scriptbase + "defaultcss.ashx?ctag=" + Office.Samples.ListViewBasic.ctag ); head = document.getElementsByTagName("head"); head[0].appendChild(dclink); }, false); </script> </head> <body> Basic List View sample (HTML markup declaration): <div id="ListViewDiv" data-office-control="Office.Controls.ListView" data-office-options='{"listUrl" : getListUrl()}'> </div> <script type="text/javascript"> function createControl() { //Initialize Controls Runtime Office.Controls.Runtime.initialize({ sharePointHostUrl: Office.Samples.ListViewBasic.hostWebUrl, appWebUrl: Office.Samples.ListViewBasic.appWebUrl }); //Render the widget, this must be executed after the //placeholder DOM is loaded Office.Controls.Runtime.renderAll(); } function getListUrl() { return Office.Samples.ListViewBasic.appWebUrl + "/_api/web/lists/getbytitle('Announcements')"; } </script> </body> </html>
Примечание.
В приведенном выше примере кода явно указаны URL-адреса хост-сайта и сайта надстройки для инициализации среды выполнения для элементов управления Office. Однако если URL-адреса хост-сайта и сайта надстройки указаны в параметрах строки запроса SPAppWebUrl и SPHostUrl соответственно, то вы можете передать пустой объект, и код попытается получить параметры автоматически. Параметры SPAppWebUrl и SPHostUrl включаются в строку запроса при использовании маркера {StandardTokens}.
В следующем примере показано, как передавать пустой объект в метод инициализации.
// Initialize with an empty object and the code
// will attempt to get the tokens from the
// query string directly.
Office.Controls.Runtime.initialize({});
Сборка и запуск решения
Нажмите клавишу F5.
Примечание.
При нажатии клавиши F5 Visual Studio выполняет сборку решения, развертывает надстройку и открывает страницу разрешений.
Нажмите кнопку Доверять.
Выберите значок надстройки на странице Содержимое сайта.
Чтобы скачать этот пример из коллекции кода, см. пример кода Использование экспериментального мини-приложения Desktop List View в надстройке.
Дальнейшие действия
В этой статье показано, как использовать мини-приложение "Представление списка на рабочем столе" в своей надстройке с помощью HTML. Вы также можете ознакомиться со следующими сценариями и сведениями о мини-приложении.
Использование JavaScript для объявления мини-приложения Desktop List View
Для объявления мини-приложения можно использовать JavaScript, а не HTML. В этом случае в качестве заполнителя для мини-приложения можно использовать следующую разметку:
<div id="ListViewDiv"></div>
Для создания экземпляра List View используйте следующий код JavaScript:
new Office.Controls.ListView(
document.getElementById("ListViewDiv"), {
listUrl: Office.Samples.ListViewBasic.appWebUrl + "/_api/web/lists/getbytitle('Announcements')"
});
Пример выполнения задач см. на странице JSSimple.html в примере кода Использование экспериментального мини-приложения "Представление списка на рабочем столе" в надстройке.
Указание представления для отображения данных
Мини-приложение List View показывает данные, используя спецификацию представления в списке SharePoint.
Если вы объявляете мини-приложение, используя разметки HTML, вы можете использовать следующий синтаксис для указания представления.
<div id="ListViewDiv"
data-office-control="Office.Controls.ListView"
data-office-options="{listUrl: 'list URL',
viewID: 'GUID'
}">
</div>
Если вы объявляете мини-приложение, используя JavaScript, используйте следующий синтаксис для указания представления.
new Office.Controls.ListView(
document.getElementById("ListViewDiv"), {
listUrl: "list URL",
viewID: "GUID"
});
Вы можете использовать экспериментальную версию мини-приложения Desktop List View для показа данных в списках SharePoint. Мини-приложение показывает данные в режиме только для чтения. Свои идеи и комментарии вы можете оставить на сайте UserVoice для разработчиков Office.