Кастомизация
19
Окт
9

Индикатор количества заполненных полей

Маленький фокус, позволяющий представить пользователю визуальный индекатор заполненности каких-либо полей. В данном случае будем показывать на индикаторе количество заполненных обязательных полей.

Все просто… добавьте на онлоад такой код:

// Создаем HTML-разметку визульного индекатора и добавляем ее на форму
var table = "";
table += "<table align='center' style='margin-top:5px;'>";
table +=    "<tr>";
table +=        "<td id='fill' style='width:16px;text-align:center;font-weight:bold;color:#15428b;'>0</td>";
table +=        "<td style='width:100px;padding:2px;background-color:#FF0000;'>";
table +=            "<div id='bar' style='width:0px;background-color:#7CFC00;' />";
table +=        "</td>";
table +=        "<td id='total' style='width:16px;text-align:center;font-weight:bold;color:#15428b;'>0</td>";
table +=    "</tr>";
table += "</table>";
 
var li = document.createElement('LI');
li.innerHTML = table;
document.getElementById("crmNavBar").firstChild.appendChild(li);

// Перечисляем поля которые будем просматривать на заполненность
fields = ['name', 'ownerid', 'accountnumber', 'customertypecode', 'industrycode'];

GetPercentComplete = function() {
    var percentComplete;
    var totalFilledField = 0; // Счетчик числа заполненых полей (снчала равен нулю)

    // Получаем число подсчитываемых полей
    var totalField = fields.length;

    // Подсчитываем количество заполненных обязательных полей
    for (var f in fields)
        if (eval("crmForm.all." + fields[f] + ".DataValue") != null)
            totalFilledField++;
    
    // Вычисляем процент заполненности полей
    if (totalFilledField == 0) {
    percentComplete = 0;
    } else {
    percentComplete = (totalFilledField / totalField) * 100;
    }
    // Изменяем длинну индикатора в соответствии с процентом заполненности
    document.getElementById("bar").style.width = percentComplete + "px";

    // Изменяем числовое отображение количества заполненных полей
    document.getElementById("fill").innerText = totalFilledField;
    document.getElementById("total").innerText = totalField;
}
GetPercentComplete(); // Вызываем функцию GetPercentComplete на онлоаде

// Добавляем к событию изменения подсчитываемых полей вызов функции GetPercentComplete
for (var f in fields) {
    var x = eval("crmForm.all." + fields[f]);
    x.attachEvent("onchange", GetPercentComplete);
}

Этот код делает четыре основные вещи:

  • Создает HTML-разметку самого индикатора;
  • Затем идет перечисление полей (в массиве), заполненность которых бедем подсчитывать (измените этот набор, в соответствии с Вашими потребностями);
  • Далее объявляетяс глобальная функция, которая собственно и занимается подсчетом заполненности полей, перечисленных в массиве. А после подсчета изменяет зеленую полоску индикатора, в соответствии с процентом заполненности полей;
  • Ну, и последнее: ко всем полям, перечисленным в массиве, добавляем на событие изменения вызов функции GetPercentComplete.

Собственно на этом все 🙂 Публикуем форму и идем смотреть 🙂


CRM 2011

Немного подправленный код для работы с CRM 2011. Создаете Веб-ресурс с таким кодом:

if (typeof (SDK) == "undefined")
{ SDK = {}; }
SDK.Functions = {
    Start: function (sourceFields) {
        // Базовая урла
        //var b = document.getElementById("contentIFrame").contentWindow;

        // Создаем HTML-разметку визульного индекатора и добавляем ее на форму
        var table = "";
        table += "<table>";
        table += "<tr>";
        table += "<td id='fill' style='width:16px;text-align:center;font-weight:bold;color:#15428b;'>0</td>";
        table += "<td style='width:118px;padding:2px;background-color:#FF0000;'>";
        table += "<div id='bar' style='width:0px;background-color:#7CFC00;' />";
        table += "</td>";
        table += "<td id='total' style='width:16px;text-align:center;font-weight:bold;color:#15428b;'>0</td>";
        table += "</tr>";
        table += "</table>";

        // Заменяем надпись "Связанные" на индикатор
        document.getElementById("crmNavBar").firstChild.childNodes[1].firstChild.innerHTML = table;

        // Перечисляем поля которые будем просматривать на заполненность
        //fields = ['firstname', 'lastname'];
        var fields = sourceFields.split(",");

        this.Recalculate(fields);
        
        for (var f in fields) {
            eval("Xrm.Page.data.entity.attributes.get('" + fields[f] + "').addOnChange(function () { SDK.Functions.Recalculate(fields) })");
        }
        
    },
    Recalculate: function (fields) {
        var percentComplete;
        var totalFilledField = 0; // Счетчик числа заполненых полей (снчала равен нулю)

        // Получаем число подсчитываемых полей
        var totalField = fields.length;

        // Подсчитываем количество заполненных обязательных полей
        for (var f in fields)
            if (eval("Xrm.Page.data.entity.attributes.get('" + fields[f] + "').getValue()") != null)
                totalFilledField++;

        // Вычисляем процент заполненности полей
        if (totalFilledField == 0) {
            percentComplete = 0;
        } else {
            percentComplete = (totalFilledField / totalField) * 118;
        }
        // Изменяем длинну индикатора в соответствии с процентом заполненности
        document.getElementById("bar").style.width = percentComplete + "px";

        // Изменяем числовое отображение количества заполненных полей
        document.getElementById("fill").innerText = totalFilledField;
        document.getElementById("total").innerText = totalField;
    }
};

Добавляете созданный Веб-ресурс на нужную форму и вызываете функцию:

SDK.Functions.Start

при этом передаете ей один в качестве параметра поля, которые нужно отслеживать. Поля должны быть разделены запятыми и все это обрамлено кавычками. Нанпример так:

'firstname,lastname'
Комментарии (9)
  • Азат 19.10.2010

    При наличии в форме динамического пиклиста, созданного с помощь Demonstration tools, данный код работает некорректно, из-за Array.prototype.Contains на онлоаде формы.

    1. Изменил перебор свойств For
    2. Убрал var_totalField_=_fields.length; из функции, ибо это достаточно сделать на онлоаде
    3. Убрал мелкие шероховатости (; в разметке визуального индикатора и лишние {})

    Вот код, который работает у меня:

    // Создаем HTML-разметку визульного индекатора и добавляем ее на форму
    var table = "";
    table += "<table align='center' style='margin-top:5px'>";
    table +=    "<tr>";
    table +=        "<td id='fill' style='width:16px;text-align:center;font-weight:bold;color:#15428b'>0</td>";
    table +=        "<td style='width:100px;padding:2px;background-color:#FF0000'>";
    table +=            "<div id='bar' style='width:0px;background-color:#7CFC00' />";
    table +=        "</td>";
    table +=        "<td id='total' style='width:16px;text-align:center;font-weight:bold;color:#15428b'>0</td>";
    table +=    "</tr>";
    table += "</table>";
    var li = document.createElement('LI');
    li.innerHTML = table;
    document.getElementById("crmNavBar").firstChild.appendChild(li);
    // Перечисляем поля которые будем просматривать на заполненность
    fields = ['field1', 'field2', 'field3'];
    var totalField = fields.length;
    GetPercentComplete = function()
    {
        var percentComplete = 0;
        var totalFilledField = 0;
        // Подсчитываем количество заполненных полей
        for (var f = 0; f < totalField; f++) if (eval("crmForm.all." + fields[f] + ".DataValue") != null) totalFilledField++;
        // Вычисляем процент заполненности полей
        if (totalFilledField == 0) percentComplete = 0;
        else percentComplete = (totalFilledField / totalField) * 100;
        // Изменяем длинну индикатора в соответствии с процентом заполненности
        document.getElementById("bar").style.width = percentComplete + "px";
        // Изменяем числовое отображение количества заполненных полей
        document.getElementById("fill").innerText = totalFilledField;
        document.getElementById("total").innerText = totalField;
    }
    // Вызываем функцию GetPercentComplete на онлоаде
    GetPercentComplete();
    // Добавляем к событию изменения подсчитываемых полей вызов функции GetPercentComplete
    for (var f = 0; f < totalField; f++)
    {
        var x = eval("crmForm.all." + fields[f]);
        x.attachEvent("onchange", GetPercentComplete);
    }
    
  • lu 19.10.2010

    Добрый вечер,
    а на 2011 CRM нет аналогичного кода случайно? 🙂

  • slivka_83 19.10.2010

    Здарсьте 🙂

    Вроде специально для 2011 нету, но переделать я думаю не сложно 🙂

  • lu 19.10.2010

    поможете?:)

  • slivka_83 19.10.2010

    «Позвоните» где-нибудь через недельку 🙂 попробую написать 🙂

  • lu 19.10.2010

    «Звоню» Вам чуть больше, чем через недельку 🙂
    Ну что, можно надеяться на Вашу помощь? 🙂

  • slivka_83 19.10.2010

    Код в конце статьи 🙂

  • Lu 19.10.2010

    Офигенно! Спасибо!!! 🙂
    Не подскажете, как можно считывать результат в отдельное новое поле, и это поле вставлять в отчет? 🙂

  • slivka_83 19.10.2010

    ну, в чтобы записывать результат в поле гнужно заменить код:

    document.getElementById("bar").style.width = percentComplete + "px";  
    // Изменяем числовое отображение количества заполненных полей  
    document.getElementById("fill").innerText = totalFilledField;  
    document.getElementById("total").innerText = totalField;  
    

    на тоn (или написать под ним), который будет записывать значение переменной totalFilledField в нужное Вам поле (примеров кода полнов SDK).

*

code