How To Open Popup Using Client Side JavaScript In CRM

While working on CRM HTML/JS Web resources, we often need to open a popup with our own custom controls. In this blog, I will explain how to open a popup dialog form easily through JavaScript. Though we can do it with our custom code as well, I found a tool, which will make things much quicker and provides a wide range of functions to deal with many CRM methods, which we need often. AlertJS is JS based tool, which we will use to open popup in CRM with our own HTML UI.

First, you can download the unmanaged or managed solution of AlertJS from this link, https://alertjs.codeplex.com. The AlertJS is not just helping with opening our HTML Web resources as popup dialog but it is much more than that. It also supports to show/hide alerts with a more rich look and also the loading image on AJAX calls. You can also open Iframe inside the popup instead of Web resource. You can check the "Documents" section for more detail about each function to get familiar with them.

The method which we will use in our example is Alert.showWebResource with the required parameters passed in the method.

For this example, I will open Event list in popup while "Edit Event Order" checkbox is checked (shown in Image 1 given below). It will open my custom HTML Web resource with Event list displayed in sortable rows.

Following is the image in the Event custom grid.

Image 1 displays main Form with "Edit Event Order" checkbox.

Now, click on Edit Event Order check box and you will have the screenshot, as shown below.

Now to achieve this, the code snippet is given below to open a popup dialog (i.e., Event Sort Order) using Alert.js and simple jQuery methods.

function ShowAlert()
{
var isEdit = Xrm.Page.getAttribute("editeventorder").getValue();
var alertButton = new Alert.Button();
alertButton.label = "Close";
alertButton.callback = onAlertCloseButtonClick;
var array = new Array();
array.push(alertButton);
if(isEdit)
{
Alert.showWebResource("_/EventSortOrder", 450, 500, "Event Sort Order", array, null, true, 10);
}
else
{
HideAlert();
}
}
function HideAlert()
{
Alert.hide();
}
function onAlertCloseButtonClick(args)
{
Xrm.Page.getAttribute("editeventorder").setValue(false);
Xrm.Page.data.entity.save();
}

How do I call this method

Install unmanaged/managed solution of AlertJS downloaded from the given link.
Add “Jquery.js” helper script files as Web resource.
Create a new JS Web resource (i.e., “AlertUtility.js”)
Copy & paste the code given above inside it.
Add “AlertUtility.js” as a Web resource in CRM.
Add “ShowAlert” function to form onChangeEvent (please check the screenshot given below).

Save & Publish
When you checked a check box, it will fire "ShowAlert()" function, which will then open Web resource, using Alert.showWebResource method.

The Alert.ShowWebResource method has parameters given below, which are available to pass in it. The parameters provides support to set the size of the popup Window by width and height. You can also set Title, Buttons, PreventCancel (whether to close popup on click on X button or not) and Padding (in pixels) around the Web resource.

e.g. Alert.showWebResource("_/EventSortOrder", 450, 500, "Event Sort Order", array, null, true, 10);

For quick understanding, I am explaining each parameter in brief for the showWebResource function here.

Parameters

Web Resource Name
Type String. The schema name of HTML Web resource to display inside the alert.
Width
Type String. The width of the dialog in pixels. If not specified, this will default to 800px.
Height
Type Number. The height of the dialog in pixels. If not specified, this will default to 600px.
Title
Type string. An optional title to display at the top of the Web resource. If not specified, the Web resource will expand to the top of the alert. I set "Event Sort Order" as title in my example.
Buttons
Type Array of Alert. Button objects. The buttons will display at the bottom of the Web resource. If this is set to null, no buttons will be displayed (i.e. if the buttons are managed inside the Web resource).
Base URL
Type String. The CRM Server base URL. It is not required, if you are working in CRM forms or views. If not specified, it will default to Xrm.Page.context.getClientUrl(). It must be specified where Xrm. Page is not available, e.g. from Web resources.
Prevent Cancel
Type string. Specify whether the 'X' to close the alert should be hidden, preventing the user from closing the alert without using one of the specified buttons. By default, the 'X' will be displayed, so to hide the 'X', set this to true.
Padding
Type Number. Specify custom padding around the popup (in pixels).If not specified, or set to null, this will default to 0px.

If you have any confusion about AlertJS tool or its use and Microsoft CRM development, then let the experts know. You can make comments below for that and wait for their response.