JavaScript – Nishant Rana's Weblog

JavaScript Gotcha: Why [x == (a || b)] Fails

Recently we observed that our JavaScript code was not working as expected.

Now when we write conditions in JavaScript, it’s natural to want to check if a variable equals one of multiple values. A common mistake is to write the condition like this:

if (loanType == (CareFeeDeferralFeesShort || CareFeeDeferralFeesLong)) {
    // do something
}

At first glance, it seems like this would check if ‘loanType’ is equal to either ‘CareFeeDeferralFeesShort’ or ‘CareFeeDeferralFeesLong’`’. Unfortunately, that’s not what JavaScript actually does.

The ‘||’ operator in JavaScript doesn’t return a boolean. Instead, it returns the first truthy value it encounters.

For example:

console.log(1 || 2); // 1

console.log(0 || 2); // 2

So in our case:

If ‘CareFeeDeferralFeesShort’ is ‘1’, then ‘(CareFeeDeferralFeesShort || CareFeeDeferralFeesLong)’ becomes ‘1’.

If it’s ‘0’ (falsy), then the expression becomes ‘CareFeeDeferralFeesLong’.

This means the condition effectively reduces to checking only one value, not both.

The right way is to compare the variable separately against both values:

if (loanType == CareFeeDeferralFeesShort ||
    loanType == CareFeeDeferralFeesLong) {
    // do something
}

Here, JavaScript evaluates each equality independently:

‘loanType == CareFeeDeferralFeesShort’

‘loanType == CareFeeDeferralFeesLong’

If either is true, the whole condition passes.

Takeaway

(x == (a || b)) is not the same as `x == a || x == b`.

Hope it helps..

Using gridContext.refreshRibbon() to Dynamically Show/Hide a Subgrid Ribbon Button – Dynamics 365 / Dataverse

In Dynamics 365 / Dataverse, sometimes we want to show or hide a ribbon button based on a form field value. But when the button is on a subgrid, it does not refresh automatically when a field changes on the form. We can handle this requirement using gridContext.refreshRibbon(). It is a small but very useful method that helps to refresh the subgrid ribbon without saving or reloading the form.

Here we are taking a simple scenario to understand the usage.

We will only show the New Case button on the Case Subgrid if the Preferred Method of Contact = Any else we will hide it.

A screenshot of a computer

AI-generated content may be incorrect.

Below is our JavaScript function to check the field value and return true or false. This function will be used as CustomRule for our Add New button command’s EnableRule on the subgrid. This function checks if the Preferred Method of Contact is ‘Any’. If yes, it returns true. Otherwise, it returns false.

A screen shot of a computer code

AI-generated content may be incorrect.

We are passing CRM Parameter = PrimaryControl here.

Depending on where the button lives (Form ribbon or Subgrid ribbon), the correct context is passed.

On a form: PrimaryControl is the formContext.
On a Subgrid: PrimaryControl gives the context of the parent form hosting the subgrid.

Below we have customized the Add New Subgrid button for Case and added a new Enable Rule for its command.

Now on the form load, the Add New button on the subgrid will be hidden on the form load event.

But when we change the value for the Preferred Method of Contact we will not see any effect on the Add New button. For it to work we need to use the refershRibbon method of the grid’s context as shown below.

We added it on the onChange event for the Preferred Method of Contact field so that when a user changes it, the subgrid ribbon refreshes.

Now, when a user changes the Preferred Method of Contact, the subgrid ribbon will refresh and check again if the button should be visible.

As a result, now the Add New button appears on the Case subgrid when the Preferred Method of Contact is ‘Any’.

The ribbon refreshes immediately when the field changes to Email or any other value except Any.No need to save or reload the form.

JavaScript –

function showAddNewButtonOnCaseSubgrid(primaryControl) {
    var formContext = primaryControl;
    var preferredMethod = formContext.getAttribute("preferredcontactmethodcode");    
    var preferredMethodValue = preferredMethod.getValue();
    // Check if Preferred Method is 'Any' 
    if (preferredMethodValue === 1) {
        return true;
    }
    else {
        return false;
    }
}
function refreshCaseSubgridRibbon(executionContext) {
    var formContext = executionContext.getFormContext();
    var gridContext = formContext.getControl("Subgrid_Cases");  
    if (gridContext) {
        gridContext.refreshRibbon();  
    }
}

The helpful post – https://butenko.pro/2019/04/16/refreshing-the-ribbon-form-vs-grid/

Hope it helps..

Getting started with TypeScript

TypeScript is an open-source programming language developed and maintained by Microsoft.

TypeScript adds Type support to JavaScript, which makes sure type checking is done resulting in fewer bugs, adds autocomplete supports in the TypeScript editor, supports Object Orientation and structuring and packing of the code, etc.

The code written in TypeScript transpiles to JavaScript by TSC i.e. TypeScript Compiler.

The easiest way to install TSC is to install it as a Node.js package using NPM i.e. Node Package Manager at the command line.

Download and install Node.js first if it is not already installed.

https://nodejs.org/

Make sure to include Node.js runtime and npm package manager.

Now to install TSC, open the terminal and type the below command

npm install -g typescript

g makes sure that it is installed globally and not just in the directory from which we are running the command.

There are different editors available for TypeScript

Let us see how to configure TypeScript for Visual Studio Code.

Download link for Visual Studio Code (if not already installed)

https://code.visualstudio.com/

Open Visual Studio Code and select the working folder or

in Node.js command prompt, create the directory and open the visual studio code from there

From file explorer in Visual Studio Code, create the new .ts file

Create the typescript file with the extension .ts and add the JavaScript code

To compile the TypeScript code, open the integrated Terminal in Visual Studio Code and type

tsc <<FileName.js>>

This creates a new corresponding JavaScript file for the TypeScript file.

To run it use the node command

node <<filename>>

We can also modify the TypeScript compiler’s default behavior by adding tsconfig.json.

Here we have added tsconfig.json file in the project with the following code

Check below link for different compilerOptions

https://www.typescriptlang.org/docs/handbook/compiler-options.html

To configure the build, execute Run Build Task…

As we have created the tsconfig.json file earlier, we will be presented with the following option

Select tsc: build to run the build task.

If tsc: watch is selected the compiler will watch for the changes in TypeScript files and runs the transpiler whenever the changes are saved.

To set the build or watch task as default, select Configure Default Build Task from the Terminal menu.

On selecting tsc: build task, tasks.json file is added inside .vscode

This sets build task as default, so now when we run the Run Build Task, we are not prompted to select a task.

This completes the basic environment setup for using TypeScript with Visual Studio Code.

Hope it helps..

Upgrade to new Xrm client API object model (v9) smoothly using XrmToolBox plugins

We are currently in process of upgrading Dynamics from version 8.2 to 9.0. One of the major change is updating our current JavaScript to the new Xrm Client API Object Model.

https://docs.microsoft.com/en-us/dynamics365/get-started/whats-new/customer-engagement/important-changes-coming#some-client-apis-are-deprecated

https://docs.microsoft.com/en-us/dynamics365/customer-engagement/developer/clientapi/understand-clientapi-object-model

Below are the most useful tools à

Dynamics 365 V9 JavaScript Validator by Michel Gueli

Install the plugin, connect to your organization and click on Retrieve Jscript Webresources, it will list all the JScript Web resources found.

Click on Scan

It will list down all the issues found.

Script Finder

One common change that we need to do across all our JScript is to pass the ExecutionContext from Form as well as Fields (and Ribbon) events. Script Finder makes it extremely easy to find them out.

Click on Find Scripts usage and it will generate a report with all the details as shown below