Author: 
New in Microsoft Dynamics CRM 2016 JavaScript

New in Microsoft Dynamics CRM 2016 JavaScript

JavaScript Methods

The arrival of Dynamics CRM 2016 brings new client side methods that make user experience more interactive. This article details on these new client side methods.

getValue

This method was previously available only for attribute collection and using it we could get field value after the field was updated and while the cursor was unfocused from that field. Now, we can capture value of field as early as when users start entering value in field. We can use this method as shown below:

Xrm.Page.getControl(field name).getValue();

Where we want the user to enter value as per our specific pattern or regular expression, we can use code mentioned below:

function OnfieldKeyPress() {
    var fieldValue = Xrm.Page.getControl(<field name here>).getValue().toString().replace(/[^0-9]/g, "");
    Xrm.Page.getAttribute(<field name here>).setValue(fieldValue);
}

This method will work only if we call this on a Keypress event. So let's first understand how to call a function on Keypress event for a text field.

Keypress

The following three Keypress methods are added for 2016 version:

1) addOnKeyPress

This is used to attach a function with a Keypress event:

Xrm.Page.getControl(fieldname).addOnKeyPress(function name);

If we add this statement in function which is called at the loading of the form, then OnFieldKeyPress function will be attached with Keypress event of field.

2) removeOnKeyPress

This is used to remove/detach a function that is attached with a Keypress event:

Xrm.Page.getControl(fieldname).removeOnKeyPress(function name);

3) fireOnKeyPress

This is used to call Keypress event handler for text or a number field.

Xrm.Page.getControl(field name).fireOnKeyPress();

So addOnKeyPress and removeOnKeyPress basically attach or delete already attached function with Keypress event while fireOnKeyPress enables Keypress event for text or number fields.

Associate Function with Form or Field events

You can associate up to 50 script web resources and they will be loaded with an entity form. Moreover, for any event on the form, you can nominate which functions are to be the event handler.
You can associate functions at runtime for field's OnChange, form OnSave and lookup control PreSearch events by using following three statements respectively:

Xrm.Page.getAttribute(arg).addOnChange([function reference])

Xrm.Page.data.entity.addOnSave([function reference])

Xrm.Page.getControl(arg).addPreSearch(handler)

Similarly following methods can be used to remove the function dynamically from OnChange, OnSave and PreSearch events, respectively:

Xrm.Page.getAttribute(arg).removeOnChange([function reference])

Xrm.Page.data.entity.removeOnSave([function reference])

Xrm.Page.getControl(arg).removePreSearch(handler)

Remember that the PreSearch event is supported for Updated Entities only. You can view the list of Updated Entities on the following link:

https://msdn.microsoft.com/en-us/library/41462684-3e5d-4858-8be4-1a7c4fcdeff6#BKMK_UpdatedEntties

Autocomplete

It is a free text field with an Onkey Press Event added to show an autocomplete. The great thing about autocomplete is that icons and additional action links can be shown as in the figure below:

Let us review through an example on how to provide auto complete list of cities for City field on an entity.

function listOfCities() {
    // List of sample cities names to suggest
    citites = [
    { name: 'Toronto', country: 'Canada', code: '001',a:'0' },
    { name: 'Aarhus', country: 'Denmark', code: '002' },
    { name: 'Cairo', country: 'Egypt', code: '003' },
    { name: 'Alexandria', country: 'Egypt', code: '004' },
    { name: 'Bavaria', country: 'Germany', code: '005' },
    { name: 'Baden-Württemberg', country: 'Germany', code: '006' },
    { name: 'Mumbai', country: 'India', code: '007' },
    { name: 'New Delhi', country: 'India', code: '008' },
    { name: 'Nashik', country: 'india', code: '009' },
    { name: 'Hai Phong', country: 'Vietnam', code: '0010' },
    { name: 'Ho Chi Minh', country: 'Vietnam', code: '0011' },
    { name: 'Mississauga', country: 'Canada', code: '0012' },
    ];
    var keyPressFcn = function (ext) {
        try {
            var userInput = Xrm.Page.getControl("address1_city").getValue();
            resultSet = {
                results: new Array(),
                commands: {
                    id: "city",
                    icon: "../WebResources/new_/Images/add.png",
                    //This will add the Link at the bottom of the auto complete search result
                    label: "New",
                    action: function () {
                        //specify the action that you want to perform on click of New Link
                        window.open("https://crmtrial12.crm5.dynamics.com");
                    }
                }
            };
            var userInputLowerCase = userInput.toLowerCase();
            for (i = 0; i < citites.length; i++) {
                if (userInputLowerCase === citites[i].name.substring(0, userInputLowerCase.length).toLowerCase()) {
                    resultSet.results.push({
                        id: i,
                        fields: [citites[i].name, citites[i].country, citites[i].code,],
                        icon: "../WebResources/new_/Images/add.png"
                    });
                }
                if (resultSet.results.length >= 10) break;
            }
            if (resultSet.results.length > 0) {
                ext.getEventSource().showAutoComplete(resultSet);
            } else {
                ext.getEventSource().hideAutoComplete();
            }
        } catch (e) {
            console.log(e);
        }
    };
    Xrm.Page.getControl("address1_city").addOnKeyPress(keyPressFcn);
}

In above code, showAutoComplete is used to show the dropdown list, comprising of the strings entered by the user in the text box. In the example above, typing “A” in the text box will display all the cities starting with "A". To hide the drop down list, use hideAutoComplete just click anywhere on the form.

Categories: 
Ali Hassan's picture
A Senior Software Engineer at Systems Limited with 4 years of experience in .NET Technologies and MS Dynamics CRM, Ali Hassan is based in Lahore and is a regular contributor of the Systems Limited Blog.

Disclaimer: The views expressed here are solely those of the author in his private capacity and do not in any way represent the views of Systems Limited, or any other entity related to Systems Limited.

Comments

M Muragaiah's picture
Submitted by M Muragaiah on Tue, 03/29/2016 - 17:34

I loved this blog ..very use full code
Williamphen's picture
Submitted by Williamphen on Fri, 06/17/2016 - 19:37

Enjoyed every bit of your article post. Fantastic. Ardis
John's picture
Submitted by John on Fri, 06/24/2016 - 14:14

How can i fill multiple field with one selection.
pork movies's picture
Submitted by pork movies on Wed, 07/06/2016 - 05:00

Way cool! Some very valid points! I appreciate you writing this write-up and also the rest of the site is also really good.
Surprise 's picture
Submitted by Surprise on Wed, 07/06/2016 - 17:35

WOW :)
Abdul's picture
Submitted by Abdul on Wed, 08/17/2016 - 17:07

Can you please help me How can I fill sub grid in a form in crm 2016

Add new comment