Кастомизация
06
Фев
22

Слайд шоу

Карусель, карусель начинает рассказ.
Это сказки, песни и веселье!
Карусель, карусель — это радость для нас,
Прокатись на нашей карусели!

Сейчас прикрутим к CRM фичу известную «в этих Ваших Интернетах» как слайд шоу, карусель или ротатор контента. В чем суть:

  • К карточке CRM приаттачиваются PNG рисунки с определенным префиксом (в данном примере «p_»);
  • Далее эти рисунки тянутся на форму объекта (в данном примере это Продукт) при ее открытии и располагаются в специальной области (но виден будет только один из них);
  • Ну и пользователи просматривают слайд шоу из рисунков, щелкая по стрелкам влево и вправо.

Итак, поехали…

  • Создайте в CRM следующие Веб-ресурсы:
  • HTML, с таким кодом:
    <html>
    <head>
        <title>Слайд шоу</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <script src="/WebResources/new_jquery1.7.1.min.js" type="text/javascript" ></script>
        <script src="/WebResources/new_json2.js" type="text/javascript" ></script>
        <style type="text/css">
            * {
                margin: 0; padding: 0;
                border-width: 0px;
                background: #f6f8fa;
            }
    
            #slideshow {
                position:relative;
                width: 358px; height: 220px;
                border: 1px dotted #000;
            }
    
            #slides IMG {
                position: absolute;
                top: 0; left: 0;
                display: none;
                width: 356px; height: 218px;
            }
    
            .btn {
                position: absolute;
                z-index: 10;
                bottom: 10;
                cursor: pointer;
            }
            #left { left: 10; }
            #right { right: 10; }    
        </style>
    </head>
    <body>
        <div id="slideshow">
            <div id="slides"></div>
            <img src="/WebResources/new_left.png" class="btn" id="left"  />
            <img src="/WebResources/new_right.png" id="right" class="btn" />
        </div>
        <script type="text/javascript">
            $(function () {
                // "Ломимся" на родительскую форму
                var b = window.parent;
                
                // Проверяем, что текущая форма не я вляется формой создания записи.
                if (b.Xrm.Page.ui.getFormType() == 1) return;
    
                // Формируем oData URL
                // Вытаскиваем из CRM контент приаттаченых рисунков, начинающихся с "p_".
                var oDataRequest = b.Xrm.Page.context.getServerUrl() + "/XRMServices/2011/OrganizationData.svc/ProductSet(guid'" + b.Xrm.Page.data.entity.getId().substr(1, 36) + "')/Product_Annotation?$select=DocumentBody&filter=startswith(FileName,'p_')";
                
                // Отправляем запрос
                var retrieveReq = new XMLHttpRequest();
                    retrieveReq.open("GET", oDataRequest, true);
                    retrieveReq.setRequestHeader("Accept", "application/json");
                    retrieveReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
                    // При получении ответа вызываем функцю retrieveReqCallBack
                    retrieveReq.onreadystatechange = function () { retrieveReqCallBack(this); };
                    retrieveReq.send(null);
    
                // Добавляем к событию клика на стрелках, вызов функции slideSwitch и передаем ей параметр;
                $('#left').click(function () { slideSwitch('left'); });
                $('#right').click(function () { slideSwitch('right'); });
            });
    
            // Функция вызывается при успешном выполнении запроса
            function retrieveReqCallBack (retrieveReq) {
                // Проверяем, что ответ "положительный"
                if (retrieveReq.readyState == 4) {
                    if (retrieveReq.status == 200) {
                        // Парсим ответ в формат JSON
                        var entity = JSON.parse(retrieveReq.responseText).d.results;
                        if (entity != "") {
                            // Вытаскиваем контент рисунков и добавляем в DIV контейнер
                            var $slides = $('#slides');
                            for (var key in entity) {
                                var fileContent = "data:image/png;base64," + entity[key].DocumentBody;
                                $('#slides').append('<img src="' + fileContent + '" />');
                            }
                            // Отображаем первый рисунок
                            $('#slides :first-child').show();
                        }
                    }
                }
            }
    
            // Функция "переключает слайды"
            function slideSwitch(direction) {
                // Скрываем текущий слайд
                var $cur = $('#slides :first-child').fadeOut(100);
                // В зависимости от того какая кнопка нажата, либо переносим текущий рисунок в конец "стека", либо последний в его начало.
                if (direction == 'right')
                    $cur.next('img').fadeIn(100).end().appendTo('#slides');
                else
                    $('#slides :last-child').fadeIn(100).prependTo('#slides');
            }
        </script>
    </body>
    </html>
    

    Разбор полетов:

    • Сначала мы подключаем к CRM библиотеки jQuery и JSON2;
    • Затем определяем CSS стили для контейнеров и служебных кнопок-стрелок;
    • Определяем DIV контейнер в котором будут содержаться наши слайды, а также две кнопки-стрелки;
    • Затем идет основная логика из трех JS функци:
      • В первой вытаскиваем через oData сервис CRM содержимое всех приаттаченых рисунков начинающихся с «p_» (p – это product).
        P.S. Вам нужно изменить этот URL чтобы тянул рисунки с Вашего объекта;
      • Вторая парсит результат ответа и на основе полученного содержимого рисунков, вставляет в соответствующей контейнер тэги IMG;
      • Ну а третья собственно производит перемотку слайдов в зависимости от того, какая кнопка нажата.
  • Подключите HTML Веб-ресурсы, созданный ранее, к форме и задайте для него такие параметры:
    • Скройте метку;
    • Разрешите скрипты;
    • Один столбец, 8 строк;
    • Никакой прокрутке и границы.
  • Приаттачьте к форме какой-либо записи рисунки в формате PNG, размером 358 x 220 и добавьте к их имени префикс «p_»;
  • Обновляем форму и идем играться… 🙂




Комментарии (22)
  • Родион 06.02.2012

    хм..не по теме тут напишу.
    возможно же сделать так что crm будет рассылать письма только пользователям если на них назначаются любые действия. они назначили сами на себя, или назначили на них другие пользователи?)

  • slivka_83 06.02.2012

    мягко говоря не понял задачу 🙂

  • Родион 06.02.2012

    рассылка электронных писем при назначении действия пользователю.
    пользователь стал ответственным — ему приходит на почту письмо об этом 🙂
    вот такая задача)

  • slivka_83 06.02.2012

    ну это просто 🙂 вешаете бизнес-процесс на создание записи или изменение поля Ответственный. И делаете шаг рассылки писем на ответственного 🙂

  • Родион 06.02.2012

    а у меня вместо картинок просто код слайдшоу выводит и никаких картинок) крепил к продуктам.

  • slivka_83 06.02.2012

    А Вы все в точности как описано выполнили?

  • Родион 06.02.2012

    да все по инструкции.
    пересматривал пару раз еще.
    может контактируем с новым ролапом как-то* или с воркплэйсом? ну то что персональная стена.

  • Родион 06.02.2012

    конфликтует всмысле)

  • slivka_83 06.02.2012

    Картинки подгружены? Название у них «правильные»?

  • Родион 06.02.2012

    да, сейчас 2 картинки пнг подгружены, с правильным префиксом, но отображет просто скрипт текстом.

  • slivka_83 06.02.2012

    Вы HTML Веб-ресурс сделали? 🙂

  • Родион 06.02.2012

    да, если дословно тип веб-ресурса «веб-страница (html)»

  • slivka_83 06.02.2012

    Тогда я не понимаю, что у Вас происходит. Скрин покажите плиз.

  • slivka_83 06.02.2012

    Мистика какая то 🙂
    У меня тут два предполжения:
    1. Вы поставили галку ограничивающую использование скриптов в настройках веб-рсурса.
    2. В браузере как то ограничено использование iFrame’ов

    У Вас другие HTML Веб-рсурсы отображаются нормально?

  • Родион 06.02.2012

    да нормально:)\
    будет разбираться..(

  • Сергейё 06.02.2012

    Странно почему то не выводятся аттачи.
    проблема началась с того, что при указании в коде странички папки «/webresources» — вело совсем не туда куда нужно (в том числе и по поводу js). Убрал в html страничке упоминание в тегах img для стрелок и в теге script для скриптов. как итог стрелки появились. А вот аттачи так и не видать. Вместо них просто пустое место. В чем может быть проблема?

  • Sobsoft 06.02.2012

    Подскажите пожалуйста. Если у меня другая сущность с именем new_sushnost1 какими параметрами заполнить строку:
    var oDataRequest = b.Xrm.Page.context.getServerUrl() + «/XRMServices/2011/OrganizationData.svc/ProductSet(guid'» + b.Xrm.Page.data.entity.getId().substr(1, 36) + «‘)/Product_Annotation?$select=DocumentBody&filter=startswith(FileName,’p_’)»;

    я так понимаю ProductSet будет new_sushnost1Set, а Product_Annotation будет new_sushnosth1_Annotation ????

  • slivka_83 06.02.2012

    >Сергейё

    Посмотрите через DevToolBar сгенерированный HTML-код — там рисунки добавились?

    > Sobsoft
    Set Вы вроде указали правильно, а вот как называется связь с примечаниями посмотрите в свойствах объекта (в связях).

  • Sobsoft 06.02.2012

    slivka_83, я использовал решение crm odata query designer (http://crm2011odatatool.codeplex.com/), но он таки не вывел сами рисунки как бы я не старался писать запросы. сначала делал через встроенный мастер — он вывел через RSS (ну мне он таким показался) 2 из 2 записи (по имени) но естественно без рисунков. Потом я пытался выполнять запросы на основе кода автора поста. Последнее во первых выдавало в проверке валидности Unsuccessful, а при просмотре в браузере была страничка без никто. Мистика какая то. А кстати я в 5-м CRM это делаю — это как-то влияет?

  • slivka_83 06.02.2012

    я не уверен что crm2011odatatool сможет разобрать этот запрос, т.к. эта тулзень использует несколько другой формат построения запросов. Так что лучще проверять в браузере.
    Если по 5 CRM Вы имели ввиду 2011, то все правильно.

  • Sobsoft 06.02.2012

    да я чет плюнул на это решение и поставил это (http://mscrmblogger.com/2012/03/31/imagebrowser-webresource/). всё работает. единственное там вылезает ошибка 400 бед реквест при создании новой записи, а остальное рабоотает как надо

*

code