Archive
[Step by Step] Using TypeScript in Dynamics 365 9.x
What is TypeScript:
- TypeScript extends JavaScript by adding types to the language. TypeScript sits as a layer on-top of JavaScript, this layer is the TypeScript type system.
- In a layman terms, TypeScript allows C# way of writing jScript.
In this article, lets see how to leverage TypeScript capability while writing client scripts in Dynamics 365.
Key Notes:
- TypeScript’s file extension is ‘.ts‘.
- Dynamics 365 cannot understand TypeScript, it only understands jScript (i.e., .js)
- So we write the script in TypeScript, and use ‘Transpile’ technique to convert TypeScript to jScript.
- Transpiling is taking source code written in one language and transforming into another language. In our case its from .ts to .js
- Don’t worry about Transpiling as Visual Studio will take care of this.
Now we know the basics of TypeScript, lets get started.
Setting up project in Visual Studio:
- Create a new Web Site project in Visual Studio.
- As we are going to Transpile TypeScript files to jScript files, create a new folders ‘ts’ and ‘js’ for code manageability.
- ‘ts’ folder is where we write the TypeScript, ‘js’ folder is where the transpiled jScript resides.
- Next, to transpile TypeScript to jScript, add a new json file with name ‘tsconfig.json‘.
- Paste following statements and save.
{
“compileOnSave”: true,
“compilerOptions”: {
“outDir”: “js”,
“target”: “es5”,
“sourceMap”: true
},
“include”: [
“./ts/**/*”
]
}
- Your ‘tsconfig.json’ should look like below.
- If you observe the ‘tsconfig.json’ statements, they state that whenever you save ‘.ts’ file compile (i.e., compileOnSave’) and save the transpiled ‘.js’ file under ‘js’ folder (i.e., outDir).
- Next, lets install the ‘xrm’ npm package for intellisence to your project. Refer this article for more details.
- Run ‘–save @types/xrm‘ command.
- You would see a new folder ‘node_modules’ with ‘index.d.ts’ file.
- If you are wondering what is ‘index.d.ts’, ‘*.d.ts’ files are used to provide typescript ‘Type’ information.
Write your first TypeScript file:
Now that we got the project setup, lets write a simple ‘TypeScript’ file with ‘onload’ function on ‘Contact’ entity.
- Add a new file ‘contact.ts’ under ‘ts’ folder.
- Lets adding following basic structure contains ‘interface’ and ‘onload’ function.
- A namespace is a way that is used for logical grouping of functionalities. It allows us to organize our code in a much cleaner way.
- Now, lets extend the onload function by reading Contact Name from ‘name’ field and popup.
- Lets extend further by registering ‘onchange’ event on ‘Contact Name’ field.
- Save the ‘contact.ts’ file and you would get transpiled ‘contact.js’ jScript file under ‘js’ folder.
- Following the TypeScript code if you want to use.
namespace Pract {
export function onload(executionContext: Xrm.Events.EventContext) {
let formContext = executionContext.getFormContext();// Define ‘String Attribute’ variable to read Contact Name Attribute
let attrContactName: Xrm.Attributes.StringAttribute;
attrContactName = formContext.getAttribute<Xrm.Attributes.StringAttribute>(“firstname”);// Register onchange event
attrContactName.addOnChange(this.contactName_onchange);// Read Attribute Value
let contactName = attrContactName.getValue();var alertStrings = { confirmButtonLabel: “Yes”, text: contactName, title: “Onload Event” };
var alertOptions = { height: 120, width: 260 };
Xrm.Navigation.openAlertDialog(alertStrings, alertOptions).then(
function success(result) {
console.log(“Alert dialog closed”);
},
function (error) {
console.log(error.message);
}
);
}function contactName_onchange(executionContext: Xrm.Events.EventContext) {
alert(“OnChange triggered!”);
}
}
Register and test the script:
- Add the transpiled ‘contact.js’ file as web resource to Dynamics application.
- On ‘Contact’ form register the ‘onload’ event. Convention should be ‘namespace.functionname’ (i.e.,Pract.onload).
- Open the ‘Contact’ record and you would get the ‘Name’ value as pop-up.
🙂
HTML & JScript – Read and Encode file
We got a requirement in ADX portal, to read and convert the file content to Base64String , which eventually will be submitted to an external API.
Below is the code snippet to read the File content, browsed using the HTML ‘File Upload’ control:
function readFileAsText(){
try {
// Read the browsed file from ‘File Upload’ control.
var fileToLoad = document.getElementById(“fileOE“).files[0];var fileReader = new FileReader();
fileReader.onload = function (fileLoadedEvent) {
// Set the file content to variable
var textFromFileLoaded = fileLoadedEvent.target.result;
alert(“File Content – ” + textFromFileLoaded);// Using ‘window.btoa’ encode the plain text to Base 64
var convertedString = window.btoa(unescape(encodeURIComponent(textFromFileLoaded)));
alert(“Base 64 content – ” + convertedString);
};fileReader.readAsText(fileToLoad, “UTF-8”);
} catch (e) {
alert(“Error in readFileAsText(); Error – ” + e.description);
}
}<body>
<label for=”fileOE”>Pick the file </label><br>
<input type=”file” id=”fileOE” />
<input type=”button” value=”Upload” onclick=”readFileAsText()” />
</body>
- Execute the code and you will get output as below
File content as text
Encoded File Content (Base 64)
🙂
D365 – Multi Select Option set JScript Syntax
In this article I am going to provide JScript syntax’s to use in projects.
Refer my previous article on configuring Multi Select Option set fields.
// Read the values
var branches = Xrm.Page.getAttribute(“new_branches”).getValue();
Xrm.Utility.alertDialog(“Branches – ” + branches, null);// Set the values (i.e., Hyderabad,Chennai)
Xrm.Page.getAttribute(“new_branches”).setValue([100000000, 100000001]);// Determine if the option is selected
// Non-IE Browser
var isCitySelected = Xrm.Page.getAttribute(“new_branches”).getValue().includes(100000000);// IE Browser
var isCitySelected = Xrm.Page.getAttribute(“new_branches”).getValue().indexOf(100000000)>=0;
Xrm.Utility.alertDialog(“Is City Selected – ” + isCitySelected, null);
// Clear the values
Xrm.Page.getAttribute(“new_branches”).setValue(null);
Create a web resource with these syntax’s and map to the form.
🙂
Build Auto Complete Text Box using Jscript – CRM 2016
In CRM 2016, we got showAutoComplete and hideAutoComplete methods to configure the auto-completion experience in text controls in forms.
In this article, I am going to configure “Auto Complete” feature for my “Locality” text box on my Account form.
Auto Complete Localities
JScript:
function suggestLocality() {
// List of sample Locality names to suggest
accounts = [
{ name: ‘AA Street’, code: ‘A01’ },
{ name: ‘AB Street’, code: ‘A02’ },
{ name: ‘AC Street’, code: ‘A03’ },
{ name: ‘Benetten street’, code: ‘A04’ },
{ name: ‘Beverly Hills’, code: ‘A05’ },
{ name: ‘City Street’, code: ‘A06’ },
{ name: ‘City Power & Light’, code: ‘A07’ },
{ name: ‘Aruna Street’, code: ‘A08’ },
{ name: ‘Winery Street’, code: ‘A09’ },
{ name: ‘Coho Vineyard & Winery’, code: ‘A10’ },
{ name: ‘Zeebra Street.’, code: ‘A11’ }
];var localityKeyPress = function (ext) {
try {
var userInput = Xrm.Page.getControl(“raj_locality”).getValue();
resultSet = {
results: new Array(),
commands: {
id: “sp_commands”,
label: “Explore CRM”, // Help link text
action: function () {
window.open(“http://rajeevpentyala.com”); // Help link URL
}
}
};// Read the ‘Text’ entered in Locality field.
var userInputLowerCase = userInput.toLowerCase();
for (i = 0; i < localities.length; i++) {
if (userInputLowerCase === localities[i].name.substring(0, userInputLowerCase.length).toLowerCase()) {
resultSet.results.push({
id: i,
fields: [accounts[i].name]
//, icon:<url> — Its an option field. You can show icon next to the Auto populated text.
});
}
if (resultSet.results.length >= 10) break;
}if (resultSet.results.length > 0) {
// If matches found; Show the Auto complete text area with matched localitites (i.e., Up to 10)
ext.getEventSource().showAutoComplete(resultSet);
} else {
// If no match found; Hide the Auto complete text area.
ext.getEventSource().hideAutoComplete();
}
} catch (e) {
alert(“Error while auto complete – ” + e.description);
}
};// Attach Key Press event to ‘Locality’ text box
Xrm.Page.getControl(“raj_locality”).addOnKeyPress(localityKeyPress);
}
How do I use it:
- Copy the “suggestLocality” function and create a web resource in CRM.
- Register the “suggestLocality” function on onload event of Account form.
Auto Complete Onload Event
- Publish the Customization’s.
- Open an Account and start typing in “Locality” text box.
Auto Complete Localities
- You can extend the script by instead of hard coding Localities, you can read from any existing entity and populate the list.
Important Notes on Auto Complete feature:
- “Auto Complete” show up to 10 matching strings in a drop-down list as users press keys to type character in a specific text field.
- These methods aren’t supported for the CRM mobile clients (phones or tablets).
🙂
Script error with navigate() statement while navigate between forms – CRM Jscript
We have a Custom entity with 3 forms and the requirement is to navigate to a different form based on a field value .
So we registered a script on form ‘load’ event to navigate to a specific form based on an option set value.
Navigation worked as expected except few user’s that too when application should take User to ‘Form 2’.
Reason and Fix
- We configured new Security Roles recently.
- Our forms were role based and we missed enabling newly added “Security Role” for ‘Form 2’.
Role Based Forms Screen
- By enabling newly added Security Role for ‘Form 2’ script started working.
🙂
CRM 2015 – Useful JScript Snippets and Syntaxes
Below are the list of useful scripts and syntax’s
Filter look up records
Let’s consider a scenario, “Primary Contact” lookup on Account form should display only Contacts with “Business Phone” (i.e., Contact.telephone1 != Null)
Steps :
- Add PreSearch event for ‘Primary Contact’ lookup
- In the event handler define Filter and set to the lookup using ‘addCustomFilter’ method
Script:
// Attach below ‘onload’ function to Form onload event
function onload() {
Xrm.Page.getControl(“primarycontactid”).addPreSearch(filterCustomerContacts);
}
function filterCustomerContacts() {
//Only show Contacts with ‘Business Phone’
var primaryContactFilter = “<filter type=’and’><condition attribute=’telephone1′ operator=’not-null’ /></filter>”;
Xrm.Page.getControl(“primarycontactid”).addCustomFilter(primaryContactFilter, “contact”);
}
Filter Primary Contact Lookup
Get fields of specific types
One of my blog follower asked this question “How to get list of all Option Set fields placed on the form?”.
Below is the Script to get Attributes based on Type or Requirement Level using “Xrm.Page.data.entity.attributes.forEach”
Script:
function onload() {
var requiredAttributeNames = [];
var optionsetAttributeNames = [];
Xrm.Page.data.entity.attributes.forEach(
function (attribute, index) {
if (attribute.getRequiredLevel() == “required”) {
requiredAttributeNames.push(attribute.getName());
}
if (attribute.getAttributeType() == “optionset”) {
optionsetAttributeNames.push(attribute.getName());
}
});
alert(“Required Attributes on the form are : ” + requiredAttributeNames.join());
alert(“Attributes of Type Optionset on the form are : ” + optionsetAttributeNames.join());
}
Callback functions on Save
Saves the record asynchronously with the option to set callback functions to be executed after the save operation is completed.
Script
Xrm.Page.data.save().then(successCallback, errorCallback);
successCallback() {
alert(“Form saved !!!”);
}
function errorCallback(saveErrorResponse) {
if (saveErrorResponse != null) {
if (saveErrorResponse.message != ‘undefined’ && saveErrorResponse.message != null) {
alert(“Error on Save – ” + saveErrorResponse.message);
}
}
}
Get control placed on Header
- var nameControlInHeader = Xrm.Page.getControl(“header_{fieldname}”);
Get control placed in business process flow
- var nameControlInBPF = Xrm.Page.getControl(“header_process_{fieldname}”);
- We can get controls in the active stage.
Hide\Show time portion of Date Control
- Page.getControl(“createdon”).setShowTime(true/false);
Syntaxes
- getUserPrivilege – When field level security has been applied to an attribute, determine whether a user has privileges to perform create, read, or update operations on the attribute
Xrm.Page.getAttribute(“name”).getUserPrivilege().canUpdate;
- getMin – Get the minimum allowed value for an attribute that contains a number
Xrm.Page.getAttribute(“creditlimit”).getMin()
- getMax – Get the maximum allowed value for an attribute that contains a number
Xrm.Page.getAttribute(“creditlimit”).getMax()
- getIsPartyList – Determines whether an attribute is a partylist.
Xrm.Page.getAttribute(“to”).getIsPartyList()
- getAttributeType – Get the type of attribute (i.e., Option set,Text etc…)
Xrm.Page.getAttribute(0).getAttributeType()
- getFormat- Get attribute’s format. (i.e., Text,URL,Email etc…)
Xrm.Page.getAttribute(0).getFormat()
- getInitialValue – Get the initial value of a Boolean or Optionset attribute
Xrm.Page.getAttribute(“address1_addresstypecode”).getInitialValue()
- getMaxLength – Get the maximum allowed length for an attribute that contains a string
Xrm.Page.getAttribute(“name”).getMaxLength()
- alertDialog – Display a non-blocking alert dialog with a callback function.
var alertDisplayed = false;
Xrm.Utility.alertDialog(
“Showing Alert”,
function () { alertDisplayed = true; }
)
- confirmDialog – Display a Non-blocking Confirm dialog with different callbacks depending on the button clicked by the user.
var agree = false;
Xrm.Utility.confirmDialog(
“Do you agree?”,
function () { agree = true;},
function () { agree = false; }
);
🙂
Exclude namespaces from XML using Jscript
In one of my requirement I had to parse XML and find node values.
My XML looks as below
<NS1:Envelope xmlns:NS1=“http://schemas.xmlsoap.org/soap/envelope/“>
<QueryBalanceResult>
<NS1:AvailableCredit>17400</NS1:AvailableCredit>
</QueryBalanceResult>
</NS1:Envelope>
Since the XML has got namespaces I need to exclude namespaces before I find the node.
Below is the logic to exclude namespaces
var xmlWithNamespaces={Your xml with namespaces};
var xmlWithNoNamespaces= xmlWithNamespaces.replace(/<(\/?)([^:>\s]*:)?([^>]+)>/g, “<$1$3>”);
🙂
Identify “Auto Save” in JScript onload & onsave events – CRM 2013
CRM 2013 has got a new ‘Auto Save” feature which periodically saves the form after new data entered.
Problem with frequent auto save
- The problem with this design is whenever auto-save fires, it causes unwanted execution of the registered onload & onsave events.
To identify ‘Auto Save’ event in ‘onload & onsave’ below is useful approach
On Save
- Check the ‘Save Mode’ of ‘Event Args’, If Save Mode is ‘70’ then save event is caused by ‘Auto Save’
- Make sure to check ‘Pass execution context as first parameter’ while registering ‘onsave’ event
Passing execution context
function onsave(eventArgs) {
var saveMode = eventArgs.getEventArgs().getSaveMode();
// 70 – AutoSave
if (saveMode == 70) {
alert(“Save caused by AutoSave”);
// By setting Form dirty, we will make sure the traditional save event executes when you click on ‘Save’ button
Xrm.Page.data.setFormDirty(true);
}
else {
alert(“Traditional Save event”);
}
}
Note –
- Since the ‘AutoSave’ periodically saves the form data, you might not get traditional ‘onsave’ event fired.
- If you want your logic to be executed in traditional ‘onsave’ event, set form dirty to ‘true’ in ‘AutoSave’ save mode.
On Load
‘onload’ event caused by ‘AutoSave’ does not clears the global variables. So use below steps to check ‘AutoSave’ event on ‘onload’
- Declare and set a global variable
- Check the variable on onload event
var formLoaded = false;
function onload() {
if (!formLoaded) {
alert(“Traditional form load happend !!!”);
}
formLoaded = true;
}
- Above function the ‘If’ block executes only first time when you open the form
🙂
Xrm.Utility is undefined error – CRM 2011
Other day when I deployed my solution on a new CRM server, I was getting “Xrm.Utility is undefined” script error.
I refered“Xrm.Utility” JScriptin my code to open forms which was causing script issue.
Reason & Fix
- The CRM server is not having UR 8
- Since Xrm.Utility object was added in CRM 2011 Update Rollup 8, installing UR 8 on server solved the issue
🙂
event.returnValue is not working after UR 12 – Fix
We use event.returnValue=false statement, to stop the event execution. (i.e., I can stop my crm form’s save action, if I write event.returnValue=false statement on my onsave() event).
After I upgraded to UR12, I was getting script error, if I use the event.returnValue statement.
Reason
- Update Rollup 12 and December 2012 Service Update support additional browsers by generating HTML that supports W3C standards.
- This requires removing dependencies on HTML components (HTC) that are specific to Internet Explorer.
- Hence event.returnValue statement has been deprecated
Fix
- Use context.getEventArgs().preventDefault() function to cancel the event execution
How do I use this
- First to get “context”, enable the OnSave event handler to pass the execution context as the first parameter to the OnSave event handler.
- Open customization form -> Form Properties and in “Handler Properties” window, select the “Pass execution ….” checkbox
-
Pass execution context
- Next in your Jscript , read the context as first parameter
function onsave(context) {
// Prevent the event execution
context.getEventArgs().preventDefault();
}
Get more details on latest CRM JScript changes from this link
🙂
