Добавление веб-части надстройки в надстройку с размещением у поставщика
Это шестая часть серии статей, посвященной основам разработки надстроек SharePoint, размещаемых у поставщика. Для начала вам следует ознакомиться со статьей Надстройки SharePoint и предыдущими статьями этой серии, представленными в разделе Знакомство с созданием надстроек SharePoint, размещаемых у поставщика.
Примечание.
Если вы изучали предыдущие статьи этой серии о размещаемых у поставщика надстройках, то у вас уже есть решение Visual Studio, которое можно использовать для работы с данной статьей. Кроме того, вы можете скачать репозиторий на веб-странице SharePoint_Provider-hosted_Add-Ins_Tutorials и открыть файл BeforeAdd-inPart.sln.
В этой статье показано добавление веб-части особого типа, называемой веб-частью надстройки, в надстройку SharePoint. Веб-часть надстройки предоставляет доступ к форме заказа надстройки на странице SharePoint.
Создание веб-части надстройки
Примечание.
Когда решение открывается повторно, для параметров раздела "Запускаемые проекты" в Visual Studio обычно возвращаются значения по умолчанию. После повторного открытия примера решения, который рассматривается в этой серии статей, всегда выполняйте указанные ниже действия.
- В верхней части обозревателя решений щелкните узел решения правой кнопкой мыши и выберите пункт Назначить запускаемые проекты.
- Убедитесь, что в столбце Действие для всех трех проектов указано значение Запуск.
В обозревателе решений щелкните правой кнопкой мыши проект ChainStore и выберите пункты Добавить>Новый элемент.
Выберите веб-часть клиента (хост-сайт), присвойте ей имя Place Order (Размещение заказа), а затем нажмите кнопку Добавить. ("Клиентская веб-часть" — это другое имя "веб-части надстройки".)
На следующей странице мастера выберите второй вариант (Выберите или введите URL-адрес существующей веб-страницы для контента клиентской веб-части).
В раскрывающемся списке выберите URL-адрес для страницы OrderForm.aspx, а затем нажмите кнопку Готово.
В проект будет добавлен файл elements.xml, в котором определяется веб-часть надстройки. Затем этот файл будет открыт.
В элементе ClientWebPart измените указанные ниже атрибуты на следующие значения:
Атрибут Значение Название Разместить заказ Описание Форма размещения заказа DefaultHeight (Высота, используемая по умолчанию) 320 Для других атрибутов оставьте значения, используемые по умолчанию, и закройте файл.
Запуск надстройки и тестирование веб-части надстройки
Нажмите клавишу F5, чтобы развернуть и запустить надстройку. Редактор Visual Studio размещает удаленное веб-приложение в IIS Express, а базу данных SQL — в SQL Express. Кроме того, он выполняет временную установку надстройки на вашем тестовом сайте SharePoint и сразу же запускает ее. Прежде чем откроется начальная страница надстройки, вам будет предложено предоставить надстройке необходимые разрешения.
Когда откроется начальная страница надстройки, сама надстройка будет уже развернута, и пользователи смогут добавлять веб-часть надстройки Place Order (Размещение заказа) в любую область веб-частей на любой странице SharePoint веб-сайта магазина в Гонконге. Чтобы добавить ее на начальную страницу, выполните указанные ниже действия.
На расположенном в верхней части начальной страницы элементе управления хрома нажмите кнопку Back to Site (Вернуться на сайт). Откроется домашняя страница магазина в Гонконге.
На ленте откройте вкладку Страница и нажмите кнопку Изменить.
После перевода страницы в режим правки откройте вкладку Вставка на ленте и нажмите кнопку Веб-часть надстройки (она может по-прежнему называться Веб-часть приложения).
На открывшемся элементе управления вставки веб-части выберите веб-часть надстройки Place Order (Размещение заказа). Элемент управления будет выглядеть примерно так, как показано ниже.
Рис. 1. Элемент управления вставки веб-частей SharePoint
Щелкните какую-нибудь из зон веб-частей на форме. Это необходимо, чтобы задать расположение для веб-части надстройки.
На элементе управления вставки веб-части щелкните Добавить. Веб-часть надстройки Place Order (Размещение заказа) будет добавлена в зону веб-частей.
На ленте нажмите кнопку Сохранить.
Теперь форма заказа отображается на странице. У нее такие же внешний вид и удобство использования, как и у остальной части страницы. Форма должна выглядеть указанным ниже образом.
Рис. 2. Размещение части надстройки "Заказ"
Введите значения для полей Supplier (Поставщик), Product (Продукт) и Quantity (Количество), а затем нажмите кнопку Place Order (Заказать). На экране ничего не произойдет, но заказ будет введен в корпоративную базу данных. При необходимости вы можете очистить поля веб-части надстройки, обновив страницу.
Нажимайте кнопку "Назад" в браузере, пока не вернетесь на начальную страницу надстройки Chain Store (Сетевой магазин), а затем нажмите кнопку Show Orders (Показать заказы). В списке будет отображаться ваш новый заказ.
Чтобы завершить сеанс отладки, закройте окно браузера или остановите отладку в Visual Studio. При каждом нажатии клавиши F5 Visual Studio отзывает предыдущую версию надстройки и устанавливает ее последнюю версию.
Вы будете работать с этой надстройкой и решением Visual Studio при изучении других статей, поэтому при перерывах в работе рекомендуем отзывать надстройку. В обозревателе решений щелкните проект правой кнопкой мыши и выберите пункт Отозвать.
Дальнейшие действия
Надстройка зависит от двух списков, которые вы создали вручную. Но вы наверняка не хотите, чтобы пользователи тоже делали это вручную. В следующей статье показано автоматическое создание этих списков. Первое основное действие — создать пользовательские обработчики для событий установки надстройки: Обработка событий надстроек в надстройках, размещаемых у поставщика.