Кастомизация
27
Май
2

iFrame вместо/вместе с Помошником форм

В одном из видео/скриншотов MS CRM 5 видел такую функциональность: графики на месте расположения Помошника форм (будут ли они вместо него или будут существовать параллельно – не знаю 🙂 ). И хотя (по слухам 🙂 ) данная функциональность будет реализована не средствами Reporting Services, в текущей версии MS CRM можно реализовать нечто подобное. Но конечно же придется задействовать Reporting Services!

Вариант #1: аскетичный

Самая простая реализация заключается в размещении на правой стороне формы простого iFrame’а (конечно же через взламываение DOM’а 🙂 ). Поместите на форме какого-либо объекта такой код (отключите только Помошника форм для нее, если он включен):

// Ширина iFrame'а
var wth = 250;

// Задаем тег iFrame'а
var html ="<iframe id='myFrame' src='' width='" + wth + "' height='100%' frameborder='0' style ='border: #898c95 1px solid' />";

// Создаем ячейку таблицы в которую помещаем iFrame
var td = document.createElement('<TD class="RelatedInformationPane" id="tdRelatedInformationPane" style="padding-left: 0px">');
td.innerHTML = html;

// Добавляем панель на страницу
var base = document.getElementById('areaForm').childNodes[0].childNodes[0].childNodes[0];
base.appendChild(td);

// Задаем URL для iFrame'а
document.getElementById('myFrame').src = "http://google.ru";

Два параметра которые Вы можете тут задать: ширина iFrame’а (в пикселях) и его содержимое.


Вариант #1: гламурный

Этот вариант куда лицеприятнее, т.к. полностью повторяет внешний облик Помошника форм и часть его функциональности – сворачивание панели 🙂 А в остальном этот тот же старый добрый iFrame 🙂 Шаги:

  • Скачайте файл relatedinformationX.css и поместите в папку ISV сайта CRM;
  • На онлоад нужной формы вешаем код:
    // Функция ответственная за скрытие панели
    hideshowPan = function(button) {
    	if(document.getElementById('myFrame').style.display == "none") {
    		button.src = "/_imgs/collapse_righthover.gif";
    		document.getElementById('tdRelatedInformationPane').style.width = 200;
    		document.getElementById('RelatedInformationPane').style.width = "100%";
    		document.getElementById('InformationAreaTitle').style.display = "block";
    		document.getElementById('myFrame').style.display = "block";
    	} else {
    		button.src = "/_imgs/collapse_lefthover.gif";
    		document.getElementById('tdRelatedInformationPane').style.width = 27;
    		document.getElementById('RelatedInformationPane').style.width = 0;
    		document.getElementById('InformationAreaTitle').style.display = "none";
    		document.getElementById('myFrame').style.display = "none";
    	};
    };
    
    // Функция управляет подсветкой кнопки при наведение мыши
    onMOver = function(button) {
    	if (document.getElementById('myFrame').style.display == "none") {
    		button.src = '/_imgs/collapse_lefthover.gif';
    	} else {
    		button.src = '/_imgs/collapse_righthover.gif';
    	};
    };
    
    // Функция управляет подсветкой кнопки при потере фокуса
    omMOut = function(button) {
    	if (document.getElementById('myFrame').style.display == "none") {
    		button.src = '/_imgs/collapse_left.gif';
    	} else {
    		button.src = '/_imgs/collapse_right.gif';
    	};
    };
    
    // Присоединяем к текущей странице CSS файл
    var cssStyle = document.createElement('link');
    cssStyle.type = "text/css";
    cssStyle.href = "http://win-n22hj23d1b1/ISV/relatedinformationX.css";
    cssStyle.rel = "stylesheet";
    var heads = document.getElementsByTagName('HEAD');
    heads[0].appendChild(cssStyle);
    
    var titlePan = "Гугла"; // Заголовок панели
    
    // Формируем код самой панели
    var html = "";
    html += "<div id='RelatedInformationPane' class='RelatedInformationPane'>";
    html +=		"<table cellspacing='0' cellpadding='0' width='100%' height='100%'><tbody>";
    html +=			"<tr class='RelatedInformationHeaderRow'>";
    html +=				"<td>";
    html +=					"<table cellspacing='0' cellpadding='0' width='100%' height='100%'><colgroup><col><col width='18'><tbody>";
    html +=						"<tr class='AreaHeading'>";
    html +=							"<td>";
    html +=								"<div style='display: block' class='AreaHeading' id='InformationAreaTitle'>";
    html +=									"<table cellspacing='0' cellpadding='0' width='100%' height='100%'>";
    html +=										"<tbody><tr><td class='RelatedInformationTitle'>" + titlePan + "</td></tr></tbody>";
    html +=									"</table>";
    html +=								"</div>";
    html +=							"</td>";
    html +=							"<td>";
    html +=								"<img id='ShowHideImage' class='Heading' alt='Скрыть/показать' src='/_imgs/collapse_right.gif' onClick='hideshowPan(this)' onmouseover='onMOver(this)' onmouseout='omMOut(this)'>";
    html +=							"</td>";
    html +=						"</tr></tbody>";
    html +=					"</table>";
    html +=				"</td>";
    html +=			"</tr>";
    html +=			"<tr>";
    html +=				"<td class='RelatedInformationDataArea'>";
    html +=					"<div style='display: block' id='InformationContents' class='InformationContents'>";
    html +=						"<iframe id='myFrame' class='specIFrame' src='' width='100%' height='100%' frameborder='0' style='border: #898c95 1px solid' />";
    html +=					"</div>";
    html +=				"</td>";
    html +=			"</tr></tbody>";
    html +=		"</table>";
    html += "</div>";
    
    // Создаем ячейку таблицы в которую помещаем панель
    var td = document.createElement('<TD class="RelatedInformationPane" id="tdRelatedInformationPane" style="padding-left: 0px">');
    td.innerHTML = html;
    
    // Добавляем панель на страницу
    var base = document.getElementById('areaForm').childNodes[0].childNodes[0].childNodes[0];
    base.appendChild(td);
    
    // Задаем URL для iFrame'а
    document.getElementById('myFrame').src = "http://google.ru";
    
  • В данном коде Вы можете также задать два параметра: заголовок Помошника форм и содержимое iFrame’а;
  • Смотрим 🙂



З.Ы. Как Вы заметили ни в первом ни во втором варианте нет никаких графиков (мы просто в iFrame подсовываем Google) 🙂 Для того чтобы они появились читаем статью Использование диаграмм на формах MS CRM.

Комментарии (2)
  • Dmitry 27.05.2010

    приветствую!

    пытаюсь модифицировать стандартный помощник (форма электронная почта)
    в большинстве случаев в помощнике присутствует элемент дальнейшее действие, однако в некоторых загадочных ситуациях его нет.
    собственно пытаюсь добавить необходимый мне пункт вручную 😉

    var html = «»;
    html += «»;
    html += «<option id='regardingobjectid_context' title='В отношении' value='regardingobjectid'";
    html += "contextxml='1310420200000000-0000-0000-0000-000000000000mainCategory_LookupCategoryData_LookupПоиск в записях20123411210101084108810904402440647001002610027100341003610041100701007310078100791008410106CategoryTipsCategoryDataСоветы100Выберите запись, к которой относится электронная почта.regardingobjectidregardingobjectidВ отношении1160′»;
    html += «controlid=’regardingobjectid’>В отношении»;
    html += «<option id='followup_context' title='Дальнейшие действия' value='followup' contextxml='1310420200000000-0000-0000-0000-000000000000mainFollowUpCategoryCategoryData_FollowUpСоздать дальнейшее действие104212CategoryTipsCategoryDataСоветы100При выборе дальнейшего действия оно автоматически связывается с открытой записью или действием.followupДальнейшие действия99999′>»;
    html += «Дальнейшие действия»;
    html += «»;

    var base = document.getElementById(‘ContextSelect’);
    base.outerHTML = html;

    но после добавления он не находит функцию RelatedInformationPane.LoadContextData();

    в чем может быть проблема?

  • slivka_83 27.05.2010

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

    var objSel = document.getElementById("mySelect");
    
    //Создаем новый объект Option и заносим его в коллекцию options
    objSel.options[0] = new Option("Строка списка 0", "str0");
    objSel.options[1] = new Option("Строка списка 1", "str1");
    objSel.options[2] = new Option("Строка списка 2", "str2");
    

*

code