Calling custom JavaScript function from Web Resource on parent page

When developing web resources that are embedded on a CRM form, you sometimes have to call a function on the parent form. In the past (prior to CRM 2016), you could simply call the function by using parent.myFunction(), however that logic does not work anymore.

In CRM 2016 or Dynamics 365, we can only call the Xrm functions on the parent page such as Xrm.Utility...

In order to be able to address the issue that we have, the first thing that we need to do is create a new function on the parent JavaScript web resource that utilizes the Xrm namespace, such as Xrm.Utility.MyFunction:

Xrm.Utility.myFunction= function()
{
    var stage = new Object();
    stage.number = stageNumber;
    stage.name = stageName;
    return stage;
}

 Once we created this function, we can modify our Html Web Resource, and call the function in the following way:

var stage = parent.Xrm.Utility.getStage();
if (stage.number > 0)
{
   // Change Stage
}
else
{
   // Set Default Stage
}