RSS

Tag Archives: Cross Browser

CRM 2013 Multi Pick List

Background

In One of our previous Blogs CRM 2011 Multi Pick list, we have discussed about creating Multiple Pick List in the MS Dynamic CRM form. But the previous post was for CRM 2011. As the CRM 2013 is supported across different browsers, we have to change a little in the code to make it compatible for all major browsers. Here is the modified Blog for Multi Pick List in MS Dynamics CRM 2013.

Let’s start

In this article, we will create a Multiple Pick List for Dynamic CRM form. User can enter multiple data from Pick List by CheckBox. This will also work on all the four major browsers (IE, Firefox, Chrome and Safari).
5-1-2013 1-35-04 PM

Requirement

There was a requirement in a project, where user wanted to select, not only one, but also multiple value from a Pick List.

Solution

Steps which are needed to be followed:-

  1. Creation of Field.
  2. Create Web Resource.
  3. Add function to the form.

Creation of Field

There are two fields which are created on the entity you want to make Multi Pick List :-

  1. OptionSet Field :- all the option which must be entered
  2. Data Field:- Multiple Lines of Text Field. In which data is stored.

Include both the field on the form.

Create Web Resource

Create a Web Resource with the following code:-

// var_sc_optionset >>  Provide logical-name for Option Set field
// var_sc_optionsetvalue >> Provide logical-name for field which will
//                          store the multi selected values for Option Set
// OS >> Provide Options of the Optionset field
//       (Ex:- Xrm.Page.getAttribute("Option Set field logical-name").getOptions())
// OSV >> Provide text field object which will store the
//        multi selected values for Option Set
//       (Ex:- document.getElementById("text field logical-name"))

// Method to convert an optionset to multi select OptionSet
function ConvertToMultiSelect(var_sc_optionset, var_sc_optionsetvalue, OS, OSV) {

    if (OS != null && OSV != null) {

        document.getElementById(var_sc_optionset).style.display = "none";

        // Create a DIV container
        var addDiv = document.createElement("div");
        addDiv.id = var_sc_optionsetvalue + "_m";
        addDiv.style.width = "100%";
        addDiv.style.height = "80px";
        addDiv.style.background = "#ffffff";
        addDiv.style.color = "white";
        addDiv.style.overflow = "auto";
        addDiv.style.border = "1px #6699cc solid";
        document.getElementById(var_sc_optionset).parentNode.appendChild(addDiv);

        // Declaration of variables will be used in the loop depending upon the browser
        var initialValue = 0;
        var maxValue = 0;

        var nAgt = navigator.userAgent;

        if (nAgt.indexOf("Firefox") != -1) {  // If the broswer is "Firefox" 

            initialValue = 1;
            maxValue = OS.length;

        }
        else if (nAgt.indexOf("Chrome") != -1 || nAgt.indexOf("IE") != -1) { // If the browser is Chrome or IE

            initialValue = 0;
            maxValue = OS.length - 1;
        }
        else if (nAgt.indexOf("Safari") != -1) {  // If the browser id "Safari"

            initialValue = 1;
            maxValue = OS.length;
        }

        // Initialise checkbox controls
        for (var i = initialValue; i < maxValue; i++) {
            var pOption = OS[i];
            if (!IsChecked(pOption.value, var_sc_optionsetvalue)) {
                var addInput = document.createElement("input");
                addInput.type = "checkbox";
                addInput.style.border = "none";
                addInput.style.width = "25px";
                addInput.style.align = "left";
                addInput.style.color = "#000000";
                addInput.onclick = function () {

                    OnSave(var_sc_optionset, var_sc_optionsetvalue);
                    createTable(var_sc_optionsetvalue);
                }
            }
            else {

                var addInput = document.createElement("input");
                addInput.type = "checkbox";
                addInput.checked = true;
                addInput.setAttribute("checked", true);
                addInput.checked = "checked";
                addInput.defaultChecked = true;
                addInput.style.border = "none";
                addInput.style.width = "25px";
                addInput.style.align = "left";
                addInput.style.color = "#000000";
                addInput.onclick = function () {

                    OnSave(var_sc_optionset, var_sc_optionsetvalue);
                    createTable(var_sc_optionsetvalue);
                }

            }

            //Create Label
            var addLabel = document.createElement("label");
            addLabel.style.color = "#000000";
            addLabel.innerHTML = pOption.text;

            var addBr = document.createElement("br"); // it's a 'br' flag

            document.getElementById(var_sc_optionset).nextSibling.appendChild(addInput);
            document.getElementById(var_sc_optionset).nextSibling.appendChild(addLabel);
            document.getElementById(var_sc_optionset).nextSibling.appendChild(addBr);
        }
    }
}

// Check if it is selected
function IsChecked(pText, optionSetValue) {

    var selectedValue = Xrm.Page.getAttribute(optionSetValue).getValue();

    if (selectedValue != "" && selectedValue != null) {
        var OSVT = selectedValue.split(",");

        for (var i = 0; i < OSVT.length; i++) {
            if (OSVT[i] == pText)
                return true;
        }
    }

    return false;
}

// var_sc_optionsetvalue >> Provide logical-name for field which will
//                          store the multi selected values for Option Set
// optionSet>> Provide logical-name of Option Set field 
function OnSave(optionSet, var_sc_optionsetvalue) {

    var OS = document.getElementById(optionSet);
    var options = Xrm.Page.getAttribute(optionSet).getOptions();
    var getInput = OS.nextSibling.getElementsByTagName("input");
    var result = "";
    var result1 = "";
    var nAgt = navigator.userAgent;

    for (var i = 0; i < getInput.length; i++) {
        if (getInput[i].checked) {
            result += getInput[i].nextSibling.innerHTML + ",";

            if (nAgt.indexOf("Firefox") != -1) {  //If the broswer is "Firefox"
                result1 += options[i + 1].value + ",";
            }

            else if (nAgt.indexOf("Chrome") != -1 || nAgt.indexOf("IE") != -1) { //If the browser is Chrome or IE

                result1 += options[i].value + ",";
            }

            else if (nAgt.indexOf("Safari") != -1) {  //If the browser id "Safari"

                result1 += options[i + 1].value + ",";

            }

        }
    }

    //save value
    Xrm.Page.getAttribute(var_sc_optionsetvalue).setValue(result1);
}

// var_sc_optionsetvalue >> Provide logical-name for field which will
//                          store the multi selected values for Option Set
function createTable(var_sc_optionsetvalue) {
    // Get OptionSet value
    var OptionValue = Xrm.Page.getAttribute(var_sc_optionsetvalue);
    var c_OptionValue = Xrm.Page.getControl(var_sc_optionsetvalue);
    var d_OptionValue = var_sc_optionsetvalue + "_d";

    if (OptionValue.getValue() != null) {

        var OptionValueHtml = "<div style=\"overflow-y:auto;width:100%;display: none; min-height: 5em; max-height: 1000px;\">";

        OptionValueHtml += "<table style='width:100%;height: 100%;'>";
        var OptionValueV = OptionValue.getValue();

        var OptionValueT = OptionValueV.split(",");
        var cols = 0;
        for (var row = 0; row < OptionValueT.length - 1; row++) {
            OptionValueHtml += "<tr  style='height:20px;'>";
            for (var i = cols; i < cols + 3; i++) {
                OptionValueHtml += "<td style='width:33%;'>";
                if (OptionValueT[i] != null || OptionValueT[i] != undefined) {

                    OptionValueHtml += OptionValueT[i];
                }
                OptionValueHtml += "</td>";
            }
            cols = cols + 3;
            OptionValueHtml += "</tr>";
            if (cols >= OptionValueT.length) {
                break;
            }
        }

        OptionValueHtml += "</table>";
        OptionValueHtml += "</div>";
        document.getElementById(d_OptionValue).innerHTML = OptionValueHtml;
    }  
}

Add function to the form

There are three functions need to be added

  • On Load :-

    1. Function name :- ConvertToMultiSelect.
      Parameter :- “new_multipicklistoption”, “new_multipicklistvalue”, Xrm.Page.getAttribute(“new_multipicklistoption”).getOptions(), document.getElementById(“new_multipicklistvalue”)
    2. Function name :- createTable
      Parameter :- “new_multipicklistvalue”.

5-1-2013 1-11-58 PM

  • On Save :-

    1. Function Name :- OnSave
      Parameter :- “new_multipicklistoption”, “new_multipicklistvalue”

5-1-2013 1-12-52 PM

Reference

CRM 2011 Multi Pick list

By Ranjan Parhi
Senior Software Engineer @Team DynamicsCRM.
Mindfire Solutions

 
2 Comments

Posted by on January 30, 2014 in WebResources

 

Tags: , , , , , , , , , , , , , , , , , , , , , ,

Retrieve N:N Relationship Records using CrmFetchKit

Introduction

CrmFetchKit is a Cross Browser library that allows the execution of fecthXml queries via JavaScript for Dynamics CRM 2011 and CRM 2013 (using the new WCF Endpoints).

Background

In one of my recent projects, the requirement was to retrieve all Contacts present in a Campaign and to display all those in a Grid onload of Campaign record. As this process would fetch many records, so it should be Asynchronous.

Steps

Here are the steps how to use CrmFetchKit for retrieving records.

Step:1 Get the fetchXml using Advanced Find in Crm.

In my case, I used Advanced Find on Account Entity. Download the fecthXml and save it. It will be like below.

<?xml version="1.0"?>
<fetch distinct="true" mapping="logical" output-format="xml-platform" version="1.0"> 
    <entity name="contact"> 
        <attribute name="contactid"/>
        <attribute name="ownerid"/>
        <attribute name="fullname"/>
        <attribute name="lastname"/>
        <attribute name="telephone2"/>
        <attribute name="firstname"/>
        <attribute name="emailaddress1"/>
        <attribute name="createdon"/>
        <attribute name="new_city"/> 
        <order descending="false" attribute="ownerid"/> 
        <link-entity name="new_campaign_contact" intersect="true" visible="false" to="contactid" from="contactid"> 
        <link-entity name="campaign" to="campaignid" from="campaignid" alias="ab"> 
            <filter type="and">
                <condition attribute="campaignid" value="  campaignId  " uitype="campaign" 
 value="{8BE16D9E-8A7A-E211-B46D-00155D641D0E}"  operator="eq"/> 
            </filter> 
        </link-entity>
        </link-entity>
    </entity> 
</fetch>

Step:2 Add reference of fecthKit in the page where you are going to retrieve records.

<script src="../Scripts/jquery.1.7.1.min.js" type="text/javascript"></script>
<script src="../Scripts/CrmFetchKit.js" type="text/javascript"></script>

NB:The jQuery sholud be jquery.1.7.1.min.js (or higher).

Step:3 Add the code for retrieving Contacts present in a Campaign.

var contactData;
var campaignId;

campaignId = parent.Xrm.Page.data.entity.getId();

if(campaignId != null && campaignId != undefined)
{
    var fecthXMLForContact = '<fetch distinct="true" mapping="logical" output-format="xml-platform" version="1.0">'+
                             '<entity name="contact"> <attribute name="contactid"> <attribute name="ownerid">' +
                             '<attribute name="fullname"> <attribute name="lastname">' +
                             '<attribute name="telephone2"> <attribute name="firstname">' +
                             '<attribute name="emailaddress1"> <attribute name="createdon"> <attribute name="new_city">' +
                             '<order descending="false" attribute="ownerid">' +
                             '<link-entity name="new_campaign_contact" intersect="true" visible="false" to="contactid"   from="contactid">' +
                             '<link-entity name="campaign" to="campaignid" from="campaignid" alias="ab">' +
                             '<filter type="and"> <condition attribute="campaignid" value="' + campaignId + '" uitype="campaign" operator="eq">' +
                             '</condition></filter> </link-entity> </link-entity>' +
                             '</order></attribute></attribute></attribute></attribute></attribute>' +
                             '</attribute></attribute></attribute></attribute></entity> </fetch>';

     CrmFetchKit.Fetch(fecthXMLForContact).fail(function (xhr, status, errorThrown) {
         // get the error-message
         var msg = $(xhr.responseXML).find('Message').text();
         alert('Error occured: ' + msg);
     })
     .done(function (resultsContact) {
         contact = true;
         contactData = resultsContact;                
     });
}

In fetchXml, replace value of CampaignId with the Campaign Id for which you need to retrieve records.
The variable contactData will contain all records present in Campaign.
Here you are done!!!

By Gitanjali
Senior Software Engineer @Team DynamicsCRM.
Mindfire Solutions

 

Tags: , , , , , , , , , , , , , , , , , , ,

 
%d bloggers like this: