2

Using Interactions to Open a New Web Page

by Ian Macdonald , Principal Technologist - Pyramid Analytics


 

Background

One of my customers recently asked if they could open a BI Office storyboard from an interaction on a row or column heading in a grid being displayed in a running storyboard. For example, say they had a grid showing sales by country. By invoking an interaction on a row header, say Germany, they could directly run a new storyboard designed to show German items. Alternatively, they could pass the row header value to a storyboard and use it as the slice value for the displayed storyboard.

Diagram of Row Interaction Calling a Specific Storyboard

 

Example: Dashboard 1 Row Value (Germany) Passed to Dashboard 2 via Input Interaction

 

BI Office storyboards can use the URL button to call another storyboard (or any valid URL link) and pass it parameters, but that requires two clicks: one to invoke the interaction and then another to press the button to call the new storyboard. You might think this is ok and not a great inconvenience to put up with, but the target audience for the storyboard was board-level executives and it was deemed they would not put up with that! We’ve all been there!

 

So how could a direct invocation of the target storyboard be achieved using the row heading interaction, bypassing the URL button?

 

Outline Solution

BI Office storyboards include a General Asset of Web Page, that allows you to display any valid URL in a panel on a storyboard slide. You can also pass the row header value to this URL via a row interaction. This will display the URL in the panel of the running storyboard.  However, my customer wanted a new browser window to open containing the invoked storyboard, based on the row header value.

 

I came up with the following outline solution, making use of the web page asset, but using it to process the incoming row header value and trigger a new browser window to open with the selected storyboard. This technique makes use of a JavaScript routine in the web page displayed in the Web Page Panel to read the incoming URL parameter and call another window based on its value:

 

1.     Create a web page on the BI Office server (where the default web panel tester page is located)

2.     Create a JavaScript routine in the page that is executed on page opening

3.     In the routine, test the incoming parameter value and if it is “None” just exit

4.     If any other value, have the JavaScript routine open a new browser window based on the incoming parameter value. This could be a different storyboard or pass a parameter via the “input” interaction to the same storyboard.

5.     In your storyboard, create a web panel and use the URL of the created page

6.     Create a row interaction to the web panel, passing the row value as a parameter to be sent to the JavaScript routine, setting default value to “None”

7.     Make the web panel zero width so it cannot be seen

 

Specific Implementation

Here is the HTML for the page I created to process the passed row header value (Please note that all JavaScript code samples within this blog post are attached in the document Using Interactions to Open a New Web Page JS code):

 

HTML to Process the Passed Row Header Value

 

Save the page to the BI Office folder hierarchy. The best place to put it is alongside the Web Page testing page in the directory C:\Program Files\Pyramid Analytics\BI Office 6\websites\paBio\testers. This equates to a URL as follows: http://<BIOfficeServerURL>/testers. You can name the page anything you like, but something meaningful is always useful! I used openwindow.html. Once the page is saved, we’re ready to link to it using a row header interaction from the storyboard.

 

In your storyboard, add a Web Page Asset to a panel from the Assets tab:

Add Web Page Asset

 

Then create a row interaction from your grid to the Web Page panel:

Create Row Interaction to the Web Page Panel

 

Set the Interaction so that the default before any interaction is invoked is defined as “None”. This will then match the test in the JavaScript routine so that a new window is only opened when the interaction passes a value other “None”. Also, if you are passing the row header into an Input Target for passing to a slicer in the target storyboard, make sure that “Unique Name” is used so that the correct MDX key value is sent, rather than the Member Caption (country name in this case).

Set Interaction Default to "None"

 

Finally, move the vertical splitter so that the width of the panel containing the web page asset has zero width. This way, the panel will be invisible to users of the storyboard, but the interaction and web page will still process and open a new window when the row header interaction is not “None”.

Set the Web Page Asset Width to Zero

 

That’s it, done!

 

Test your storyboard by invoking a row interaction.  Make sure the new browser window opens and passes the parameter value to the input target of the called storyboard or calls a different storyboard depending on your requirements. Of course, any valid URL with a parameter may be used if you are calling a third-party web page.

 

 

 

Appendix 1 – Handling Multiple URL Parameters

In this blog we have been examining how to call a new browser window directly from an interaction on a row or column heading. By definition, since this is a direct invocation from a single interaction, there will only ever be one parameter passed.

 

If you find a need to retrieve more than one parameter, in a different use case, then here’s a JavaScript function which accepts an argument of the parameter name then cycles round the parameters until it finds a matching name and returns the associated parameter value:

 

Retrieving More Than One Parameter

 

Note: If you are passing multiple parameters in the URL that will be passed to Input Targets of a BI Office storyboard, you will probably need to construct the URL in a non-standard way, using a character other than ‘&’ as the delimiter or the parameters. This is because when member values are passed, you need to use the full unique key, which usually uses an ampersand as part of the key, for example: [Customer].[Customer Geography ZIP].&UK. In this case, you will need to change the character used for the sPageURL.split() function to match.

 

 

Appendix II – HTML Page to Call Different Storyboard Based on Row Header

 

Calling a Different Storyboard

Reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Like2 Follow
  • 2 Likes
  • 2 yrs agoLast active
  • 1282Views
  • 2 Following