пятница, 26 февраля 2010 г.

SharePoint 2010. Ribbon и диалоговые окна

Хочу поведать о том, как создавать диалоговые окна и кастомные кнопки на ленте.

Приступим..

1. Создаем новый пустой проект SharePoint (New Project -> SharePoint 2010 -> Empty SharePoint Project)

Назовем его RibbonDialog.
Мастер предложит указать URL нашего сайта и выбрать уровень безопасности. Т.к. я планирую обращаться к объектной модели SharePoint, то для уверенности, выберу полный доступ "Deploy as a Farm Solution"


2. Теперь необходимо добавить пустой элемент в созданный проект

Назовем его RibbonDialogElement.
Обратим внимание на то, что в папке Features проекта, автоматически была создана новая фича, в элементы которой и попал наш RibbonDialogElement. Проверить это можно через Feature Designer


3. Создадим кнопку в ленте (Ribbon button)
Для этого, перейдем к редактированию файла Elements.xml и заменим его содержимое на следующий код:


  
  

    
      
        
          

Нажимаем F5. При выборе документа из Shared Documents, в разделе Manage ленты (Location="Ribbon.Documents.Manage) появляется новая кнопка "Show Dialog", при нажатии на которую выпрыгивает alert.

4. Теперь приступим к созданию диалогового окна.
Добавим в проект SharePoint "Layouts" Mapped folder (Правый клик по проекту Add -> SharePoint "Layouts" Mapped folder)
В созданную папку добавим новый элемент Application Page

Дадим странице название DialogContent.aspx
Сейчас определимся с тем, что мы хотим видеть на этой странице.
В качестве примера, выведем имена файлов из библиотеки документов.
Вынесем на страницу новый контрол Label и перейдем к редактированию codebehind нашей страницы
namespace RibbonDialog.Layouts.RibbonDialog
{
    public partial class DialogContent : LayoutsPageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SPSite oSiteCollection = new SPSite("http://win2008r2/sites/test");
                
            SPWeb website = oSiteCollection.AllWebs[0];

            var documentLibrary = (SPDocumentLibrary)website.Lists["DocumentsLibraryName"];

            Label.Text += "
Files:

"; foreach (SPListItem oListItem in documentLibrary.Items) Label.Text += SPEncode.HtmlEncode(oListItem.File.Name) + "
"; } } }

В приведенном листинге, в Label мы выводим имена всех файлов содержащихся в библиотеке "DocumentsLibraryName".

Теперь займемся непосредственно созданием диалогового окна.
Перейдем к редактированию файла Elements.xml и изменим CommandUIHandler следующим образом
< CommandUIHandler Command="ShowRibbonDialogCmd"
  CommandAction="javascript:
          
  function demoCallback(dialogResult, returnValue)
         {
             SP.UI.Notify.addNotification('Operation Successful!');
                
             SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
         }
              
         var options = 
  {              
            url: '/_layouts/RibbonDialog/DialogContent.aspx',
            tite: 'Ribbon Dialog',                
            width: 800,
            height: 600,
            dialogReturnValueCallback: demoCallback
  };
              
         SP.UI.ModalDialog.showModalDialog(options);" />

Обратим внимание на параметр url объекта option.

Теперь содержимое нашей страницы будет выводиться внутри диалогового окна.