Dynamics Community Forum Thread Details

Call HTML webresource on click of a ribbon button.

I have written a HTML webresource to display a subgrid of Documents present in a custom entity(Product Line) as shown in the image below:

This works fine when I add the webresource on the form. But I want this same HTML to be displayed in a new window on click of a ribbon button . The HTML code is as below:

<html>

<head>
    <title>Account Services</title>
     <!-- <script src="ls_Script_JQuery_1.7.1.min"></script>  -->
    <script src="ClientGlobalContext.js.aspx"></script>
    <script language="javascript" type="text/javascript">		
        function loadAccountServices() {			
            //Get Account Guid
            var account = window.parent.Xrm.Page.getAttribute("pcl_productline").getValue()[0].id;
			var accountId= account.slice(1, -1);
            //Get Account Services
            var accountServices = getAccountServices(accountId);
            if (accountServices != null && accountServices.value.length > 0) {
                var tableData = "";
                for (var i = 0; i < accountServices.value.length; i++) {
                    var service = accountServices.value[i]["pcl_name"];
					var doctype= accountServices.value[i]["pcl_documenttype@OData.Community.Display.V1.FormattedValue"];
                    if (service != null) {
                        //dynamically add table data with Service Names
                        tableData = tableData + "<tr><td>" + service + "</td><td>"+doctype+"</td></tr>";
                    }
                }
                //Create HTML table
                var table = "<table style='font-family:Segoe UI;font-weight:normal;font-size:13px;'><tr style='text-decoration:underline; height:20px'><td>Document</td><td>Document Type</td></tr>' + tableData + '</table>';
                //show table data on the Account form
                window.document.writeln(table);
            }
        }
        //get Account Services
        function getAccountServices(accountId) {
			var req = new XMLHttpRequest();
			req.open('GET', window.parent.Xrm.Page.context.getClientUrl() + '/api/data/v8.2/pcl_documentlists?$select=pcl_documenttype,pcl_name&$filter=_pcl_productline_value eq '+accountId, false);
			req.setRequestHeader('OData-MaxVersion', '4.0');
			req.setRequestHeader('OData-Version', '4.0');
			req.setRequestHeader('Accept', 'application/json');
			req.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
			req.setRequestHeader('Prefer', 'odata.include-annotations=\'*\'');
			var accountServices = null;
			var temp=null;
			req.onreadystatechange = function() {			
				if (this.readyState === 4) {
					req.onreadystatechange = null;
					if (this.status === 200) {
						
						var results = JSON.parse(this.response);
						accountServices = results;
						for (var i = 0; i < results.value.length; i++) {
							 //accountServices = results[i];
						}
						//return accountServices;
					} else {
						Xrm.Utility.alertDialog(this.statusText);
					}
				}
			};
			
			req.send();
			
			return(accountServices);
			}
        
    </script>
</head>

<body onload='loadAccountServices();'>
</body>

</html>

How should I make this webresource displayed in a new window on click of a ribbon button?

Quick Links