Dynamic navigation links using supported customizations
Views (1553)
Guido Preite
54,084
Moderator
Like
Share
Report
Consider for example the following scenario:
We need to add a link inside the left navigation panel to display an HTML Web Resource or an external URL, with CRM 2011 can easily done using the form editor as shown in the following figure
but is possible to build a dynamic URL? Yes, it is possible and more important can be done in a supported way.
First of all we create an HTML Web Resource, the page will build the dynamic URL and will display the desiderated page.
In this example we want to show the Bing results querying the name of the current account.
This is a supported customization, as explained in this page:
<NavBarItem> (FormXml)
The attribute we are looking for is "PassParams", we need to add and set to 1.
To edit the XML we create a new solution containing only the Account Entity, we export as unmanaged, modify the XML as shown below, and import back to the system.
This is the standard iframe src property created by CRM:
To retrieve the data we need the Xrm Context, because we are inside a Web Resource we need to include a reference to the ClientGlobalContext.js.aspx page as explained here:
GetGlobalContext Function
For simplicity we add jQuery and use REST, the Web Resource becomes:
Notes:
We need to add a link inside the left navigation panel to display an HTML Web Resource or an external URL, with CRM 2011 can easily done using the form editor as shown in the following figure
but is possible to build a dynamic URL? Yes, it is possible and more important can be done in a supported way.
First of all we create an HTML Web Resource, the page will build the dynamic URL and will display the desiderated page.
In this example we want to show the Bing results querying the name of the current account.
<html>If we publish this Web Resource connected to a navigation link will always show the same Bing page for 'Test Account', before we can retrieve the account name from the current record we need to edit the XML definition for our navigation link.
<head>
<script language="javascript">
function GoToDynamicUrl(accountName) {
var dynamicUrl = "http://www.bing.com/search?q=" + accountName;
location.href = dynamicUrl;
}
</script>
</head>
<body>
<script language="javascript">
GoToDynamicUrl('Test Account');
</script>
</body>
</html>
This is a supported customization, as explained in this page:
<NavBarItem> (FormXml)
The attribute we are looking for is "PassParams", we need to add and set to 1.
To edit the XML we create a new solution containing only the Account Entity, we export as unmanaged, modify the XML as shown below, and import back to the system.
<NavBarItem Id="navLink{541067bd-4db1-2208-e5b0-a601ead56d03}" PassParams="1" Area="Info" Sequence="10"
Icon="$webresource:msdyn_/Images/likeIcon.png" Url="$webresource:new_dynamicurl.htm">
<Titles>
<Title LCID="1033" Text="Dynamic Url" />
</Titles>
</NavBarItem>
Which is the difference when we set this attribute?This is the standard iframe src property created by CRM:
src="/%7B634988949670003339%7D/WebResources/new_dynamicurl.htm"This is with the attribute PassParams="1":
src="/%7B634988949670003339%7D/WebResources/new_dynamicurl.htm?formid=b053a39a-041a-4356-acef-ddf00182762b&id=%7b798AA21B-DA8C-E211-A300-78E7D162EE94%7d&orglcid=1033&orgname=Organization1&pagemode=iframe&security=852023&tabSet=navLink%7b541067bd-4db1-2208-e5b0-a601ead56d03%7dArea&type=1&typename=account&userlcid=1033"As we can see now we have new parameters available, in particular the record ID
To retrieve the data we need the Xrm Context, because we are inside a Web Resource we need to include a reference to the ClientGlobalContext.js.aspx page as explained here:
GetGlobalContext Function
For simplicity we add jQuery and use REST, the Web Resource becomes:
<html><head>And now the result:
<script src="ClientGlobalContext.js.aspx" script type="text/javascript" ></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript">
function GoToDynamicUrl(accountName) {
var dynamicUrl = "http://www.bing.com/search?q=" + accountName;
location.href = dynamicUrl;
}
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
function retrieveRecord(id, odataSetName, successCallback, errorCallback) {
var context = Xrm.Page.context;
var serverUrl = context.getServerUrl();
var ODATA_ENDPOINT = "/XRMServices/2011/OrganizationData.svc";
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
datatype: "json",
url: serverUrl + ODATA_ENDPOINT + "/" + odataSetName + "(guid'" + id + "')",
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
success: function (data, textStatus, XmlHttpRequest) {
if (successCallback) { successCallback(data.d); }
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
if (errorCallback) { errorCallback(errorThrown); }
}
});
}
function retrieveSuccess(data) {
// we call the GoToDynamicUrl function with the Account Name
GoToDynamicUrl(data.Name);
}
function retrieveError(error) {
alert("Error: " + error);
}
</script>
<meta charset="utf-8"></head><body>
<script language="javascript">
// Retrieve the id from the query string
var id = getURLParameter('id');
// Retrieve the record and call the success function
retrieveRecord(id, 'AccountSet', retrieveSuccess, retrieveError);
</script>
</body></html>
Notes:
- This Web Resource can be used to show a report (calling the ReportViewer page) and pass dynamically the required parameters
- Bing was used because Google doesn't permit to include their search pages inside an iframe
This was originally posted here.
*This post is locked for comments