Step 0 – What we want to do

The standard dialog process looks really ugly. There’s a huge window opening by clickin’ a button and the user sees a big white page. It looks like a beast. So let’s find the right code to make this dialog a beauty again, before the last leaf of the rose falls down to the floor.

The beast:

The beauty:

This is our company:

As you can see on top, I created a button labeled ‘VERBZUTEST’ with which I want to start my dialog to add this single company to a group of company.

Step 1: Javascript for visibility

I want to show this button only, if the form label is “Übersicht UK”. For that, I wrote the following Javascript and added it as a webresource to CRM.

function controlRibbonVerbundZuordnen() {

var formLabel;

var currForm = Xrm.Page.ui.formSelector.getCurrentItem();

formLabel = currForm.getLabel();

if (formLabel == "Übersicht UK") {

return true;

}

else {

return false;

}

}

We will need this Code for our Enable Rule.

Step 2: Call / start the dialog process (Javascript)

We need a function which serves us as a command (for Ribbon Workbench) to start our dialog. I want to have a small window first, which asks me, if I do really want to add this company to the group of companies. If I say yes (ja), then start the dialog, if I say no (nen), then cancel. Here is where we start to create our beauty:

function ja() {

 console.log("function yes started");

var dialogId = "CA79402A-B5C0-43DC-84DF-423BF34A7057";
 console.log("dialogId is: " + dialogId);

var entityName = "account";
 console.log("entityName is: " + entityName);

var width = 800;
 console.log("width ist: " + width);

var height = 600;
 console.log("height is: " + height);

baseUrl = Xrm.Page.context.getClientUrl();
 console.log("baseUrl ist: " + baseUrl);

var recordId = Xrm.Page.data.entity.getId();
 recordId = recordId.replace("{", "");
 recordId = recordId.replace("}", "");
 recordId = recordId.replace("%7b", "");
 recordId = recordId.replace("%7d", "");
 console.log("recordId ist: " + recordId);

 Alert.showDialogProcess(dialogId, entityName, recordId, function () { Xrm.Page.data.refresh(); }, width, height, baseUrl);

}

function nein() {

 console.log("Function No started");

return;

}

Perhaps, I need to explain some details:

• dialogId is the ID of your dialog process. The ID is hidden in the url of your dialog.
• entityName is in my case the ‘company itself’, the general thing. The account.
• recordId is not in general the company or any company, it’s my ‘Company ABC’.
• width / height is the number of pixels for your beauty-window.
• baseUrl is your general URL from where you do start your dynamics

Step 3: Download Alert.js library

In Step 2, we are calling the function ‘Alert.showDialogProcess’. This is a function out of a library called ‘Alert.js’. So if you do not already have this library, you need to import it as a solution. You can download this library from here: Library Alert.js

Step 4: Import Alert.js to solutions

After downloading the zip-file, you can go in CRM to your settings – solutions and press ‘import’:

Step 5: Load Alert.js in company form

I honestly don’t really know if this step is really necessary, but it worked like this, so it does not hurt to follow this step. If the user opens the form label where your button is shown, the form label has to know your library Alert.js. Go to the form properties and add the library to be loaded:

Step 6: Create a button in Ribbon Workbench

You can create a button in Ribbon Workbench, mine is labeled ‘VERBZUTEST’. We will create the command later, so first, you have to create the button without the command:

Step 7: Our Command for Ribbon Workbench

The button itself is useless without a command who tells our button what to do. So you press the little “+” and create a new command like this:

Pay attention to insert a Custom Javascript Action for alert.js first, cause this library should be loaded fully before going on and using functions out of this library. The second Custom Javascript Action is the one out of Step 2.

Enter this Command to your button (Step 6) and be aware, that you can add the enable-rule only after having created it in Step 8.

Step 8: Enable-Rule

For now, our button knows what to do, but not when to show or not. That’s why we do need an enable-rule with our Code out of Step 1:

Add the enable-rule to your command in Step 7 and don’t forget to publish your changes.