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

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

Поехали:

• Создайте в CRM из следующих рисунков PNG Веб-ресурсы (с аналогичными именами):
• circle_grey.png
• circle_blue.png
• circle_green.png
• circle_yellow.png
• circle_orange.png
• circle_red.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.

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