Tip: How to pick up User Token or ID from HTTP Headers for use in a Dashboard.
Trick: Use InfoBurst to inject the value into the dashboard.
Figuring out security in your dashboards can often be one of the more difficult pieces to solve. Often times, we’re able to make use of InfoBurst users, Windows NT users, or even a manual login. In some cases though, a company might have their own portal security in place that they would like to leverage for the dashboard that is outside of the scope of those other options. In this tech tip, we’ll discuss how to make use of such a setup in the case that the portal is able to include user tokens in HTTP headers.
Prerequisites: InfoBurst build 232 or later; SAP Dashboard that has been dCoded, portal security that includes user tokens in HTTP headers.
Steps:
Before dCoding your Xcelsius dashboard, you’ll want to declare a cell that will hold the value of the HTTP Header you’re looking to capture. The easiest way to do this is to enter something into the cell that you will be able to easily search for later in the code, that won’t get mixed up with something else. In this case, I’ve typed in “_DUMMY_” into the cell I want to eventually have my value inserted into.
Once the cell has a placeholder value, and you’ve based all your other logic off of that cell eventually containing the token value, go ahead and dCode your dashboard, and then place it on your InfoBurst server.
Next, we need to go to your InfoBurst system management portal. You can do so with the following URL structure: http://[your_infoburst_server]:[port]
In the navigation panel, click on System Config (you will need an administrator login to access this page).
In the following screen, you’ll see a list of parameters you can adjust. You’re looking for the one named IBAppUserToken.
Now we need to enter 2 values: the name of the parameter we’re looking to capture from the HTTP heade, and a string value that we want InfoBurst to look for in our dashboard code and overwrite with the value from the HTTP header. The syntax for this looks like: [HTTP-Header-parameter-name]#[string-Value]. So in the example below, the HTTP header parameter name is portal-token, and the string value we want InfoBurst to look up in our code is usertoken (you’ll want to make sure this string value is something unique that won’t appear anywhere else).
Now that InfoBurst is set up to capture the value, we need to do some slight editing of our dashboard HTML5 file so that it can intake the value. We’re going to go to our dCoded folder, and open up the app.html file in a text editor program.
In here, we’re going to scroll down towards the bottom of the file, and right after the line “$(window).load(function() {“, we’re going to create a new line that sets a new variable to our string value that will be overwritten by InfoBurst with our HTTP parameter. In this case, I created a new variable named dashboardUserToken (this can named anything as long as it’s unique), and I set it equal to the same value I gave my string value in the step above. Save the file once you’re done.
Remember the dummy value we set up in our Xcelsius cell in step 1? Our last step is to now replace that value with our new variable name, which in this case is dashboardUserToken. In your dCode folder, open up the gen_ folder, and open cells_1 in a text editor program.
In here, you’re going to want to do a Find and Replace (ctrl+H in most programs). You want to find the dummy value you entered into your cell before dCoding (in my case, “_DUMMY_”, including the quotations), and you want to replace it with your variable name you put into your app.html file (dashboardUserToken in my case). Save this file once you’ve replaced the value.
Assuming you’re already structured your dashboard logic to base off of this cell, the next time you open the dashboard through the URL, it should pick up your Header value and insert it into the dashboard.
Want more tech tips on HTML5 Dashboards?
Join the Speak BO Webinar Series today and you can view Taylor’s past webinar: Common Challenges of Developing an HTML5 Dashboard