Кастомизация
21
Авг
2

Мини-светофор

Продолжаем светофорную «серию». Создадим еще один цветовой индикатор и на этот раз разместим его рядом в полем (пиклиста в данном случае), в зависимости от которого и будет меняться цвет. В целом все шаги аналогичны предыдущему постом, отличаются только 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.

Идем играться…




Комментарии (2)
  • Atnilishe 21.08.2012

    в CRM2011 для получения необходимого родительского контрола пришлось пойти немного глубже:
    var parentObject = document.getElementById(elementName).parentNode.parentNode.parentNode.parentNode.parentNode;

  • Atnilishe 21.08.2012

    Возможно по причине того что я вешал светофор к LookUp полю

*

code