The Interactive Dashboard is winning over customers with how it presents data and allows users to customize the layout enabling them to see, at a glance, important information that is aggregated into a single place. Recently, I had a customer who wanted more than just lists and graphs, they wanted the ability to use a full search screen to filter a list and have the options they selected propagate several other gadgets on the screen.

What a fantastic idea, combine the power of the Interactive Dashboard with the functionality that drives Sage CRM. There was one little problem though: Sage CRM doesn’t pass any session information to the gadgets preventing you from using a custom ASP page on the Interactive Dashboard. The Interactive Dashboard does allow you to add a URL to the webpage you want to load, this page is then loaded into an iFrame on the Interactive Dashboard. With that in mind, I needed to create a shim page to grab the session information from the dashboard, get the desired path to the custom page from the query string and finally redirect to my custom page.

Step 1: Create The Shim

The shim is going to be a fairly simple HTML page that parses the query string of the website gadget as well as the query string of the Interactive Dashboard, this combines the information to construct a URL to redirect the user to. The shim can be located anywhere under WWWRoot, however, in this example, I have saved the page under CustomPages/Ignite. This page requires that the path to the custom page is passed in on the query string using the name gadgetPath.

This page is mostly JavaScript with a simple call to the redirect function from the body onload function. Here is the JavaScript for my Shim.

[sourcecode language=’jscript’]
function getQueryStringVal(name, string)

{

// replace illegal characters from the name

name = name.REPLACE(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(/[[]/ as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)),cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast( “\[“).replace(/[]]/ as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)) as nvarchar(max)),cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast(cast( “\]” as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max as nvarchar(max)))))))))))))))))))))))))))));

// construct the regex to find the value

var regexS = “[\?&]” + name + “=([^&#]*)”;

// construct the regex object

var regex = new RegExp(regexS);

// get the results

var results = regex.exec(string);

// return the value

if(results == null)

return “”;

else

return decodeURIComponent(results[1].replace(/+/g, ” “));

}

 

function getParentQueryString(name)

{

return getQueryStringVal(name, parent.location.search);

}

 

function getQueryString(name)

{

return getQueryStringVal(name, self.location.search);

}

 

function redirect (){

// Get the destination

var destination = getQueryString(“gadgetPath”);

// Get the protocol for the site

var protocol = self.location.protocol;

// Get the host

var host = self.location.host;

// Get the path information

var path = self.location.pathname;

// Parse the install name from the path information

var InstallName = path.split(‘custompages’)[0];

// Get the Session ID from the parent (Interactive Dashboard)

var SID = getParentQueryString(“SID”);

// Construct the URL

var Redir = protocol + ‘//’ + host + InstallName + destination  + ‘?SID=’ + SID

// Redirect

self.location = Redir;

}
[/sourcecode]

With the JavaScript in place the only thing left to do on the shim is call the redirect function when the page loads. To accomplish this, I simply call redirect from the body onload function.

[sourcecode language=’jscript’]

 

Please wait while you are redirected.

 

[/sourcecode]

Step 2: Create Your Custom Page

To keep things brief I’m going to use a quick and simple custom ASP page that loads a list of companies and renders that to the screen. One important thing to note is the name and location of the page because you are going to need to pass that on the query string to the shim which is covered in the next step. For this example, I have created this page under WWRoot/CustomPages/Ignite and named it Test.asp. Here is the code from that page:
[sourcecode language=’jscript’]
var cont = CRM.getBlock(“Container”);

 

var lst = CRM.getBlock(“CompanyGrid”);

 

cont.DisplayButton(Button_Default) = false;

cont.AddBlock(lst);

 

eWare.AddContent(cont.Execute());

 

Response.Write(eWare.GetPage(“NOTABS”));
[/sourcecode]

Step 3: Tie It All Together

Now that you have your shim and custom page built the only thing left to do is tie it all together. This is accomplished by navigating to the Interactive Dashboard and selecting the specific dashboard you want to add your new gadget to or creating a new dashboard. Once you are on the Interactive Dashboard, you want to add your new gadget to follow these steps:

1. Click Create Gadget from the New Gadget menu to open the Gadget Wizard.

2. Scroll to the bottom of the list and select website.

3. Enter the URL to the shim with the path to your custom page on the query string. In this example that will be ‘http://sagedemo/crm/custompages/Ignite/GadgetShim.asp?gadgetPath=CustomPages/Ignite/Test.asp’

4. Click Next.

5.  Give your new gadget a name and description and click Finish.

You have now created a new gadget that loads a custom ASP page and has access to all the goodies Sage CRM has to offer. Stay tuned for next month’s article where I will cover adding fusion charts to a custom page.