Tag: JavaScript

Customizing Business Process Flows: Stage Validation Using JavaScript (Dynamics 365 / Dataverse)


Business Process Flows (BPF) in Dynamics 365 offer a structured way to guide users through a defined process. However, there are scenarios where progression to the next stage must be validated against specific business rules. In this blog, we see how to implement custom validations on stage progression using JavaScript.

Let us take a simple scenario where a Lead can only progress to the next stage of a BPF if

Lead Quality = Hot and Lead Source = Web

If these conditions are not met, users will receive a notification, and the stage change will be prevented.

Below is the sample code


function OnLoad(executionContext)
{
 var formContext = executionContext.getFormContext();
 formContext.data.process.addOnPreStageChange(validateStageProgression);
}


function validateStageProgression(executionContext)
{
	    var bpfSampleStage = "6e2b5d9e-da30-4a47-8ca9-d75c24fd51f4";
        var formContext = executionContext.getFormContext();
		var rating = formContext.getControl('header_process_leadqualitycode').getAttribute().getValue();
		var leadSource = formContext.getControl('header_process_leadsourcecode').getAttribute().getValue();
		var stageObj = formContext.data.process.getActiveStage();
        var stageId = stageObj.getId();
		var requiredFieldErrorId = "contractValidationNotificationId";
        formContext.ui.clearFormNotification(requiredFieldErrorId);
		
		if(stageId)
		{
			 if (stageId.toLowerCase() === bpfSampleStage)
			 {
				  if (executionContext.getEventArgs().getDirection() === "Next") 				  
				{
                    executionContext.getEventArgs().preventDefault();
					if(rating == 1 && leadSource == 8) // rating = Hot and Source = Web
					{
						formContext.data.process.removeOnPreStageChange(validateStageProgression);
                        formContext.data.process.moveNext();
					}	
					else
					{
						notificationMessage = "Cannot move to the next stage until conditions are met !";
						formContext.ui.setFormNotification(notificationMessage, "ERROR", requiredFieldErrorId)
					}
				}
			 }
		}
}

The addOnPreStageChange method registers the validation function on the form’s load event to monitor stage changes.

The preventDefault() method stops the stage transition if the conditions are not met, ensuring data integrity.

If the validation fails, an error notification is displayed using the setFormNotification() method, guiding users to correct the data.

Upon satisfying the conditions, moveNext() is invoked programmatically to move the process to the next stage.

As shown below, clicking on Next as rating and lead source values do not satisfy the condition, we can see the notification on the form and the user is not able to move to the next stage.

Also check – https://nishantrana.me/2024/10/09/use-javascript-to-enable-a-field-only-if-the-stage-is-active-in-business-process-flow-dynamics-365-dataverse/

https://nishantrana.me/2024/10/10/use-javascript-to-add-onchange-event-to-a-field-in-the-business-process-flow/

https://nishantrana.me/2024/10/23/javascript-for-fields-in-business-process-flow-few-key-points-dataverse-dynamics-365/

Hope it helps..

Advertisements

How to use the setIsValid Method in Dataverse / Dynamics 365


We can use the setIsValid method for validating field values in Model-driven apps. This method helps ensure that the data entered by users meets the required criteria before it’s processed or saved.

The setIsValid method is used to set the validity of a column’s value. It can mark a field as valid or invalid based on custom validation logic.

formContext.getAttribute(arg).setIsValid(bool, message);

bool: A Boolean value. Set to false to mark the column value as invalid, and true to mark it as valid.

message: (Optional) A string containing the message to display when the value is invalid.

Below we are using the setIsValid method in the function that ensures that the “End Date” is earlier than or equal to the “Start Date”, else it will mark the “End Date” as invalid. 

function validateDates(executionContext) {
    var formContext = executionContext.getFormContext();
    var startDate = formContext.getAttribute("custom_startdate");
    var endDate = formContext.getAttribute("custom_enddate");
  
    if (startDate && endDate && endDate.getValue() <= startDate.getValue()) {
        endDate.setIsValid(false, "End Date must be after Start Date.");
    } else {
        endDate.setIsValid(true);
    }
}

We have it registered in the On Change of the ‘Start Date’ and ‘End Date’ fields.

Here if we try saving the record, if the End Date is smaller than the Start Date, we will get the message specified.

Hope it helps..

Advertisements

Use JavaScript to enable / disable a field only if the Stage is Active in Business Process Flow – Dynamics 365 / Dataverse


Recently we had a requirement to set some of the fields in our business process flow to be enabled only if that stage is active.

E.g. We want to Identify Sales Team field to be Enabled only if the Propose stage is active, else we want to set it as read-only.

A screenshot of a computer Description automatically generated

We can use the below JScript to achieve the same.

A screen shot of a computer program Description automatically generated

Because the Propose stage is Inactive we have Identify Sales Team as read only.

A screenshot of a computer Description automatically generated

On moving to the Propose stage, we can see the field being enabled back.

A screenshot of a computer Description automatically generated

The key steps are –

In the onload of the form associate your function/logic to the OnStage change method of the Process object.

formContext.data.process.addOnStageChange(CheckStageAndToggleFieldBPF);

Next, check for the active stage ID.

Here to get the active stage ID, open the business process flow and get its Guid.

A computer screen with a green arrow pointing to a black box Description automatically generated

Then using the awesome SQL4CDS XrmToolBox plugin get the Guid of the particular stage.

A screenshot of a computer Description automatically generated
function OnLoad(executionContext)
{
	 var formContext = executionContext.getFormContext();
	 formContext.data.process.addOnStageChange(CheckStageAndToggleFieldBPF);
	 CheckStageAndToggleFieldBPF(executionContext);
}

 function CheckStageAndToggleFieldBPF(executionContext) {

        var formContext = executionContext.getFormContext();     
        var activeStage = formContext.data.process.getActiveStage();
        var activeStageId = activeStage.getId();		
        var stagePropose = "3a275c22-fc45-4e89-97fc-41e5ec578743";
     
        if (activeStageId.toLowerCase() === stagePropose) {          
                formContext.getControl("header_process_identifypursuitteam").setDisabled(false);                 
        }
        else {
            formContext.getControl("header_process_identifypursuitteam").setDisabled(true);
        }       
  }

select processidname,stagename, processstageid  from processstage 
where processid = '919E14D1-6489-4852-ABD0-A63A6ECAAC5D'

Also if we have the same fields used in multiple places / stages in the Business Process Flow, we will have the suffix added to the fields, so we need to refer the field appropriately in our script.

  • header_process_identifypursuitteam
  • header_process_identifypursuitteam_1
  • header_process_identifypursuitteam_2

Also check – https://www.c-sharpcorner.com/blogs/options-for-locking-field-on-business-process-flow

Hope it helps..

Advertisements

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..

How to – Showing Total in Footer in jqGrid.


Hi,

We recently had a requirement to show total for 2 of our decimal columns in jqGrid.

We need to set the following properties footerrow and userDataOnFooter and the a function on loadComplete of grid

Hope it helps..

Advertisements

Fixed – Grid can not be used in this (‘quirks’) model in jqGrid


We got the above error in an HTML Web Resource which was using jqGrid. The page was working fine in IE 10 browser only in IE 8 we got that error.

The solution was to use the following meta tag inside the HEAD tag of the html page.


<meta
http-equiv=”X-UA-Compatible”
content=”IE=edge”
/>

More details on this meta tag

http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e

Hope it helps.