Пошаговое руководство. Создание приложения для SharePoint с помощью LightSwitch
С помощью LightSwitch можно создать приложение для SharePoint, в котором пользователи мобильных устройств смогут удаленно просматривать, добавлять и обновлять данные SharePoint с помощью современных устройств с сенсорным экраном, таких как телефоны и планшеты. В этом пошаговом руководстве рассмотрено создание приложения, с помощью которого торговые представители вымышленной оптовой компании по продаже продуктов питания — Contoso Foods — могут вводить данные опросов о том, как именно продукция этой компании выставлена в партнерских магазинах.
Эти представители часто посещают каждую точку продажи, чтобы доставить продукты и провести опросы по оценке качества, учитывающие место расположения каждого продукта в магазине. Во время опроса представители обычно собирают следующие типы данных.
Чистота витрины (от "очень плохо" до "отлично").
Освещение продукта (от "очень плохо" до "отлично").
Расположение продукта в проходе (середина прохода, конец прохода или стеллаж в самом конце прохода).
Высота полки продукта (верхняя полка, на уровне глаз или нижняя полка).
Представители также фотографируют витрины с продуктами, чтобы дать впоследствии более полную оценку.
Обязательные компоненты
Для выполнения этого руководства требуется Visual Studio 2013.
Помимо прочего, вам потребуются примеры файлов, которые можно загрузить в статье Survey App Tutorial: Developing a SharePoint Application Using LightSwitch (Руководство по созданию приложения опроса. Разработка приложения SharePoint с помощью LightSwitch).
Для размещения приложения вам также необходим сайт разработчика SharePoint в среде Office 365, который можно получить в Центре разработчика приложений для Office и SharePoint.
Создание приложения LightSwitch на HTML
Чтобы разработать приложение LightSwitch для SharePoint, сначала необходимо создать проект клиента с помощью Silverlight или HTML. В этом пошаговом руководстве будет использоваться HTML, чтобы оптимизировать экраны для мобильных устройств.
Создание проекта
В строке меню выберите Файл, Создать, Проект.
Откроется диалоговое окно Новый проект.
В списке шаблонов разверните узел Visual Basic или Visual C#, выберите узел LightSwitch, а затем выберите HTML-приложение LightSwitch (Visual Basic) или HTML-приложение LightSwitch (Visual C#).
В текстовом поле Имя введите SurveyApp и нажмите кнопку ОК.
Добавление поддержки для отображения данных опроса
Поскольку торговые представители вводят данные, они должны проверять, что именно они вводят, и впоследствии извлекать данные. Чтобы реализовать такую возможность, сначала следует добавить сущность Опрос во встроенную базу данных, в которой будут храниться данные опроса, а затем добавить начальный экран для отображения данных. Начальный экран отображается, когда представитель запускает приложение.
Добавление сущности "опрос"
В области Обозреватель решений откройте контекстное меню для узла SurveyApp.Server и выберите Добавить таблицу.
Откроется Entity Designer.
В окне Свойства в текстовом поле свойства Имя введите Опрос.
В Entity Designer введите следующие значения.
Имя
Тип
Обязательно
SalesRepName
Строковое
Нет
Cleanliness
Целое число
Да
Lighting
Целое число
Да
ShelfPlacement
Целое число
Да
AislePlacement
Целое число
Да
Выберите поле Cleanliness, а затем в окне Свойства выберите гиперссылку Список значений.
В диалоговом окне Список значений введите следующие значения и нажмите кнопку ОК.
Значение
Отображаемое имя
0
Очень плохо
1
Плохо
2
Удовлетворительно
3
Хорошо
4
Отлично
Выберите поле Lighting, а затем в окне Свойства выберите гиперссылку Список значений.
В диалоговом окне Список значений введите следующие значения и нажмите кнопку ОК.
Значение
Отображаемое имя
0
Очень плохо
1
Плохо
2
Удовлетворительно
3
Хорошо
4
Отлично
Выберите поле ShelfPlacement, а затем в окне Свойства выберите гиперссылку Список значений.
В диалоговом окне Список значений введите следующие значения и нажмите кнопку ОК.
Значение
Отображаемое имя
0
Верхняя полка
1
Полка на уровне глаз
2
Нижняя полка
Выберите поле AislePlacement, а затем в окне Свойства выберите гиперссылку Список значений.
В диалоговом окне Список значений введите следующие значения и нажмите кнопку ОК.
Значение
Отображаемое имя
0
Середина прохода
1
Конец прохода
2
Стеллаж в самом конце прохода
Создание основного экрана
В области Обозреватель решений откройте контекстное меню для узла SurveyApp.HTML Client и выберите Добавить экран.
Откроется диалоговое окно Добавление экрана.
В списке Выберите шаблон экрана выберите элемент Обзор экрана данных.
В текстовом поле Имя экрана введите SurveysHome.
В списке Данные экрана выберите Опросы и нажмите кнопку ОК.
В области Конструктор экрана выберите узел Экран | SurveysHome.
.png "Начальный узел \"Экран | Обзоры\"")
В окне Свойства в текстовом поле Отображаемое имя введите Опросы по продуктам Contoso.
Тестирование приложения в браузере
В строке меню выберите Отладка, Начать отладку.
Приложение отображается в веб-браузере, как показано на следующем рисунке.
.png "Экран приложения Survey в локальном браузере")
Другие элементы опроса не отображаются, поскольку введенные данные отсутствуют. Затем добавляется экран для создания и редактирования данных опроса.
Закройте окно браузера, чтобы остановить выполнение приложения.
Включение размещения SharePoint
Чтобы создать приложение, которое торговые представители могут запускать на сайте SharePoint, необходимо включить размещение в SharePoint, изменив параметры проекта HTML-клиента.
Примечание
Для размещения приложения вам также потребуется сайт разработчика SharePoint в среде Office 365, который можно получить в Центре разработчика приложений для Office и SharePoint.
Включение размещения SharePoint
В области Обозреватель решений выберите узел SurveyApp.
В строке меню выберите Проект, Включить SharePoint.
В мастере Включение SharePoint введите URL-адрес сайта Office 365 для разработчиков, а затем нажмите кнопку Готово.
URL-адрес должен иметь вид: https:// MySite.sharepoint.com/sites/Developer/.
Ссылки на несколько сборок SharePoint добавляются в проект LightSwitch, и проект для веб-приложения SharePoint добавляется в решение.
Тестирование размещенного приложения
В строке меню выберите Отладка, Начать отладку.
При первом запуске приложения SharePoint на компьютере будет предложено установить сертификат Localhost, поскольку приложения LightSwitch, используемые для размещения SharePoint, всегда используют протокол SSL (Secure Sockets Layer). Если используется этот сертификат, предупреждение системы безопасности не будет отображаться при каждом запуске приложения. Поскольку сертификат применяется только к Localhost, компьютер защищен.
В диалоговом окне Предупреждение безопасности нажмите кнопку Да.
Если откроется диалоговое окно Предупреждение о безопасности, нажмите кнопку Да.
Откроется веб-браузер.
На странице Вход нажмите кнопку Вход.
Введите пароль и нажмите кнопку Вход.
При появлении соответствующего запроса нажмите кнопку Сделать доверенным.
Приложение отображается в браузере, как показано на следующем рисунке.
.png "Приложение с хромом SharePoint")
В верхней части экрана отображается панель, с помощью которой пользователь может перейти обратно на сайт SharePoint. Эта панель хрома SharePoint отображается во всех приложениях для SharePoint.
Закройте окно браузера, чтобы остановить выполнение приложения.
Добавление поддержки для создания и редактирования данных опроса
Теперь, после интеграции SharePoint и приложения можно вернуться к добавлению функций, чтобы пользователи могли создавать и редактировать данные опроса. В этом разделе рассмотрено добавление еще нескольких сущностей за счет подключения к спискам SharePoint, а также добавление связей между сущностями, изменение начального экрана, создание экрана ввода данных и реализация навигации на новом экране.
Добавление сущностей
В веб-браузере найдите свой сайт разработчика SharePoint, используя тот же URL-адрес, который был указан ранее при включении SharePoint.
В строке меню Office 365 щелкните значок Параметры, а затем выберите пункт меню Параметры сайта.
В списке Коллекции веб-дизайнера выберите Шаблоны списков.
На странице Коллекция веб-дизайнера в строке меню выберите Файлы и Отправить документ.
В диалоговом окне Добавление шаблона выберите обзор, найдите файл шаблона contoso_customers_template.stp, который входит в состав примера, а затем нажмите кнопку ОК.
В диалоговом окне Коллекция шаблонов списков нажмите кнопку Сохранить.
В строке меню выберите Файлы, Отправить документ.
В диалоговом окне Добавление шаблона выберите обзор, найдите файл шаблона contoso_products_template.stp, который входит в состав примера, а затем нажмите кнопку ОК.
В диалоговом окне Коллекция шаблонов списков нажмите кнопку Сохранить.
В строке меню Разработчик выберите Контент сайта выберите ссылку добавить приложение, а затем — Шаблон клиентов Contoso.
В диалоговом окне Добавление настраиваемого списка присвойте списку имя Клиенты, а затем нажмите кнопку Создать.
На странице Контент сайта выберите добавить приложение, а затем — Шаблон продуктов Contoso.
В диалоговом окне Добавление настраиваемого списка присвойте списку имя Продукты, а затем нажмите кнопку Создать.
В Visual Studio в области Обозреватель решений откройте контекстное меню для узла SurveyApp.Server и выберите Добавить источник данных.
В области Мастер присоединения к источнику данных щелкните значок SharePoint и нажмите кнопку Далее.
В текстовом поле Укажите адрес сайта SharePoint введите URL-адрес сайта разработчика SharePoint, а затем нажмите кнопку Далее.
В списке Выберите сущности для использования в приложении разверните узел Список, установите флажки Клиент и Продукты, а затем нажмите кнопку Готово.
В приложение будут добавлены сущности Customers, Products и UserInformationList.
Создание отношений между сущностями
В области Обозреватель решений разверните узел Источники данных, откройте контекстное меню для узла Surveys.lsml и нажмите кнопку Открыть.
В Entity Designer на панели инструментов выберите ссылку Отношение.
Откроется диалоговое окно Добавление нового отношения.
В столбце Кому в списке Имя выберите Клиент и нажмите кнопку ОК.
В Entity Designer выберите ссылку Отношение.
В диалоговом окне Добавление нового отношения в столбце Кому в списке Имя выберите Продукт, а затем нажмите кнопку ОК.
Изменение основного экрана
В области Обозреватель решений откройте контекстное меню для узла SurveysHome.lsml и выберите Открыть.
В центральной области конструктора экрана разверните список узла Опрос и выберите Макет строк.
Выберите узлы Sales Rep Name, Cleanliness, Lighting, Shelf Placement и Aisle Placement, а затем удалите их.
В списке Добавить выберите Клиент.
В списке Добавить выберите Продукт.
Добавление экрана для создания и редактирования опросов
В конструкторе экрана разверните узел Панель команд и выберите Добавить.
В диалоговом окне Добавление кнопки выберите переключатель Выбрать существующий метод.
В списке showTab выберите addAndEditNew.
В списке Перейти к выберите Новый экран и нажмите кнопку ОК.
Откроется диалоговое окно Добавление экрана.
В диалоговом окне Добавление экрана примите значения по умолчанию и нажмите кнопку ОК.
В конструкторе экрана переместите узлы Клиент и Продукт, чтобы они отображались в узле Sales Rep Name.
Удалите узел Макет строк | По правому краю.
Добавление навигации по экрану
В области Обозреватель решений откройте контекстное меню для узла SurveysHome.lsml и выберите Открыть.
В конструкторе экрана выберите узел Список | Мои опросы по продуктам.
В окне Свойства выберите гиперссылку Касание элемента: нет.
Откроется диалоговое окно Изменить действие касания элемента.
В списке showTab выберите editSelected.
В списке Перейти к выберите Добавить редактирование опроса и нажмите кнопку ОК.
Тестирование изменений
В строке меню выберите Отладка, Начать отладку.
На начальном экране нажмите кнопку Добавить опрос.
Появится экран Добавить редактирование опроса.
Разверните список Клиент, чтобы отобразить пример данных о клиенте.
Разверните список Продукт, чтобы отобразить пример данных о продуктах.
Разверните каждый из оставшихся списков, чтобы отобразить варианты, которые были введены ранее в рамках этого пошагового руководства.
Закройте окно браузера, чтобы остановить выполнение приложения.
Добавление логики для имени торгового представителя
Торговые представители не должны указывать свои имена при каждом создании опроса. Вместо этого добавляется логика, с помощью которой в поле Sales Rep Name автоматически вносится имя текущего, прошедшего аутентификацию пользователя и показываются опросы, созданные конкретными пользователями.
Задание значения по умолчанию
В области Обозреватель решений откройте контекстное меню для узла Surveys.lsml и выберите Открыть.
Откроется Entity Designer.
В списке Запись кода выберите Surveys_Inserting.
В редакторе кода добавьте следующий код в метод Surveys_Inserting.
entity.SalesRepName = Application.User.Nameentity.SalesRepName = this.Application.User.Name;Этот метод выполняется в конвейере сохранения сервера при вставке сущности Опрос. Когда приложение извлекает сведения о пользователе, они соответствуют пользователю, который выполнил вход в SharePoint.
В области Обозреватель решений откройте контекстное меню для узла AddEditSurvey.lsml и выберите Открыть.
Откроется конструктор экрана.
В центральной области удалите узел Sales Rep Name.
Добавление логики фильтрации
В области Обозреватель решений откройте контекстное меню для узла Surveys.lsml и выберите Открыть.
Откроется Entity Designer.
В списке Запись кода выберите Surveys_Filter.
В редакторе кода добавьте следующий код в метод Surveys_Filter.
filter = Function(e) e.SalesRepName = Application.User.Namefilter = f => f.SalesRepName == this.Application.User.Name;Этот метод выполняется на сервере при запросе сущности Опрос.
Тестирование изменений
В строке меню выберите Отладка, Начать отладку.
На начальном экране нажмите кнопку Добавить опрос.
В списке Клиент выберите клиента.
В списке Продукт выберите продукт.
В каждом из оставшихся списков выберите значение, а затем нажмите кнопку Сохранить.
Убедитесь, что список опросов содержит только что созданный опрос.
Закройте окно браузера, чтобы остановить выполнение приложения.
Добавление логики для даты последнего опроса
Далее показано добавление кода для отражения даты проведения последнего опроса по каждому клиенту.
Обновление даты последнего опроса
В области Обозреватель решений откройте контекстное меню для узла Surveys.lsml и выберите Открыть.
В списке Запись кода выберите Surveys_Inserted.
В редакторе кода добавьте следующий код в метод Surveys_Inserted.
Dim c As Customer = Me.DataWorkspace.DeveloperData.Customers.Where( Function(f) f.CompanyName = entity.Customer.CompanyName).FirstOrDefault() If (Not c Is Nothing) Then c.LastSurveyDate = Date.Today Me.DataWorkspace.DeveloperData.SaveChanges() End IfCustomer c = this.DataWorkspace.DeveloperData.Customers.Where(f => f.CompanyName == entity.Customer.CompanyName).FirstOrDefault(); if (c != null) { c.LastSurveyDate = DateTime.Today; this.DataWorkspace.DeveloperData.SaveChanges(); }
Тестирование изменений
В строке меню выберите Отладка, Начать отладку.
На начальном экране нажмите кнопку Добавить опрос.
В списке Клиент выберите клиента.
В списке Продукт выберите продукт.
В каждом из оставшихся списков выберите значение, а затем нажмите кнопку Сохранить.
Убедитесь, что список опросов содержит только что созданный опрос.
В строке меню выберите Вернуться на сайт.
Откроется сайт разработчика SharePoint. В списке Клиенты был обновлен элемент LastSurveyDate для клиента, по которому только что был проведен опрос.
Закройте окно браузера, чтобы остановить выполнение приложения.
Обновление заставки и заголовка
Далее будет показано обновление заставки, которая появляется при запуске приложения, чтобы на ней отображалось имя приложения вместо имени проекта. Можно также изменить имя, отображаемое в заголовке или на вкладке браузера.
Обновление отображаемых строк
В области Обозреватель решений разверните узел SurveyApp.HTMLClient, откройте контекстное меню для узла default.htm и нажмите кнопку Открыть.
В редакторе кода найдите элемент <div> и измените SurveyApp на Contoso Product Surveys.
Эта строка отобразится на заставке.
В элементе <title> замените SurveyApp на Contoso Product Surveys.
Тестирование изменений
В строке меню выберите Отладка, Начать отладку.
Обратите внимание, что опросы по продуктам Contoso отображаются на заставке и в заголовке.
Закройте окно браузера, чтобы остановить выполнение приложения.
Добавление поддержки для отправки и отображения фотографий
Далее будет показана реализация передачи фотографий в библиотеку рисунков SharePoint. Когда торговый представитель загружает фотографию, SharePoint автоматически создает эскиз этой фотографии и версию, которая оптимизирована для Интернета. Благодаря таким дополнительным изображениям для торговых представителей упрощается просмотр и управление изображениями в SharePoint, а не в базе данных SQL для LightSwitch.
Приложения для SharePoint могут содержать различные элементы, такие как списки, модули, типы содержимого и контейнеры свойств, которые хранятся на сайте приложения и устанавливаются или удаляются как часть приложения.
Добавление сущности "фотография"
В области Обозреватель решений откройте контекстное меню для узла SurveyApp.Server и выберите Добавить таблицу.
В поле Свойства выберите Имя и введите Фото.
В Entity Designer введите следующие значения.
Имя
Тип
Обязательно
FullImageUrl
Веб-адрес
Да
ThumbnailUrl
Веб-адрес
Да
OptimizedUrl
Веб-адрес
Да
NameWithExt
Строковое
Да
CreatedDate
Дата/время
Да
Добавление отношения
В области Обозреватель решений откройте контекстное меню для узла Surveys.lsml и выберите Открыть.
В Entity Designer на панели инструментов выберите ссылку Отношение.
В диалоговом окне Добавление нового отношения в строке Имя и в столбце До в списке выберите Фото.
В строке Кратность столбца От в списке выберите Один.
В строке Кратность столбца До в списке выберите Многие.
В строке Поведение при удалении столбца От в списке выберите Каскадное удаление, а затем нажмите кнопку ОК.
Добавление библиотеки рисунков SharePoint
В области Обозреватель решений откройте контекстное меню для узла SurveyApp.SharePoint, выберите Добавить, а затем — Создать элемент.
В диалоговом окне Добавление нового элемента выберите Список.
В текстовом поле Имя введите Фото и нажмите Добавить.
В области Мастер настройки SharePoint выберите переключатель Создание списка на основе имеющегося шаблона.
В списке Извещения выберите Библиотека рисунков и нажмите кнопку Готово.
Добавление служебного класса
В области Обозреватель решений откройте контекстное меню для узла SurveyApp.Server, выберите Добавить, а затем — Существующий элемент.
Откроется диалоговое окно Добавление существующего элемента.
Найдите файл PhotoListHelper.vb или PhotoListHelper.cs, который загружен в составе примера, а затем нажмите кнопку Добавить.
В редакторе кода в методе AddPhoto найдите строку siteContext.ExecuteQuery() и добавьте следующий код.
siteContext.Load(siteContext.Web) siteContext.ExecuteQuery()siteContext.Load(siteContext.Web); siteContext.ExecuteQuery();Примечание
Этот дополнительный код, который требуется в Visual Studio 2013, чтобы предотвратить исключение при последующих вызовах URL-адреса.
В строке меню выберите Сборка, Собрать решение, чтобы убедиться в правильности компиляции кода.
Добавление контроллера WebAPI
В области Обозреватель решений откройте контекстное меню для узла SurveyApp.Server, выберите Добавить, а затем — Создать элемент.
В диалоговом окне Добавление нового элемента выберите узел Интернет и выберите шаблон Класс контроллера веб-API.
В текстовом поле Имя введите PhotosController и нажмите кнопку Добавить.
В редакторе кода замените содержимое следующим кодом.
Imports System.Net Imports System.Web.Http Imports LightSwitchApplication Imports Microsoft.SharePoint.Client Imports System.IO Imports System.Net.Http Imports System.Net.Http.Headers Imports System.Text Imports System.Threading.Tasks Public Class PhotosController Inherits ApiController Private _appWebContext As ClientContext Private ReadOnly Property AppWebContext() As ClientContext Get If _appWebContext Is Nothing Then Using serverContext = LightSwitchApplication.ServerApplicationContext.CreateContext() _appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext() End Using End If Return _appWebContext End Get End Property Public Function PostFormData() As Task(Of HttpResponseMessage) If Not Request.Content.IsMimeMultipartContent() Then Throw New HttpResponseException(HttpStatusCode.UnsupportedMediaType) End If Dim memStream = New MultipartMemoryStreamProvider() Dim spCtx = AppWebContext Dim myTask = Request.Content.ReadAsMultipartAsync(memStream).ContinueWith( Function(t) If t.IsFaulted OrElse t.IsCanceled Then Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception) End If Dim fileList = New StringBuilder() For Each contentItem In memStream.Contents Dim sourceFileName = Path.GetFileName(contentItem.Headers.ContentDisposition.FileName.Replace("""", "")) Try Dim fileReadTask = contentItem.ReadAsByteArrayAsync().ContinueWith( Function(frt) Dim photoUrl = PhotoListHelper.AddPhoto(frt.Result, sourceFileName, spCtx) Return photoUrl End Function ) fileReadTask.Wait() fileList.AppendLine(fileReadTask.Result) Catch ex As Exception fileList.AppendLine("FAILED::" + ex.Message) End Try Next Return Request.CreateResponse(HttpStatusCode.Created, fileList.ToString(), New MediaTypeHeaderValue("application/xml")) End Function ) Return myTask End Function Public Function DeletePhoto(url As String) As Task(Of HttpResponseMessage) Dim spCtx = AppWebContext Dim deleteTask = New Task(Of HttpResponseMessage)( Function() Try PhotoListHelper.DeletePhoto(url, spCtx) Return Request.CreateResponse(HttpStatusCode.OK) Catch ex As Exception Return Request.CreateErrorResponse(HttpStatusCode.NotModified, ex) End Try End Function ) deleteTask.Start() Return deleteTask End Function End Classusing System; using System.Collections; using System.Collections.Generic; using System.Data; using System.Diagnostics; using System.Net; using System.Web.Http; using LightSwitchApplication; using Microsoft.SharePoint.Client; using System.IO; using System.Net.Http; using System.Net.Http.Headers; using System.Text; using System.Threading.Tasks; public class PhotosController : ApiController { private ClientContext appWebContext; private ClientContext AppWebContext { get { if (appWebContext == null) { using (var serverContext = LightSwitchApplication. ServerApplicationContext.CreateContext()) { appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext(); } } return appWebContext; } } public Task<HttpResponseMessage> PostFormData() { if (!Request.Content.IsMimeMultipartContent()) { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } // Since we're uploading the image to Sharepoint directly, we'll just read the Http content into memory var memoryStream = new MultipartMemoryStreamProvider(); // We need to get the appweb context before forking the new task; otherwise the LightSwitch runtime will // throw because there is no HttpContext available on the calling thread. var sharepointContext = this.AppWebContext; var task = Request.Content.ReadAsMultipartAsync(memoryStream). ContinueWith<HttpResponseMessage>(t => { if (t.IsFaulted || t.IsCanceled) { Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception); } // There can be multiple files in the POST, so we'll upload each attachment and attach its new // URL (in the SP Picture Library). StringBuilder fileList = new StringBuilder(); foreach (var contentItem in memoryStream.Contents) { var sourceFileName = Path.GetFileName(contentItem.Headers.ContentDisposition.FileName.Replace("\"", "")); try { // Read the contents of the file into memory and upload it to Sharepoint var fileReadTask = contentItem.ReadAsByteArrayAsync(). ContinueWith<string>(frt => { var photoURL = PhotoListHelper.AddPhoto(frt.Result, sourceFileName, sharepointContext); return photoURL; }); fileReadTask.Wait(); fileList.AppendLine(fileReadTask.Result); } catch (Exception ex) { fileList.AppendLine(@"FAILED::" + ex.Message); } } return Request.CreateResponse(HttpStatusCode.Created, fileList.ToString(), new MediaTypeHeaderValue("application/xml")); }); return task; } public Task<HttpResponseMessage> DeletePhoto(string url) { var sharepointContext = this.AppWebContext; var deleteTask = new Task<HttpResponseMessage>( () => { try { PhotoListHelper.DeletePhoto(url, sharepointContext); return Request.CreateResponse(HttpStatusCode.OK); } catch (Exception e) { return Request.CreateErrorResponse(HttpStatusCode.NotModified, e); } }); deleteTask.Start(); return deleteTask; } }Обратите внимание, что этот код извлекает объект узла SharePoint с помощью API сервера для LightSwitch: appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext(). Объект узла SharePoint обеспечивает доступ к нескольким полезным свойствам и методам, которые используются для взаимодействия с сайтом SharePoint. В частности, метод GetAppWebClientContext предоставляет точку входа для взаимодействия с элементами сайта приложения. Если сайт приложения извлекает ClientContext, для обратной связи с SharePoint используется правильный токен контекста.
Добавление маршрута HTTP к контроллеру
В области Обозреватель решений откройте контекстное меню для узла SurveyApp.Server, выберите Добавить, а затем — Создать элемент.
В диалоговом окне Добавление нового элемента выберите узел Интернет, а затем — шаблон Глобальный класс приложения.
В текстовом поле Имя введите Global.asax и нажмите кнопку Добавить.
В редакторе кода введите следующие операторы Imports или Using.
Imports System.Web.Routing Imports System.Web.Httpusing System.Web.Routing; using System.Web.Http;Добавьте следующий код в метод Application_Start.
RouteTable.Routes.MapHttpRoute( name := "DefaultApi", routeTemplate := "api/{controller}/{id}", defaults := New With { .id = System.Web.Http.RouteParameter.Optional } )RouteTable.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = System.Web.Http.RouteParameter.Optional } ); }Маршрут HTTP допускает вызов контроллера из клиента.
В строке меню выберите Сборка, Собрать решение, чтобы убедиться в правильности компиляции кода.
Аутентификация приложения для взаимодействия с библиотекой рисунков "Фотографии"
Сайт приложения, содержащий библиотеку рисунков Фотографии, расположен в изолированном домене. По умолчанию приложение не проходит аутентификацию для взаимодействия с сайтом приложения, поэтому необходимо добавить простой скрипт для выполнения такой аутентификации.
Добавление проверки подлинности
В области Обозреватель решений разверните узел SurveyApp.HTMLClient, откройте контекстное меню для узла Скрипты, выберите Добавить, а затем — Существующий элемент.
В диалоговом окне Добавление существующего элемента найдите файл sharepointauthhelper.js, загруженный в составе примера, а затем нажмите кнопку Добавить.
В редакторе кода замените содержимое следующим кодом.
$(document).ready(function () { var paramName = "SPAppWebUrl"; var match = RegExp('[?&]' + paramName + '=([^&]*)') .exec(window.location.search); var appWebUrl = match && decodeURIComponent(match[1].replace(/\+/g, ' ')); if (appWebUrl) { var authproxy = appWebUrl + "/_layouts/15/appwebproxy.aspx" var iframe = $("<iframe src='" + authproxy + "' style='width: 0px; height: 0px; border: 0px'/>"); $("body").append(iframe); } });Примечание
В Visual Studio 2013 при аутентификации для приложений SharePoint для передачи URL-адреса используется строка запроса, а не файл cookie.
В области Обозреватель решений откройте контекстное меню для файла default.htm и выберите Открыть.
В файле default.htm добавьте следующую ссылку.
<script type="text/javascript" src="Scripts/sharepointauthhelper.js"></scriptВ строке меню выберите Сборка, Собрать решение, чтобы убедиться в правильности компиляции кода.
Добавление пользовательского элемента управления для отправки фотографий
Далее показано создание пользовательского элемента управления, который выводит торговым представителям запрос на передачу фотографий каждого выставленного продукта.
Создание пользовательского элемента управления
В области Обозреватель решений разверните узел SurveyApp.HTMLClient, откройте контекстное меню для узла Скрипты, выберите Добавить, а затем — Существующий элемент.
В диалоговом окне Добавление существующего элемента найдите файл photohelper.js, загруженный в составе примера, а затем нажмите кнопку Добавить.
В области Обозреватель решений откройте контекстное меню для файла default.htm и выберите Открыть.
В редакторе кода добавьте следующую ссылку.
<script type="text/javascript" src="Scripts/photohelper.js"></script>В области Обозреватель решений на панели инструментов выберите в списке Логическое представление.
Откройте контекстное меню для узла экрана AddEditSurvey.lsml и нажмите кнопку Открыть.
В конструкторе экрана откройте контекстное меню для узла Всплывающие окна и выберите Добавить всплывающее окно.
В поле Свойства в текстовом поле Имя введите UploadPhotos.
В конструкторе экрана в узле Макет строк | Отправка фото разверните узел Добавить и выберите Создать пользовательский элемент управления.
Откроется диалоговое окно Добавление пользовательского элемента управления.
Нажмите кнопку ОК, чтобы принять предлагаемое по умолчанию значение Экран и закрыть диалоговое окно.
В окне Свойства в текстовом поле Имя введите UploadControl и выберите гиперссылку Изменить код метода Render.
В редакторе кода введите следующую строку кода перед методом myapp.AddEditSurvey.UploadControl_render.
var $uploadControlElement, uploadControlContentItem;Добавьте в тело метода следующий код.
$uploadControlElement = $(element); uploadControlContentItem = contentItem;Когда торговый представитель загружает фотографию, этот код создает сущность Фото во встроенной базе данных, которая содержит ссылки на URL-адреса библиотеки рисунков, по которым размещены полноразмерные, оптимизированные фотографии и их эскизы. Эта сущность будет использоваться в дальнейшем для отображения изображений в приложении опроса.
В области Обозреватель решений откройте контекстное меню для узла экрана AddEditSurvey.lsml и выберите Открыть.
В конструкторе экрана откройте контекстное меню для узла Макет строк | Отправка фото и выберите Добавить кнопку.
В диалоговом окне Добавление кнопки выберите переключатель Создать собственный метод.
Присвойте методу имя UploadPhoto и нажмите кнопку ОК.
В области Конструктор экрана откройте контекстное меню узла Отправка фото и выберите Изменить код Execute.
В редакторе кода добавьте следующий код в метод Upload.
if ($("#fileInput").val() != "") { $.mobile.loading('show'); $("#uploadForm").submit(); }Этот код выполняется, когда пользователь касается кнопки Отправить фото для метода UploadControl.
В конструкторе экрана откройте контекстное меню для узла Вкладки и выберите Добавить вкладку.
В окне Свойства назовите вкладку Фото.
В узле Макет строк | Фото откройте контекстное меню для узла Панель команд и выберите Добавить кнопку.
В диалоговом окне Добавление кнопки выберите переключатель Создать собственный метод, назовите метод UploadPhotos, а затем нажмите кнопку ОК.
В поле Свойства введите Отправка фото в качестве отображаемого имени.
В списке Значок выберите Добавить изображение.
В области Конструктор экрана откройте контекстное меню для узла Отправка фото и выберите Изменить код Execute.
В редакторе кода добавьте следующий код:
showUploadPopup(screen);Этот код отображает всплывающие сведения, когда пользователь касается кнопки Отправить фото.
В строке меню выберите Сборка, Собрать решение, чтобы убедиться в правильности компиляции кода.
Добавление поддержки экрана для отображения фотографий
Далее будет показана реализация отображения фотографий на экране AddEditSurvey. Для каждой фотографии отображается эскиз и, когда торговый представитель выбирает эскиз, в диалоговом окне появляется увеличенное, оптимизированное для Интернета изображение. Кроме того, можно реализовать удаление фотографий, когда торговый представитель удаляет записи опроса для этих фотографий.
Отображение эскиза
В области Обозреватель решений откройте контекстное меню для узла экрана AddEditSurvey.lsml и выберите Открыть.
В левой области конструктора экрана выберите гиперссылку Добавить фотографии.
На экран добавляется запрос Фото.
В центральной области конструктора экрана в списке Добавить узла Макет строк | Фото выберите Фото.
В области Список выберите Список плиток.
Удалите узлы Полный URL-адрес изображения, Оптимизированный URL-адрес, Имя с расширением, Дата создания и Опрос.
Должен остаться только узел URL-адрес эскиза.
В списке для узла URL-адрес эскиза выберите Изображение.
В поле Свойства выберите Ширина, в текстовом поле Пиксели введите 60.
В разделе Высота в текстовом поле Пиксели введите 60.
Добавление всплывающего окна
В конструкторе экрана выберите узел Всплывающие окна, а затем — Добавить всплывающее окно.
В поле Свойства в текстовом поле Имя введите ViewPhotoDetails.
В левой области конструктора экрана переместите узел Name With Ext в узел Макет строк | Просмотр сведений о фото.
В списке для узла Name With Ext выберите Текст.
Перетащите узел Дата создания в узел Имя с расширением.
В списке для узла Дата создания выберите Текст.
Перетащите узел Оптимизированный URL-адрес в узел Дата создания.
В списке для узла Оптимизированный URL-адрес выберите Изображение.
В окне Свойства в списке Ширина выберите По содержимому.
В списке Высота выберите По содержимому.
В списке Положение подписи выберите Нет.
В конструкторе экрана выберите узел Список плиток | Фото.
В окне Свойства выберите гиперссылку Касание элемента.
Откроется диалоговое окно Изменить действие касания элемента.
В списке Контекстное меню выберите Просмотр сведений о фото и нажмите кнопку ОК.
Добавление поддержки для удаления фотографий
В области Обозреватель решений откройте контекстное меню для узла Photos.lsml и выберите Открыть.
Откроется Entity Designer.
В списке Запись кода выберите Photos_Deleted.
В редакторе кода добавьте следующий код в метод Photos_Deleted.
Try PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext()) Catch ex As Exception End Trytry { PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext()); } catch (Exception) { }Связь между сущностями Фото и Опросы была задана как Каскадное удаление, поэтому при удалении записи опроса вызывается метод Photos_Deleted. Этот код вызывает метод DeletePhoto класса PhotoListHelper для удаления фотографий из списка SharePoint.
В области Обозреватель решений откройте контекстное меню для узла AddEditSurvey.lsml и выберите Открыть.
В конструкторе экрана откройте контекстное меню для узла Макет строк | Просмотр сведений о фото и выберите Добавить кнопку.
В диалоговом окне Добавление кнопки выберите переключатель Создать собственный метод.
В текстовом поле Метод введите DeletePhoto и нажмите кнопку ОК.
Откройте контекстное меню для узла Удаление фото, а затем выберите Изменить код Execute.
В редакторе кода добавьте следующий код в метод DeletePhoto_Execute.
deleteCurrentPhoto(screen);Поскольку был добавлен этот код JavaScript, торговые представители могут удалять фотографии без удаления связанного с ними опроса.
Тестирование изменений
В строке меню выберите Отладка, Начать отладку.
На начальном экране нажмите кнопку Добавить.
В списке Клиент выберите клиента.
В списке Продукт выберите продукт.
В каждом из оставшихся списков выберите значение, а затем нажмите кнопку Сохранить.
Убедитесь, что в списке опросов появился созданный опрос.
На вкладке Фотографии нажмите кнопку Отправить фото.
В диалоговом окне Отправка фото нажмите кнопку Обзор, перейдите к фотографии на локальном компьютере, а затем нажмите кнопку Открыть.
Нажмите кнопку Отправить фото, а затем выберите появившийся эскиз.
Откроется диалоговое окно Просмотр фотографии с полноразмерным изображением.
Нажмите кнопку Удалить фото и проверьте, что эскиз удален.
Закройте окно браузера, чтобы остановить выполнение приложения.
Публикация завершенного приложения в SharePoint
До сих пор запуск приложения осуществлялся в режиме отладки, в котором SharePoint используется для аутентификации и перенаправления на экземпляр IIS Express на локальном компьютере. Приложение теперь готово, и его можно опубликовать на локальном сайте SharePoint, в среде Microsoft Azure или на сайте стороннего поставщика. После публикации приложения другие пользователи смогут запускать его из среды SharePoint на своих компьютерах и мобильных устройствах. См. статью How to: Publish a cloud business app to SharePoint (Практическое руководство. Публикация облачного бизнес-приложения в SharePoint).