Client Side

INFO

You can refer to Microsoft's Client API Reference for model-driven apps documentation

General

• Write separate files for main form(s) and ribbon
• Web resources are implemented as Javascript class

Example:

class Account {
  constructor() {
    console.log("loaded rtm_account.js");
  }
  onload(executionContext) {
    // onload code
    const formcontext.addOnSave(this.onsave)
  }
  onsave(executionContext) {
    // onsave code
  }
  // etc...
}
window.account = new Account();

Please read the Client API documentation to learn how to define event handlers.

CRM Definitions

Type	Template	Display Name	Logicalname	JS Class Name
Main	rtm_<entityname>.js	rtm_account.js	rtm_account.js	Account
Ribbon	rtm_<entityname>_ribbon.js	rtm_account_ribbon.js	rtm_account_ribbon.js	AccountRibbon

Working with Fiddler

INFO

The community-trusted free Windows-only tool that logs HTTP(s) network traffic.

We will be using Fiddler Classic. You can get it Here

Configuration

Go to Tools > Options > Https

• ☑ Capture HTTPS CONNECTs
• ☑ Decrypt HTTPS traffic
• Set Perform Decryption only for the following hosts:

*.crm4.dynamics.com

** Fiddler will ask you to trust it's certificate. So trust it 😊

Fiddler - Auto Responder

INFO

The Fiddler Auto Responder is a powerful feature in the Fiddler web debugging tool that allows you to create rules to automatically respond to HTTP requests with custom responses

In the right side of fiddler there are tabs of its tools goto AutoResponder and check the following settings:

• ☑ Enable Rules
• ☑ Unmatched requests passthrough

Rules

This example is for the account.js script

Add a new rule

• Set the url expression to: regex:(?inx).*/webresources/account.js
• Set the action to: C:\your\local\path\to\account.js

** you may need to clear the browser's cache to force it to refetch the script and use the one that fiddler's Auto Responder provides

XrmTypeScript

1. Download the Tool

Get the latest executable from the GitHub Releases page.

2. Configuration

The tool requires a XrmTypeScript.exe.config file in the same directory as the executable to connect to your environment and define output paths.

Filename: XrmTypeScript.exe.config

<appSettings>
  <add key="url" value="https://YOUR_ORG.crm4.dynamics.com" />
  <add key="method" value="ClientSecret" />
  <add key="clientId" value="YOUR_CLIENT_ID" />
  <add key="clientSecret" value="YOUR_CLIENT_SECRET" />
  <add key="out" value="../typings/XRM" />
  <add key="solutions" value="" />
  <add key="entities" value="account, contact" />
  <add key="web" value="true" />
</appSettings>

3. TypeScript Environment Setup

To ensure your IDE (VS Code / Visual Studio) correctly interprets the generated types, configure your tsconfig.json as follows:

Filename: tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "allowJs": true,
    //"checkJs": true,  // uncomment to get type errors in your JS files
    "moduleDetection": "force",
    "noEmit": true
  }
}

JSDoc Integration (JavaScript)

You don't need to write pure TypeScript to benefit from these types. Use @typedef to map the generated types to your form scripts.

/**
 * @typedef {Form.new_candidate.Main.טופס_מועמד_עדכני} form
 * @typedef {Xrm.ChangeEventContext<form>} onChangeContext
 * @typedef {(keyof Form.new_candidate.Main.טופס_מועמד_עדכני.AttributeMap)[]} attributes
 * @typedef {(keyof Form.new_candidate.Main.טופס_מועמד_עדכני.ControlMap)[]} controls
 */

Advanced Type Mapping

If you need to iterate over attributes or controls dynamically, you can extract the keys directly from the generated maps:

/**
 * @typedef {(keyof Form.new_candidate.Main.Information.AttributeMap)[]} CandidateAttributes 
 * @typedef {(keyof Form.new_candidate.Main.Information.ControlMap)[]} CandidateControls 
 */

/** @type {CandidateAttributes} */
const fieldsToHide = ["new_internalnotes", "new_ssn"];

Gitignore

Please make sure that all of the generated files and the XrmTypeScript tool are not committed to the source control