Слайд шоу
Карусель, карусель начинает рассказ.
Это сказки, песни и веселье!
Карусель, карусель — это радость для нас,
Прокатись на нашей карусели!
Сейчас прикрутим к CRM фичу известную «в этих Ваших Интернетах» как слайд шоу, карусель или ротатор контента. В чем суть:
- К карточке CRM приаттачиваются PNG рисунки с определенным префиксом (в данном примере «p_»);
- Далее эти рисунки тянутся на форму объекта (в данном примере это Продукт) при ее открытии и располагаются в специальной области (но виден будет только один из них);
- Ну и пользователи просматривают слайд шоу из рисунков, щелкая по стрелкам влево и вправо.
Итак, поехали…
- Создайте в CRM следующие Веб-ресурсы:
- JS:
- PNG:
- 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_»;
- Обновляем форму и идем играться… 🙂
хм..не по теме тут напишу.
возможно же сделать так что crm будет рассылать письма только пользователям если на них назначаются любые действия. они назначили сами на себя, или назначили на них другие пользователи?)
мягко говоря не понял задачу 🙂
рассылка электронных писем при назначении действия пользователю.
пользователь стал ответственным — ему приходит на почту письмо об этом 🙂
вот такая задача)
ну это просто 🙂 вешаете бизнес-процесс на создание записи или изменение поля Ответственный. И делаете шаг рассылки писем на ответственного 🙂
а у меня вместо картинок просто код слайдшоу выводит и никаких картинок) крепил к продуктам.
А Вы все в точности как описано выполнили?
да все по инструкции.
пересматривал пару раз еще.
может контактируем с новым ролапом как-то* или с воркплэйсом? ну то что персональная стена.
конфликтует всмысле)
Картинки подгружены? Название у них «правильные»?
да, сейчас 2 картинки пнг подгружены, с правильным префиксом, но отображет просто скрипт текстом.
Вы HTML Веб-ресурс сделали? 🙂
да, если дословно тип веб-ресурса «веб-страница (html)»
Тогда я не понимаю, что у Вас происходит. Скрин покажите плиз.
http://s017.radikal.ru/i444/1206/23/ec8e5cd47567.jpg
Мистика какая то 🙂
У меня тут два предполжения:
1. Вы поставили галку ограничивающую использование скриптов в настройках веб-рсурса.
2. В браузере как то ограничено использование iFrame’ов
У Вас другие HTML Веб-рсурсы отображаются нормально?
да нормально:)\
будет разбираться..(
Странно почему то не выводятся аттачи.
проблема началась с того, что при указании в коде странички папки «/webresources» — вело совсем не туда куда нужно (в том числе и по поводу js). Убрал в html страничке упоминание в тегах img для стрелок и в теге script для скриптов. как итог стрелки появились. А вот аттачи так и не видать. Вместо них просто пустое место. В чем может быть проблема?
Подскажите пожалуйста. Если у меня другая сущность с именем 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 ????
>Сергейё
Посмотрите через DevToolBar сгенерированный HTML-код — там рисунки добавились?
> Sobsoft
Set Вы вроде указали правильно, а вот как называется связь с примечаниями посмотрите в свойствах объекта (в связях).
slivka_83, я использовал решение crm odata query designer (http://crm2011odatatool.codeplex.com/), но он таки не вывел сами рисунки как бы я не старался писать запросы. сначала делал через встроенный мастер — он вывел через RSS (ну мне он таким показался) 2 из 2 записи (по имени) но естественно без рисунков. Потом я пытался выполнять запросы на основе кода автора поста. Последнее во первых выдавало в проверке валидности Unsuccessful, а при просмотре в браузере была страничка без никто. Мистика какая то. А кстати я в 5-м CRM это делаю — это как-то влияет?
я не уверен что crm2011odatatool сможет разобрать этот запрос, т.к. эта тулзень использует несколько другой формат построения запросов. Так что лучще проверять в браузере.
Если по 5 CRM Вы имели ввиду 2011, то все правильно.
да я чет плюнул на это решение и поставил это (http://mscrmblogger.com/2012/03/31/imagebrowser-webresource/). всё работает. единственное там вылезает ошибка 400 бед реквест при создании новой записи, а остальное рабоотает как надо