Dev Best Practice (and common sense), dynamics 365, Dynamics 365 - new UI, Uncategorized

Fixing the ribbon button issue for a new Dynamics 365 UI

The issue

After changing to a new UI a custom web resource launched from a custom button of the ribbon bar stopped receiving parameters.

This leads to the incorrect page layout generation and other issues which are based on the missing parameter.

The diagnostics

There are things to consider while performing re-work on the page:

  • The Command selected to launch the web resource is not the best solution according to the best practice. We will replace the URL command with JavaScript .
  • The latest CRM forms scripting framework changes have to be accommodated
  • The way to pass parameters from the parent form to the web resource should be the working scenario for both UIs, old and new.

POC

This is how it’s gonna work after we implement the proof of concept:

Old UI

pic1

Pay attention to the query string. “Data” parameter contains entityId.

pic2

New UI

pic3

And here for the query string “data” parameter contains entityId.

pic4

The solution

1)Create a JavaScript library with a function as per the screen below:

pic5

var PO = window.PO || {};
PO.openHTML = function (primaryControl, commonProperties) {
    var formContext =primaryControl;
    if(formContext == null) return;
    var id = formContext.data.entity.getId();
    Xrm.Navigation.openWebResource("po_test.html",null, id);
};

2)Add the library to the Account form:

pic6

3)For the Account entity form ribbon using RibbonWorkbench change the Command type on Ribbon bar button to JavaScript. Add the library and the function references from the steps above. Add a CRM Parameter = PrimaryControl.

pic7

3)My test HTML code. The bit to highlight here is the parameter storing a record Id for old UI is “Data” and for new one “data”. We use .toLowerCase() function to manage this fact.

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    http://../ClientGlobalContext.js.aspx
    http://scripts/es6promise.js
    http://scripts/WebAPIFunctionsAndActions.js
    
    function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split('&');

            for (var i = 0; i decodeURIComponent(pair[0]).toLowerCase() == variable.toLowerCase()) {
                    return decodeURIComponent(pair[1]);
                }
            }
            alert('Query variable %s not found', variable);
        }
        alert(getQueryVariable("data"));
</head>
<body lang="en-US" style="overflow-wrap: break-word;">
    <h1>Test</h1>
</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s