Картинки на форме CRM, эпизод II

Желаете отобразить аватар пользователя, логотип компании или фото товара на форме CRM? Сейчас реализуем 🙂 и сделаем это двумя способами (точнее, двумя с половиной 🙂 ) и в обоих задействуем стандартный функционал CRM (и конечно же не по прямому назначению 🙂 )!

Вариант #1.1

В первом воспользуемся частью объекта Электронная почта, а точнее одной из его JavaScript-функций. Когда Вы отправляете электронную почту с добавленным изображением из outlook-клиента, CRM сохраняет этот рисунок как вложение и достает его в тело письма так:

<IMG id=Picture_x0020_1 alt=image001.png src="/MicrosoftCRM/Activities/Attachment/download.aspx?AttachmentType=1001&AttachmentId=4108f5f9-63f7-dd11-b2e0-0003ff2d0264" width=978 height=630>

Заменив тип объекта с Электронной почты (1001) на объект Примечание (код 5) Вы сможете подгрузить вложенную в примичание картинку (да и не только картинку). Например:

<IMG src="/MicrosoftCRM/Activities/Attachment/download.aspx?AttachmentType=5&AttachmentId=D02BFFF3-EFF1-DD11-A6A4-0003FF2D0264">

Теперь реализуем:

• Добавьте новую вкладку на форму CRM;
• В эту вклдку поместите iFrame (именно в нем будем показывать рисунок);
• На онлоад повесьте такой код (поменяйте в нем только номер вкладки на которой расположе iFrame)

  var iFrame = crmForm.all.IFRAME_logo;
  
  // поменяйте номер вкладки на Ваш (счет начинается слева, с нуля)
  var tabVar= crmForm.all.tab4Tab;
   
  if(typeof(tabVar) != "undefined" && tabVar != null) {
  	// здесь тоже замените номер вкладки
  	crmForm.all.tab4Tab.attachEvent('onclick',loadlogo, false);
  
  } 
  
  function loadlogo() {
  
  // проверяем что у объекта есть id - т.к. у не сохраненных записей не может быть вложений
  if (crmForm.ObjectId != null) {
  
      var authenticationHeader = GenerateAuthenticationHeader();
  
  	// Создаем SOAP запрос чтобы вытащить айдишник прикрепленного файла
      var xml = "<?xml version='1.0' encoding='utf-8'?>"+ 
      "<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'"+
      " xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'"+
      " xmlns:xsd='http://www.w3.org/2001/XMLSchema'>"+ 
      authenticationHeader+ 
      "<soap:Body>"+ 
      "<Fetch xmlns='http://schemas.microsoft.com/crm/2007/WebServices'>"+ 
      "<fetchXml>&lt;fetch count='1' mapping='logical'&gt;&lt;entity name='annotation'&gt;&lt;attribute name='annotationid'/&gt;&lt;order attribute='createdon' descending='true'/&gt;&lt;filter type='and'&gt;&lt;condition attribute='objectid' operator='eq' value='" + crmForm.ObjectId + "'/&gt;&lt;/filter&gt;&lt;filter type='and'&gt;&lt;condition attribute='filename' operator='like' value='logo%'/&gt;&lt;/filter&gt;&lt;/entity&gt;&lt;/fetch&gt;</fetchXml>"+ 
      "</Fetch>"+ 
      "</soap:Body>"+ 
      "</soap:Envelope>";
  
  
      var xHReq = new ActiveXObject("Msxml2.XMLHTTP");
      xHReq.Open("POST", "/mscrmservices/2007/CrmService.asmx", false);
      xHReq.setRequestHeader("SOAPAction","http://schemas.microsoft.com/crm/2007/WebServices/Fetch");
      xHReq.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
      xHReq.setRequestHeader("Content-Length", xml.length);
      xHReq.send(xml);
  
  
      var resultXml = xHReq.responseXML;
      var errorCount = resultXml.selectNodes('//error').length;
      
      if (errorCount != 0) {
  		var msg = resultXml.selectSingleNode('//description').nodeTypedValue;
  		alert(msg);
      } else {
  		resultSet = new String();
  		resultSet = resultXml.text;
  		resultSet.replace('&lt;','<');
  		resultSet.replace('&gt;','>');
  		var oXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  		oXmlDoc.async = false; 
  		oXmlDoc.loadXML(resultSet);
  
  		// Выцепляем нужную на запись из результата SOAP запроса
          var results = oXmlDoc.getElementsByTagName('result');
          var annotationid = results[0].selectSingleNode('./annotationid').nodeTypedValue;
          
          // ждем пока наш целевой iframe загрузится
  		iFrame.onreadystatechange = function() { 
  
  			if( iFrame.readyState == "complete" && annotationid != null) {
  
                  // поменяйте название айфрема если оно у Вас отличается
                  var iframeDoc = document.all.IFRAME_logo.contentWindow.document;
                  var image = iframeDoc.createElement('img');
                  image.src = prependOrgName("/Activities/Attachment/download.aspx?AttachmentType=5&AttachmentId=") + annotationid;
                  iframeDoc.body.appendChild(image);
  
  			}
  
  		}
  
  	}
      
  }
  
  }
  

Пробуем:

1. Создайте новую запись Вашего объекта
2. Прикрепите к нему вложенный рисунок, который обязательно начинается с «logo»
3. Перейдите на вкладку с нашим айфреймом.

Разбор полетов:

Сначала мы отслеживаем событие щелчка вкладке с айфреймом и если он произошел вызываем функцию loadlogo()
После чего на нужно с помощью SOAP запроса узнать гуид вложенного рисунка (начинающегося с «logo»). Для этого формируем fetch-запрос к объекту annotation в котором и хранятся примечания:

<fetch count='1' mapping='logical'>
	<entity name='annotation'>
		<attribute name='annotationid'/>
		<order attribute='createdon' descending='true'/>
		<filter type='and'>
			<condition attribute='objectid' operator='eq' value='{D52FE65F-F27C-DE11-8B60-005056B56C76}'/>
		</filter>
		<filter type='and'>
			<condition attribute='filename' operator='like' value='logo%'/>
		</filter>
	</entity>
</fetch>

Этот запрос отбирает одну запись из всех annotation, у которой имя файла начинается с «logo», objectid равняется гуиду текущей записи и которая была добавлена последней (таким образом Вы можете добавлять сколько угодно рисунков в примечания, которые начинаются с «logo», но будет возвращен всегда последний)!

Ну в конце, если SOAP запрос вернул нам гуид вложенного рисунка, и мы загружаем этот рисунок в iFrame.

Вариант #1.2

Этот выриант на 80% повторяет предыдущий, но отличается одним маленьким нюансом! Вот его код:

var iFrame = crmForm.all.IFRAME_logo;

// поменяйте номер вкладки на Ваш (счет начинается слева, с нуля)
var tabVar= crmForm.all.tab3Tab;
 
if(typeof(tabVar) != "undefined" && tabVar != null) {
	// здесь тоже замените номер вкладки
	crmForm.all.tab3Tab.attachEvent('onclick',loadlogo, false);
} 

function loadlogo() {

if (crmForm.ObjectId != null) {

    var authenticationHeader = GenerateAuthenticationHeader();

	// Создаем SOAP запрос чтобы вытащить айдишник прикрепленного файла
    var xml = "<?xml version='1.0' encoding='utf-8'?>"+ 
    "<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'"+
    " xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'"+
    " xmlns:xsd='http://www.w3.org/2001/XMLSchema'>"+ 
    authenticationHeader+ 
    "<soap:Body>"+ 
    "<Fetch xmlns='http://schemas.microsoft.com/crm/2007/WebServices'>"+ 
    "<fetchXml>&lt;fetch count='1' mapping='logical'&gt;&lt;entity name='annotation'&gt;&lt;attribute name='annotationid'/&gt;&lt;order attribute='createdon' descending='true'/&gt;&lt;filter type='and'&gt;&lt;condition attribute='objectid' operator='eq' value='" + crmForm.ObjectId + "'/&gt;&lt;/filter&gt;&lt;filter type='and'&gt;&lt;condition attribute='filename' operator='like' value='logo%'/&gt;&lt;/filter&gt;&lt;/entity&gt;&lt;/fetch&gt;</fetchXml>"+ 
    "</Fetch>"+ 
    "</soap:Body>"+ 
    "</soap:Envelope>";


    var xHReq = new ActiveXObject("Msxml2.XMLHTTP");
    xHReq.Open("POST", "/mscrmservices/2007/CrmService.asmx", false);
    xHReq.setRequestHeader("SOAPAction","http://schemas.microsoft.com/crm/2007/WebServices/Fetch");
    xHReq.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
    xHReq.setRequestHeader("Content-Length", xml.length);
    xHReq.send(xml);


    var resultXml = xHReq.responseXML;
    var errorCount = resultXml.selectNodes('//error').length;
    
    if (errorCount != 0) {
		var msg = resultXml.selectSingleNode('//description').nodeTypedValue;
		alert(msg);
    } else {
		resultSet = new String();
		resultSet = resultXml.text;
		resultSet.replace('&lt;','<');
		resultSet.replace('&gt;','>');
		var oXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		oXmlDoc.async = false; 
		oXmlDoc.loadXML(resultSet);

		// Выцепляем нужную на запись из результата SOAP запроса
        var results = oXmlDoc.getElementsByTagName('result');
        var annotationid = results[0].selectSingleNode('./annotationid').nodeTypedValue;
        
		iFrame.onreadystatechange = function() { 

			if( iFrame.readyState == "complete" && annotationid != null) {

				// поменяйте название айфрема если оно у Вас отличается
				var frame = document.getElementById("IFRAME_logo");
				var doc = frame.contentDocument; 

				var page; 
				page = "<html><head>";
				page += "<style type='text/css'>"; 
				page += "BODY { background-color: #b08a21;}"; 
				page += "</style>"; 
				page += "</head><body>";
				page += "<IMG src="; 
				page += prependOrgName("/Activities/Attachment/download.aspx?AttachmentType=5&AttachmentId=") + annotationid;
				page += " />";
				page += "</body></html>";

				if (doc == undefined || doc == null) {
					doc = frame.contentWindow.document; 
					doc.open(); 
					doc.write(page);
				}

			}

		}

	}
    
}

}

Отличие заключается в подстановкие рирунка в iFrame. Здесь мы динамически формируем код HTML-документа и используя тэг IMG вставляем в него рисунок. Как Вы можете видеть я также поменял цвет фона. Подобным образом Вы можете сформировать HTML-документ с любой структурой. Можете давже вытащить все прикрепленные рисунки и изобразить их как каталог (поместив например каждый в ячейку таблицы).

Варинат #2

В предыдущих двух примерах мы использовали iFrame в качестве места расположения рисунков — что в приниципе и правильно — iFrame для этого и предназначен. Если же Вам нужно обойтись без него, например, затисать Ваш рисунок среди полей формы 🙂 Повесьте этот скрипт на онлоад фоормы Бизнес-партнеров:

var Loaded = false; 

if(crmForm.FormType == 2 || crmForm.FormType == 3 || crmForm.FormType == 4) {

	// получаем ссылку на объект notescontrol
	var oNotes = document.getElementById("notescontrol");

	// ждем окночания загрузки notecontrol и вызываем функцию LoadLogo
	oNotes.attachEvent('onreadystatechange', LoadLogo);

	// обновляем notecontrol
	oNotes.Refresh();
} 

function LoadLogo() {

	if (oNotes.readyState != 'complete') 
		return; 

	var oDoc = (oNotes.contentWindow || oNotes.contentDocument);
	if (oDoc.document) oDoc = oDoc.document;
    
	// заносим в переменную attachment все тэги SPAN (т.е. создаем массив)
	var attachments = oDoc.body.getElementsByTagName("SPAN"); 

	// перебираем массив attachment
	for (var i = 0; i < attachments.length; i++) {

		// let's be certain we have an attachment here
        // проверяем, что у тэга SPAN есть attachmentId
		if (attachments[i].attachmentId) {

			// среди всех attachments находим нужный нам рисунок
			if (attachments[i].innerHTML.match(/.*logo\.png$/i) && !Loaded) {

                // получаем ссылку на таблицу содержащую поле name
				var tr = crmForm.all.name.parentNode.parentNode.parentNode.insertRow();
				var td = tr.insertCell();
				td.align="center"
				td.colSpan=4;
				td.innerHTML = "<img src='" + attachments[i].url.concat("?AttachmentType=", attachments[i].attachmentType, "&AttachmentId=", attachments[i].attachmentId) + "'/>"
				Loaded = true;
			}
		}
	}
}

Затем прикрепите к Вашей записи бизнес-партнера рисунок logo.png. На этом все — на первую вкладку, в конец первой секции, добавится рисунок logo.png.

Как Вы поняли, здесь, с помощью метода innerHTML, мы «грубо» взломали HTML-код и добавили туда IMG-тег с нужным нам рисунком.