{"id":1952,"date":"2015-12-18T10:59:47","date_gmt":"2015-12-18T10:59:47","guid":{"rendered":"http:\/\/himbap.com\/blog\/?p=1952"},"modified":"2015-12-18T11:53:06","modified_gmt":"2015-12-18T11:53:06","slug":"using-new-scripting-methods-in-crm-2016-part-2","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=1952","title":{"rendered":"Using New Scripting Methods in CRM 2016 Part 2"},"content":{"rendered":"

In our earlier post<\/a>, we discussed getValue <\/strong>and KeyPress <\/strong>methods introduced in CRM 2016, in this post we are going to discuss AutoComplete methods. Below two methods are added to implementing auto complete feature to text fields:<\/p>\n

\u2022 showAutoComplete<\/strong>
\n\u2022 hideAutoComplete<\/strong><\/p>\n

showAutoComplete<\/strong>– This method allows us to show list of possible values as dropdown to add auto complete feature to text fields just like auto complete feature in traditional web pages. As soon as we select any item under the list, it will be populated in target text field and OnChange event of that field will fire. We can use this method like below:<\/p>\n

\r\nXrm.Page.getControl(field name).showAutoComplete(object);\r\n<\/pre>\n
This method takes object as a parameter which include results and commands. We can define object like below.<\/p>\n
\r\nvar resultset = { \r\n   results: [{ \r\n         id: <value1>, \r\n         icon: <url>, \r\n         fields: [<fieldValue1>]}], \r\n   commands:{ \r\n         id: <value>, \r\n         icon: <url>, \r\n         label: <value>, \r\n         action: <function reference> \r\n   } \r\n}\r\n<\/pre>\n
Here result represents array of possible values that we want to show under drop down on keypress. Under the results, we can define id, for individual array item, icon to show particular icon for array items and field where we pass values.<\/p>\n
Commands is used to define additional action on the drop down, for example opening any additional page by providing a link.<\/p>\n
hideAutoComplete<\/strong> \u2013 This method is used to hide the auto complete drop down list that is implemented using showAutoComplete method. we can use it like below:<\/p>\n
\r\nXrm.Page.getControl(field name).hideAutoComplete()\r\n<\/pre>\n
Note<\/strong>: Both of above methods only works with Web and Outlook client.<\/p>\n
Let\u2019s take an example we want to implement autocomplete feature for salutation field in contact entity and want to provide following possible options for it
\n{ ‘Mr.’,’Miss’,’Ms’, ‘Dr.’,’Prof.’,’Mrs.’}<\/p>\n
We can use following code to implement our requirement<\/p>\n
\r\nfunction SalutationAutoComplete() {\r\n  \/\/defind possible salutation\r\n  salutations = [\r\n  { name: 'Mr.'},\r\n  { name: 'Miss'},\r\n  { name: 'Ms'},\r\n  { name: 'Dr.'},\r\n  { name: 'Prof.'},\r\n  { name: 'Mrs.'}\r\n   ];\r\nvar OnSalutationkeyPress = function(fld) {\r\n        var salutationtxt = Xrm.Page.getControl("salutation").getValue();\r\n        resultSet = {\r\n            results: new Array(),\r\n            commands: {\r\n                id: "salutationcmd",\r\n                label: "Search in Google",\r\n                action: function() {\r\n                    window.open("http:\/\/google.com"); \/\/dummy url demo\r\n                }\r\n            }\r\n        };\r\n        var salutationtxtLowerCase = salutationtxt.toLowerCase();\r\n        for (i = 0; i < salutations.length; i++) {\r\n            if (salutationtxtLowerCase === salutations[i].name.substring(0, salutationtxtLowerCase.length).toLowerCase()) {\r\n                resultSet.results.push({\r\n                    id: i,\r\n                    fields: [salutations[i].name]\r\n                });\r\n            }\r\n            if (resultSet.results.length >= 10) break;\r\n        }\r\n\r\n        if (resultSet.results.length > 0) {\r\n            fld.getEventSource().showAutoComplete(resultSet);\r\n        } else {\r\n            fld.getEventSource().hideAutoComplete();\r\n        }\r\n    };\r\n\r\n    Xrm.Page.getControl("salutation").addOnKeyPress(OnSalutationkeyPress);\r\n}\r\n<\/pre>\n
To use above code we can create a java script web resource and can paste above code under text editor:<\/p>\n
\"salutation3\"<\/a><\/p>\n
After that we need to add our web resource to contact entity form and need to call SalutationAutoComplete <\/strong>on contact form OnLoad like below:<\/p>\n
\"salutation2\"<\/a><\/p>\n
Now after publishing our changes we can test our code by creating or modifying any existing record. As soon as we will type first character, we will see auto complete dropdown like below:
\n\"salutation1\"<\/a><\/p>\n
Stay tuned for more Dynamics CRM Updates !!<\/p>\n","protected":false},"excerpt":{"rendered":"
In our earlier post, we discussed getValue and KeyPress methods introduced in CRM 2016, in this post we are going to discuss AutoComplete methods. Below two methods are added to implementing auto complete feature to text fields: \u2022 showAutoComplete \u2022 hideAutoComplete showAutoComplete– This method allows us to show list of possible values as dropdown to add auto complete feature to… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[21,275],"tags":[283,284,282,281],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1952"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1952"}],"version-history":[{"count":13,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1952\/revisions"}],"predecessor-version":[{"id":1969,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1952\/revisions\/1969"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}