Кастомизация
22
Янв
0

Звездный рейтинг

Днем свет божий затмевает,
Ночью землю освещает,
Месяц под косой блестит,
А во лбу звезда горит.

Сегодня сделаем такой няшный контрол для CRM, который повсеместно встречается в Интернете – оценка чего либо с помощью звездочек.
Причем сделаем два варианта этого контрола. Один будет числовым и привязан к целочисленному полю, а второй будет оперировать текстовыми значениями и будет привязан к пиклисту.

Приступим…

Целочисленный вариант

  • Создайте из следующих рисунков PNG Веб-ресурсы (с такими же именами):
  • Создайте из следующих библиотек JS Веб-ресурсы:

    Подключите их к форме объекта, на которой будет вынесен этот контрол;

  • Создайте для объекта, на который Вы хотите добавить этот контрол новый атрибут:
    • Имя: new_rateholder;
    • Тип: целое число;
    • Диапазон значений: от 0 до 5.

    Вынести это поле на форму объекта и скройте его. Это поле будет хранить выбранное ранее в контроле звезды значение (и при первоначальной прорисовке оно будет браться из этого поля);

  • Создайте HTML Веб-ресурс с именем new_rate.html и с таким кодом:
    <html>
    	<head>
    		<title>Rate</title>
    		<script src="/WebResources/new_jquery.min.js"></script>
    		<script src="/WebResources/new_jquery.raty.min.js"></script>
            <style type="text/css">
                BODY {
                    background: #f6f8fa;
                    margin: 0px;
                    padding: 2px 0px 0px 0px;
                }
            </style>
    	</head>
    	<body>
    		<div id="star" />
    		<script>
    		    var rhName = window.location.search.split("=")[1]; // Выцепляем имя поля хранящего значение из строки URL
    		    var rhField = window.parent.Xrm.Page.getAttribute(rhName); // Получаем ссылку на поле CRM
    
    		    $.fn.raty.defaults.path = '/WebResources/'; // базовый путь к иконкам
    		    $('#star').raty({
    		        hintList: ['1', '2', '3', '4', '5'],
    		        start: rhField.getValue(),
    		        starOff: 'new_star_off.png',
    		        starOn: 'new_star_on.png',
    		        cancelOff: 'new_cancel_off.png',
    		        cancelOn: 'new_cancel_on.png',
    		        cancel: true,
    		        cancelHint: 'Очистить!',
    		        click: function (score, evt) {
    		            // при клике на звезде сохраняем значение в поле CRM
    		            rhField.setValue(parseInt(score) ? parseInt(score) : null);
    		        }
    		    });
    		</script>
    	</body>
    </html>
    

    Что тут у нас есть:

    • Для начала подключаем JS библиотеки, созданные ранее (саму jQuery и плагин со звездочкой);
    • Убираем лишние отступы от BODY с помощью CSS;
    • Получаем ссылку на поле CRM, в котором хранится выбранное ранее значение;
    • Ну и собственно создаем контрол Звезды и передаем ему следующие параметры: названия иконок, диапазон значений которые соответствуют звездам, а также создаем обработчик клика на звездочке, чтобы соответствующие значение записывалось в поле CRM.
  • Вынесите Веб-ресурс new_rate.html на форму нужного объекта с такими параметрами:
    • Название: Рейтинг;
    • Поставьте галку «Показать метку на форме»;
    • Пользовательский параметр: new_rateholder (данный параметр зависит от того, какое поле Вы используете для хранения значений);
    • Снимите галку ограничивающую использование скриптов;
    • Число столбцов: 1;
    • Число строк: 1;
    • Прокрутка: никогда;
    • Снимите галку «Отображать границу».

    В итоге Веб-ресурс будет выглядеть как однострочное поле;

  • Публикуем и идем играться…




Вариант с пиклистом

Данный вариант нужен, чтобы подсказки к звездочкам брались из пиклиста, ну а при клике значения опять же сохранялись в пиклисте. Он отличается от предыдущего следующим:

  • Замените целочисленное поля для хранения выбранного значения на пиклист с пятью значениями и возможностью выбирать пустое значение. Также вынесите его на форму и скройте;
  • В HTML Веб-ресурсе с именем new_rate.html замените код на следующий:
    <html>
    	<head>
    		<title>Rate</title>
    		<script src="/WebResources/new_jquery.min.js"></script>
    		<script src="/WebResources/new_jquery.raty.min.js"></script>
            <style type="text/css">
                BODY {
                    background: #f6f8fa;
                    margin: 0px;
                    padding: 2px 0px 0px 0px;
                }
            </style>
    	</head>
    	<body>
    		<div id="star" />
    		<script>
    		    var rhName = window.location.search.split("=")[1]; // Выцепляем имя поля хранящего значение из строки URL
    
    		    var rhField = window.parent.Xrm.Page.getAttribute(rhName); // Получаем ссылку на поле CRM
    		    var curValue = rhField.getValue() ? rhField.getValue() : 0;
    
    		    var options = window.parent.Xrm.Page.ui.controls.get(rhName).getAttribute().getOptions(); // Получаем все значения пиклиста
    
    		    // Формируем список всплывающих подсказок и начальное количество выбранных звезд
    		    var hints = new Array();
    		    for (var i = 0; i < options.length; i++) {
    		        hints[i] = options[i].text;
    		        if (options[i].value == curValue) var start = i + 1;
    		    }
    
    		    $.fn.raty.defaults.path = '/WebResources/'; // базовый путь к иконкам
    		    $('#star').raty({
    		        hintList: hints,
    		        start: start,
    		        starOff: 'new_star_off.png',
    		        starOn: 'new_star_on.png',
    		        cancelOff: 'new_cancel_off.png',
    		        cancelOn: 'new_cancel_on.png',
    		        cancel: true,
    		        cancelHint: 'Очистить!',
    		        click: function (score, evt) {
    		            // При клике на звезде сохраняем значение в пиклисте CRM
    		            rhField.setValue(parseInt(score) ? options[parseInt(score) - 1].value : null);
    		        }
    		    });
    		</script>
    	</body>
    </html>
    



З.Ы. Остальные настройки этого «звездного» плагина Вы может подсмотреть здесь: http://www.wbotelhos.com/raty/

Комментарии (0)

*

code