Мини-светофор
Продолжаем светофорную «серию». Создадим еще один цветовой индикатор и на этот раз разместим его рядом в полем (пиклиста в данном случае), в зависимости от которого и будет меняться цвет. В целом все шаги аналогичны предыдущему постом, отличаются только JS-код и рисунки.
Поехали:
- Создайте в CRM из следующих рисунков PNG Веб-ресурсы (с аналогичными именами):
- Добавьте в нужный объект пиклист с именем new_importance и следующими значениями:
- 100000000 — Синий
- 100000001 — Зеленый
- 100000002 — Желтый
- 100000003 — Оранжевый
- 100000004 – Красный
Разместите пиклист на форме объекта;
- Создайте JS Веб-ресурс с таким кодом:
// Меняем цвет кружка function circle_build() { // Определяем начальный цвет кружка colorCircle = circle_color(); // Получаем родительский DIV элемент поля var parentObject = document.getElementById("new_importance").parentNode; // Создаем HTML-таблицу с одной строкой var myTable = document.createElement("Table"); myTable.setAttribute('width', '100%'); myTable.setAttribute('cellSpacing', '0'); myTable.setAttribute('cellPadding', '0'); var myRow = myTable.insertRow(0); // Создаем первую ячейку таблицы для хранения кружка var firstCell = myRow.insertCell(0); firstCell.style.width = 18; firstCell.style.paddingRight = 3; // Создаем кружок и помещаем его в первую ячейку var newIMG = document.createElement("img"); newIMG.setAttribute('src', Xrm.Page.context.getServerUrl() + '/WebResources/new_circle_' + circle_color()); newIMG.setAttribute('id', 'circle'); firstCell.appendChild(newIMG); // Создаем вторую ячейку для хранения исходного поля var secondCell = myRow.insertCell(1); secondCell.style.width = "100%"; // Помещаем исходное поле во вторую ячейку for (var i = 0; i < parentObject.childNodes.length; i++) { var myChild = parentObject.childNodes[i]; secondCell.appendChild(myChild); } // Добавляем таблицу в исходный DIV элемент parentObject.appendChild(myTable); // Получаем ссылку на круг для дальнейшей смены его цвета сircle = document.getElementById('circle'); } // Меняем цвет кружка function circle_change() { сircle.src = Xrm.Page.context.getServerUrl() + '/WebResources/new_circle_' + circle_color(); } // Определение цвета кружка function circle_color() { switch (Xrm.Page.getAttribute("new_importance").getValue()) { case 100000000: return 'blue'; break case 100000001: return 'green'; break case 100000002: return 'yellow'; break case 100000003: return 'orange'; break case 100000004: return 'red'; break default: return 'grey'; } }
Этот код состоит из трех функций. Первая будет вызываться на онлоаде объект и будет путем манипуляций с DOM’ом вставлять на форму (рядом с полем имя которого задается в коде) рисунок из Веб-ресурса. Вторая функция будет менять рисунок при изменении пиклиста. Ну, а третья функция – вспомогательная – она будет определять текущий цвет, выбранный в пиклисте и возвращать его в первые две функции;
- Подключите JS Веб-ресурс к форме нужного объекта. На onLoad этого же объекта повесьте вызов функции circle_build, а на событие onChange поля new_importance вызов функции circle_change.
Идем играться…
в CRM2011 для получения необходимого родительского контрола пришлось пойти немного глубже:
var parentObject = document.getElementById(elementName).parentNode.parentNode.parentNode.parentNode.parentNode;
Возможно по причине того что я вешал светофор к LookUp полю