AngularJS Autocomplete Directive with Label and Value Model Properties

With AngularJS, we can use the JQuery UI Autocomplete widget (details here) to convert any text box to an autocomplete control which can either call a web service or use an object array as data source.  The limitation with this widget is that it only knows of the one control associated to the directive which means that we can only set either the label or value.

To illustrate this limitation, let’s look at a simple customer search with autocomplete implementation in which we just type names starting with the letter O.

Problem Description:

As we type the client information, we can see that the widget automatically shows a list of names matching what has been entered. When a name is selected from the list, it is assigned to the autocomplete text box which is bound to a model property (client.name), but for more practical purposes, we would also like to get the id.  We can also note the header label only shows the information that was typed, but not the selected name. There is also a problem with updating the view.

Solution:

Since for most common cases we need the behavior to be similar to a Select control which has both a Label and Option value properties, we need to add a hidden input field and set the ng-model attribute to the model property, client.id. We are now set to capture the client name and id in two different fields. The problem still remains that we need to extend the autocomplete functionality, so that we are able to set the client.id property on the form.

To address this challenge in a simple approach, we can add a callback on the controller scope which can be used by the directive to callback and set any additional properties.  Let’s take a look at a simple implementation of this approach:

The controller has a new scope function (setCliendData) which is available to the directive via the injected scope variable.  This function just sets the controller model with the selected option. The change on the directive is to implement the select event handler which is raised after every selection from the list. We should note that we need to call the controller function using scope.$apply to force a digest cycle which updates the view with the new model value.  If this is not done, the view would not get updated, and our header would not display the client id and name properly.

What to Note:

The autocomplete widget by default uses the properties value or label to build the list. If those properties are not found, a list with empty names is displayed. To address this, on the directive autocomplete source handler, we map the name property to the value (or label) property that is expected by the autocomplete widget.

We should note that this approach works by sharing the controller scope with the directive. When using isolated scope on the directive, the calls to the dataSource and setCliendData would not be available on the directive, and this would need to be implemented differently.  

I hope this provides some help on how to address some of the limitations when building autocomplete functionality on your apps.

With AngularJS, we can use the JQuery UI Autocomplete widget ( details here ) to convert any text box to an autocomplete control which can ...

Read Article →

JavaScript DateDiff Extension Methods

When working with Date types in JavaScript, we often have the need to do date difference calculations. An approach to provide this functionality would be to extend the Date type with functions that can handle the calculations. So let’s talk about how to create these extension methods.

We can create extension methods on any JavaScript object by using the Object.prototype property. This property allows us to associate dynamic properties and functions to an object. This is what we use to associate the following functions to any Date instance.

Extension methods:

/*

Date type Extension Methods

Source: ozkary.blogspot.com

Date: 4/27/2014

*/

//Month difference

Date.prototype.monthDiff = function (dtBefore) {

      var yr = (this.getFullYear() - dt.getFullYear()) * 12;

      var mn = ((this.getMonth() + 1) - (dt.getMonth() + 1));

      return yr + mn;

}

//year difference

Date.prototype.yearDiff = function (dtBefore) {

      var yr = (this.getFullYear() - dt.getFullYear());

      return yr;

}

//date format

Date.prototype.toShortDate = function () {

      var dt = (this.getMonth() + 1) + '/' + this.getDate() + '/' + this.getFullYear();

      return dt;

}

Function name	Description
monthDiff (date)	This extension method expects a date type as a parameter. It uses native functions to calculate the years and months difference between itself (this) and the date parameter.
yearDiff (date)	This extension method expects a date type as a parameter. It uses native functions to calculate the year difference between itself (this) and the date parameter
toShortDate	This extension method uses the native functions to extract the date parts (month, day, year) and return the short date format (mm/dd/yyyy)

Usage:

Now that we have our new functions available, we can work on showing a way to use them. We can do that by comparing a couple of date ranges to display the difference in months and years. In our examples, we use the most recent date as the extended object, and pass the before date as the parameter. This allows us to get positive values for the date difference calculation.

var date1 = new Date('2/16/2014');

var date2 = new Date('09/01/2009');

$('#dates1').text(date1.toShortDate() + ' - ' + date2.toShortDate());

//get the date difference

var m = date1.monthDiff(date2);

var y = date1.yearDiff(date2);

$('#m1').text(m);

$('#y1').text(y);

//get the date difference

date1 = new Date('3/28/2014');

date2 = new Date('12/28/1996');

$('#dates2').text(date1.toShortDate() + ' - ' + date2.toShortDate());

m = date1.monthDiff(date2);

y = date1.yearDiff(date2);

$('#m2').text(m);

$('#y2').text(y);

This script performs the following steps:

• Create Date instances
• Display the short date format (mm/dd/yyyy)
• Calculate the months and year differences

The result should look as shows below. We can also use this JSFiddle sample to see it in action.

Thanks for following and keep an eye for additional entries.

When working with Date types in JavaScript, we often have the need to do date difference calculations. An approach to provide this funct...

Read Article →

Format Currency with JavaScript and CSS

When working with currency, there is a need to format the data with commas, decimals, currency sign and an indicator for negative amounts. Let’s take a look at one approach that can help us format the data once it is rendered on the user interface.

We start by taking a look at a page that displays several numeric fields with no styles.

As we can see, these numbers are hard to read. It will be much better to just add commas and a different font for negative values. We can do this by using a CSS selector and select all the elements that we want to format.

$('* div').each(function () {   

    var item = $(this).text();

    var num = Number(item).toLocaleString('en');

    if (Number(item) < 0) {

        num = num.replace('-', '');

        $(this).addClass('negMoney');

    } else {

        $(this).addClass('enMoney');

    }

    $(this).text(num);

});

The approach here is to use the Number.toLocaleString function to format the data with commas. This provides the ability to eliminate the use of regular expression to parse the data. Now we need to add the currency sign and use a red font for negative amounts. We do this by applying these CSS classes.

.enMoney::before {

    content:"$";

}

.negMoney {

    color:red;

}

div.negMoney::before {

    content:'($';

}

div.negMoney::after {

    content:')';

}

The script adds the class name to the element. We use the enMoney and negMoney classes to provide the font style. To add the currency sign and parentheses (negative values only), we use the CSS pseudo-element ::before and ::after to apply the special currency format.  The result looks like this:

This looks much better now, and it is a simple approach that uses the browser capabilities, JavaScript and some CSS to get the formatting done.

Use this JSFiddle to play with the script: Format Currency

When working with currency, there is a need to format the data with commas, decimals, currency sign and an indicator for negative amounts. L...

Read Article →

MSCRM Get User Information with JavaScript

When working with Dynamics CRM forms, we can use the XRM client object model to query the fields and controls on the page. A common field on every form is the current user id. This however only provides the internal system id or GUID. When we need more information about the user, we can use the ODATA web services to get additional information.

This script provides us with a helper function to enable us to find additional information about the current logged on user.

if (typeof (OGBIT) == "undefined") { OGBIT = {}; }

OGBIT.UserInfo = {   

    Get: function () {

        var userInfo = {};

        if (self.userName == '') {

        var serverUrl = window.location.protocol + "//" + window.location.host + "/" + Xrm.Page.context.getOrgUniqueName();

           

            var userId = Xrm.Page.context.getUserId();

            var req = serverUrl + "/xrmservices/2011/OrganizationData.svc/SystemUserSet(guid'{0}')?$select=EmployeeId,FullName,InternalEMailAddress,SystemUserId,DomainName".replace('{0}', userId);

            try {

                $.ajax({

                    type: "GET", contentType: "application/json; charset=utf-8", datatype:"json",async:false,

                    url: req,

                    beforeSend: function (XMLHttpRequest) {

                        XMLHttpRequest.setRequestHeader("Accept", "application/json");

                    },

                    success: function (data, textStatus, XmlHttpRequest) {

                        userInfo = data.d;

                        userInfo.status = true; //dynamic property

                    },

                    error: function (XmlHttpRequest, textStatus, errorObject) {

                        userInfo.status = false;

                        //add error handling

                    }

                });

            } catch (e) { }

        }

        return userInfo;

    }

}

The script first calls the getUserId method of the page context. This returns the system id which we can then use to make an ODATA request to get the additional user information. The ODATA query to get the user information has this format:

SystemUserSet(guid'{0}')?$select=EmployeeId,FullName,InternalEMailAddress,SystemUserId,DomainName

The SystemUserSet allows us to query the System User entity.  We query for the current user with the guid’{0}’ parameter. The $select query option is used to indicate what additional fields should be returned. Those fields are listed below:

Parameters:

Field Name	Description
EmployeeId	employee id
FullName	First and last name
InternalEMailAddress	Email
SystemUserId	Internal ID or GUID
DomainName	Username with this format: DomainName\Username

The following snippet can be used to test the script. With this function, we just call the Get method and assign the returning information into local variables.

function GetUserInfo() {

    if (typeof (OGBIT.UserInfo) != 'undefined') {

        var info = OGBIT.UserInfo.Get();

        if (info.status) {

            var empId = info.EmployeeId;

            var name = info.FullName;

            var email = info.InternalEMailAddress;

            var userName = info.DomainName;

            var id = info.SystemUserId;

        } else {

            alert('Unable to find user');

        }

    }

}

I hope this Script helps you get more understanding on how to interact with MS CRM.

When working with Dynamics CRM forms, we can use the XRM client object model to query the fields and controls on the page. A common field o...

Read Article →

MSCRM Adding Notes With JavaScript

In Dynamics CRM, users can add notes to make comments about certain changes that were made to a record. In some instances, there may be a requirement to automate the creation of notes based on certain field information changes.  

The challenge with notes is that it is not a field on the entity. It is actually a 1:N association which is displayed on the form with an embedded IFRAME. This means that we can’t just populate a field, but instead, we need to call the REST web services on dynamics to request the creation of the note.

To handle this, we can create a simple JavaScript object that handles the web service call (NoteManager) and another object to the handle the test of the creation of the notes (TestNotes):

NoteManager Script:

if (typeof (OGBIT) == "undefined") { OGBIT = {}; }

OGBIT.NoteManager = {

    AddNote: function (params, entitySet, onComplete, onError) {

        var self = OGBIT.NoteManager;

        var serverUrl = self.GetServerUrl();

        var ODataURL = serverUrl + entitySet;

        var json = JSON.stringify(params);      //MUST CONVERT TO JSON STRING

        $.ajax({

            type: "POST",

            contentType: "application/json; charset=utf-8",

            datatype: "json",

            url: ODataURL,

            data: json,

            beforeSend: function (XMLHttpRequest) {

                XMLHttpRequest.setRequestHeader("Accept", "application/json");

            },

            success: function (data, textStatus, XmlHttpRequest) {

                if (onComplete != null)

                    onComplete(data.d.results);

            },

            error: function (XmlHttpRequest, textStatus, errorObject) {

                var msg = textStatus;

                try {

                    msg = JSON.parse(XMLHttpRequest.responseText).error.message.value;

                } catch (e) { }

                if (onError != null)

                    onError(msg);

            }

        });

    },

    GetServerUrl: function () {

        var serverUrl = '';

        if (typeof (Xrm) != 'undefined' && Xrm != null) {

            serverUrl = Xrm.Page.context.getServerUrl();

            //test that server name is not coming back instead of the domain name

            //otherwise we get a Cross-Origen (CORS) 400 error           

        }

        if (serverUrl.match(/\/$/)) {

            serverUrl = serverUrl.substring(0, serverUrl.length - 1);

        }

        return serverUrl + "/XRMServices/2011/OrganizationData.svc/";

    },

}

The above script implements two main methods:

Method Name	Description
AddNote	This method handles the interaction with the Dynamics CRM web service. It takes the following parameters: Name Description Params JSON structure that contains the note information entitySet This is the name of the entity where the record needs to be added. For notes, the name is AnotationSet onComplete This is a callback handler onError This is a callback handler for errors Note the following attributes on the request: The Dynamic CRM web services are RESTFul. For the creation of a new note, we to set the verb to POST. Since we pass a JSON structure we set the content and data types to JSON The data parameter contains the JSON data in string format which is generated after calling the stringify function
GetServerUrl	This method resolves the server URL and current organization name.

TestNotes Script:

OGBIT.TestNotes = {

   AddNotes: function () {

      var self = OGBIT.TestNotes;

      var note = {};

      var ref = {};

      note.NoteText = "This is the content of the notes";

      note.Subject = "Note Unit test";

      ref.LogicalName = Xrm.Page.data.entity.getEntityName();//returns the entity name

      ref.Id = Xrm.Page.data.entity.getId();             //returns the primary id/guid

      note.ObjectId = ref;                              //associate the note to an entity

     OGBIT.NoteManager.AddNote(note, 'AnnotationSet', self.onComplete, self.onError); //AnnotationSet is the notes entity set 

    },

    onError: function (msg) {

        alert(msg)

    },

    onComplete: function (data) {

        alert(data);

    }

}

The above script creates the following JSON structures:

Name	Description
Note	This is the note object notation. It is created with the following attributes: Name Description NoteText This is the content for the note Subject This is the subject ObjectId This is the object associated to the notes. I.E. A note can be associated to an account or other custom entity that support notes.
ref	This is the associated object. It needs the following attributes: Name Description LogicalName This is the name of the entity Id This is the primary id (GUID) These values can be fetched by using the Xrm client object model. It uses the current context to retrieve the entity information.

After creating the JSON references, the script uses the NoteManager method to post the request to the web services. The callback handlers are called after the web service call has completed. 

og-bit.com
CodeProject

I hope these scripts can help you get more understanding of the Dynamics CRM web services and how to interact with them via JavaScript.

In Dynamics CRM, users can add notes to make comments about certain changes that were made to a record. In some instances, there may be a r...

Read Article →