Кастомизация
19
Сен
10

Рисунки на форме с помощью REST

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

Начнем:

  • Подключите к CRM в качестве Веб-ресурсов библиотеку json2 (локальное зеркало). И задействуйте этот Веб-ресурс на форме Контакта;
  • Создайте Веб-ресурс с картинкой empty.png (эта картинка-пустышка будет отображаться если к форме не будет прикреплено ни одной фотографии клиента). Вынесите созданный Веб-ресурс на форму Контакта с именем «WebResource_ContactImg»;
  • Создайте JavaScript Веб-ресурс с таким кодом:
    if (typeof (MyFunctionsPack) == "undefined") { MyFunctionsPack = {}; }
    
    MyFunctionsPack.MyFunctions = {
        ShowContactImage: function () {
            if (Xrm.Page.ui.getFormType() == 1) return;
            var oDataRequest = Xrm.Page.context.getServerUrl() + "/XRMServices/2011/OrganizationData.svc/ContactSet(guid'" + Xrm.Page.data.entity.getId().substr(1, 36) + "')/Contact_Annotation?$select=DocumentBody&$filter=FileName%20eq%20'contact.png'";
    
            var retrieveReq = new XMLHttpRequest();
            retrieveReq.open("GET", oDataRequest, true);
            retrieveReq.setRequestHeader("Accept", "application/json");
            retrieveReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            retrieveReq.onreadystatechange = function () { MyFunctionsPack.MyFunctions.retrieveReqCallBack(this); };
            retrieveReq.send(null);
        },
        retrieveReqCallBack: function (retrieveReq) {
            if (retrieveReq.readyState == 4) {
                if (retrieveReq.status == 200) {
                    var entity = JSON.parse(retrieveReq.responseText).d.results;
                    if (entity != "") {
                        var fileContent = "data:image/jpg;base64," + entity[entity.length - 1].DocumentBody;
                        var img = document.getElementById("WebResource_ContactImg");
                        img.src = fileContent;
                    }
                }
            }
        }
    }
    

    Этот код делает следующее:

    • Формирует к CRM REST-запрос, который отбирает все прикрепленные к текущей записи Контакта файлы с именем «contact.png»;
    • После получения ответа, вытаскиваем из результата содержимое последней картинки (если прикреплено несколько картинок с одинаковым именем, то будет взята последняя);
    • Заменяет содержимое Веб-ресурса «WebResource_ContactImg» полученным содержимым картинки.

    Подключит этот Веб-ресурс к форме Контакта и вызовите на онлоаде функцию «MyFunctionsPack.MyFunctions.ShowContactImage».

Ну, и идем любоваться…




Комментарии (10)
  • Роман 19.09.2011

    есть вопрос

    если у контакта уже есть фото все работает и отображается

    а вот если создавать новый контакт он отображает пустышку
    но ругается

    Ошибка в изменяемом событии поля.
    Поле:window
    Событие: о п I о а d
    Ошибка:Не удалось получить значение свойства Substr:
    значением объекта является NULL или он не определен

  • slivka_83 19.09.2011

    Да, Вы правы 🙂 у новой записи еще нет GUID’а, поэтому строка
    Xrm.Page.data.entity.getId()
    не может его вернуть 🙂

    Чтобы исправить нужно после сразу после:

    ShowContactImage: function () { 
    

    повесить такой код:

    if (Xrm.Page.ui.getFormType() == 1) return;
    
  • Роман 19.09.2011

    пасибополучилосьно есть еще одна загвоздка не подскаэжите? плизкогда уже контакт сохранен без фото в примечаниито ошибка на страницеСодержимое отчетов об ошибках Microsoft Dynamics CRM 1.0 Не удалось получить значение свойства «DocumentBody»: значением объекта является NULL или он не определен 20 /%7B634589430170000000%7D/WebResources/new_ContactImg /userdefined/edit.aspx?_gridType=2&etc=2&id=%7b2ED0A7D0-AF4A-DE11-8372-00155D01E310%7d&pagemode=iframe&rskey=971479205&sitemappath=Workplace%7cMyWork%7cnav_activities Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; Tablet PC 2.0; MS-RTC LM 8) ru ru ru 1920×1200 Web 2011-12-08T16:16:38 1049 1049 1049 1049 {FA51A7B1-C7B5-4F03-A8DA-39747F316CB8} {EA97B028-2943-DE11-863F-00155D01E310} 5.0.9688.1533

  • slivka_83 19.09.2011

    Подправил код 🙂

  • IstSer 19.09.2011

    Попробовал настроить этот функционал. В итоге:
    1. Empty нормально визуализируется.
    2. После прикреплении contact.png, при загрузке формы появляется empty, затем исчезает и вместо изображения contact.png пустая рамка.

    Что я мог неправильно сделать?

  • slivka_83 19.09.2011

    Ну, я с таким не встречался — поэтому не могу сказать в чем вы ошиблись. Попробуйте повторить эти же действия (очень тщательно) на другой CRM.

  • Lovilas 19.09.2011

    IstSer | 12th Январь 2012 у меня тоже появляется пустая рамка если после загрузки картинки я добавляю еще одну заметку для контакта.

  • OldCat 19.09.2011

    Коллеги, у Вас работает неправильно, потому что в REST запросе маленькая опечатка. Пропущен знак ‘$’ перед фильтром. В связи с этим фильтрация в запросе не работает. Короче надо так:

    var oDataRequest = Xrm.Page.context.getServerUrl() + "/XRMServices/2011/OrganizationData.svc/ContactSet(guid'" + Xrm.Page.data.entity.getId().substr(1, 36) + "')/Contact_Annotation?$select=DocumentBody&$filter=FileName%20eq20'contact.png'";
    

    a лучше так (нагляднее):

    var oDataRequest = Xrm.Page.context.getServerUrl() + "/XRMServices/2011/OrganizationData.svc/ContactSet(guid'" + Xrm.Page.data.entity.getId().substr(1, 36) + "')/Contact_Annotation?$select=DocumentBody&$filter=" + escape("FileName eq \'contact.png\'");
    

    OldCat

  • Александр 19.09.2011

    а если пишет что ошибка
    поле window
    событие onload
    ошибка отказано в доступе.

    в чем может быть причина? какого доступа может не хватать?

  • slivka_83 19.09.2011

    Ну с такими подробностими мало чем можно помочь. Попробуйте отладить код с помощью DevToolBar’а.

*

code