Удобные интерфейсы в SharePoint 2010

1. Удобные интерфейсы в SharePoint 2010 Илья Бойко, MCPD и MCITP SharePoint 2010 Разработчик SharePoint, UMSOFT

2. Интерфейс SharePoint 2010 • Общий стиль Office 2010 • Лента • Модальные окна • Оповещения • Интерактивность

3. Лента

4. Структура ленты contextual tab group contextual tab tab ribbon control • group{template}

5. Определение ленты

6. Вид ленты • CustomAction • CommandUIDefinition • Tab • Scaling • MaxSize • Groups • Group • Controls • GroupTemplate

7. Обработка команд • Command UI Hander • Быстрее и проще создавать • Определяется декларативно и привязывается к ленте • Page Component • Можно привязывать к конкретным страницам http://www.andrewconnell.com/blog/archive/2011/04/13/recapping-my-sessions-from-the-european-sharepoint-best-practices-2011.aspx

8. Command UI Hander Определение обработчика: <CommandUIHandlers> <CommandUIHandler Command="CustomTab.HelloCommand" CommandAction="javascript:alert('Hello!');" /> </CommandUIHandlers>

9. Tokenization http://mysite/_layouts/handle.aspx?={ListId}

10. Page Component Command=“Rusug.UIDemo.MyCustomAction“ Type.registerNamespace('Rusug.UIDemo.MyCustomAction.PageComponent'); Rusug.UIDemo.MyCustomAction.PageComponent.prototype = { init: getFocusedCommands: getGlobalCommands: canHandleCommand: handleCommand: … }

11. Решения сообщества • SharePoint 2010 Fluent Ribbon APIhttp://spribbon.codeplex.com/ • Show or Hide SharePoint 2010 ribbon based on SharePoint Groupshttp://spribbonvisibility.codeplex.com/

12. DEMO

13. Диалоги

14. Диалоги • Меньше переходов между страницами • Удобство отображения небольших блоков информации • Возможность создать в любом месте с помощью JavaScript

15. Создание модального окна var options = { url:'/_layouts/prjsetng.aspx', title:'Title, Description, and Icon', width:640, height:400 } SP.UI.ModalDialog.showModalDialog(options)

16. Возврат значений var options = { … dialogReturnValueCallback: Function.createDelegate( null, function (result, returnValue) { if (result == SP.UI.DialogResult.OK) alert(returnValue); } } window.frameElement.commonModalDialogClose(SP.UI.DialogResult.OK, someValue)

17. Страницы для диалогов • class=“s4-notdlg” • Application Pages • Быстрее разрабатывать • Доступны на всей ферме • Нельзя использовать в sandboxed • Site Pages • Доступны на конкретном сайте • Возможность правки с помощью SharePoint Designer • Sandboxed

18. DEMO

19. Оповещения

20. Для чего нужны оповещения • Большая информативность • Минимизируем количество форм и страниц • Уведомления о результатах асинхронных вызовов.

21. Виды оповещений • Уведомления • Кратковременные уведомления • Статусы • Длительные, особо важные уведомления • Требование какого либо действия • Определение важности с пмощью цвета (Красный, желтый, зелёный, синий)

22. Уведомления Краткосрочное уведомление (5 сек): SP.UI.Notify.addNotification(“<i>Hi!</i>", false) Прикреплённое уведомление: id = SP.UI.Notify.addNotification("Hello World!", true) SP.UI.Notify.removeNotification(id)

23. Статусы Создание: id = SP.UI.Status.addStatus(“Failed!"); SP.UI.Status.setStatusPriColor(id, 'red'); Обновление: SP.UI.Status.appendStatus(id, “!!") SP.UI.Status.updateStatus(id, "FAILED!!!"); Удаление: SP.UI.Status.removeStatus(id); SP.UI.Status.removeAllStatus(true);

24. DEMO

25. ECMA Script

26. ECMA Script • Создание, удаление, изменение элементов списков • Работа с пользователями и разрешениями • Работа с рабочими процессам http://msdn.microsoft.com/en-us/library/ee557858.aspx

27. Отладка и Intellisense Необходимо добавить в .jsфайл: • /// <reference name="MicrosoftAjax.js" /> • /// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.core.debug.js" /> • /// <reference path="file://C:/Program Files/Common Files/Microsoft Shared/Web Server Extensions/14/TEMPLATE/LAYOUTS/SP.debug.js" />

28. Спасибо!