Developing Dynamics 365 CE Forms with TypeScript and Visual Studio#

Create a TypeScript Project#

1. Open Visual Studio and create a new TypeScript project
2. Configure the tsconfig.json file:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Install @types/xrm#

Run in your project directory:

npm install --save-dev @types/xrm

This provides type definitions for Dynamics 365, enabling IntelliSense and type checking.

Write TypeScript Code#

Create a TypeScript file (e.g., dynamics365-form.ts):

import { PageExecutionContext } from '@types/xrm';

namespace MyD365FormValidation {
    export function onLoad(executionContext: PageExecutionContext): void {
        const formContext = executionContext.getFormContext();
        
        // Access form fields
        const accountName = formContext.getAttribute("name").getValue();
        console.log(`Account Name: ${accountName}`);

        // Example field validation
        const creditLimit = formContext.getAttribute("creditlimit");
        if (creditLimit.getValue() > 100000) {
            formContext.ui.setFormNotification(
                "Credit limit exceeds maximum threshold", 
                "ERROR", 
                "credit-limit-error"
            );
        }
    }

    export function onSave(executionContext: PageExecutionContext): boolean {
        const formContext = executionContext.getFormContext();
        // Add save validation logic
        return true; // Return false to prevent save
    }
}

export { MyD365FormValidation };

Compile TypeScript#

Run the TypeScript compiler:

tsc

This generates JavaScript files in your dist folder.

Upload to Dynamics 365#

1. Navigate to your Dynamics 365 environment
2. Open the form editor for your entity
3. Add a new web resource:
   • Name: new_/js/dynamics365-form.js
   • Type: Script (JScript)
   • Upload your compiled JavaScript file
4. Add event handlers to call your functions:
   • Form OnLoad: MyD365FormValidation.onLoad
   • Form OnSave: MyD365FormValidation.onSave

Best Practices#

1. Type Safety: Leverage TypeScript interfaces for form attributes
2. Modular Code: Organize code into logical namespaces
3. Error Handling: Implement error handling
4. Source Control: Maintain version control for source

Example TypeScript Interface#

interface AccountFormContext extends Xrm.FormContext {
    getAttribute(attributeName: "name"): Xrm.Attributes.StringAttribute;
    getAttribute(attributeName: "creditlimit"): Xrm.Attributes.NumberAttribute;
    getAttribute(attributeName: "createdon"): Xrm.Attributes.DateAttribute;
}

// Usage with typed context
const typedFormContext = formContext as AccountFormContext;
const createdDate = typedFormContext.getAttribute("createdon").getValue();

This approach provides better IntelliSense and compile-time checking for your Dynamics 365 form development.