Открытие видео в диалоговом окне (Новости на портале SharePoint часть III)

Тема с открытием страниц в диалоговом окне далеко не нова, и я не буду рассказывать, как можно реализовать(можно посмотреть тут ). Сегодня я расскажу, как я решал задачу открытия видео в диалоговом окне из элемента списка «Извещения». Статья является продолжением Новости на портале SharePoint

Проблемы при реализации:

С первой проблемой с которой я столкнулся, это добавление кнопки открытия страницы в элементе списка.
Вторая проблема – это открытие wiki страницы в диалоговом окне.

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

Решение задачи:

Первым делом добавляем кнопку в элемент. Для этого открываем элемент в режиме редактирования и переходим в режим редактирования «HTLM»

Добавляем код:

<button class="button_play_video" type="submit">Посмотреть видео</button>

Вот и получили кнопку.

Следующим шагом я создал wiki страницу и добавил вебчасть «Мультимедиа»

Теперь добавляем вебчасть «редактор контента» на форму просмотра элемента списка. 

Код следующий:

Но как выяснилось, WiKi страницы не поддерживают открытие в модальном окне!!! (видел обход ошибки, но это присать свой контрол)

Пришлось создвать встраницу публикаций и на нее добавлять вебчасть  «Мультимедиа»

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

Что сделал, я добавил в кнопке свойство «value», в котором содержалось название страницы.

Это свойство использовалось как название диалогового окна и в качестве адреса страницы. Т.к. название окна для пользователей желательно на русском, то и адрес страницы получается на русском, что не есть хорошо(пример названия: "Тестовое видео.aspx")

В итоге:

Код кнопки:
<button class="button_play_video" type="submit" value="Тестовое видео">Посмотреть видео</button>
</pre>

Код в редакторе контента:
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script><script type="text/javascript">
    $(document).ready(function() {
        $('.button_play_video').click(function() {
            alert($(this).attr("value"));  // можно закоментировать, после тестирования
                openDialog($(this).attr("value"));
                return false;
        });

    });
</script>
<script type="text/javascript">
    function openDialog(titlepage) {
        var options = {
            url: "http://server/site/Pages/"+ titlepage  + ".aspx",
            width: 740,
            height: 500,
            title: titlepage,
        };
        SP.UI.ModalDialog.showModalDialog(options);
    }

</script>

Вот результат

Как видите, окно я сделал больше чем обычно делают (~ 600px), на мой взгляд было оптимальное для разного качества видео, в моем случае 720p и 360p.

Теперь для добавления нового видео достаточно добавить страницу с видео и кнопку в элемент и все будет работать.

Для оптимизации, я сохранил скрипт в js и положил в библиотеку сайта. далее добавил ссылку на этот файл в элементе списка, еще добавил редактор контента на домашнюю страницу и добавил ссылку на файл js. Теперь даже находясь на главной странице и и видя вебчасть "Новости" можно перейти просмотру видео