Blog Update -


Tuesday, September 8, 2015

Post related to Business Intelligence teams

I would like to share with you a note that I posted on the LinkedIn message board that you might find interesting. Where does your BI team belongs to?

Wednesday, December 31, 2014

Adding your Own Dashboard Shortcuts to the Main Page (with jQuery)

As we create dashboards for our different teams, we realised that a number of these are used across the business. In order, to promote the use of these Dashboard we put them all in the same Shared folder called Dashboards. It seemed to work fine, but then we also added a number of Documents and Dashboards that were still relevant for all, but less important.

As I got used to manipulate the Portal's main page with jQuery, I thought about adding directly shortcuts to this are. And it worked great.

Here is how it works. Thanks to jQuery, I was able to duplicate the first Shortcuts bar in the portal, the one called "Browse".


Once duplicated, I deleted all, but one, shortcuts through code. I then was able to rename the group and add the shortcuts I needed. Here is how it looks like now:


Following is just a snippet of the code that should be sufficient to get you starting.


<SCRIPT>
document.addEventListener('DOMContentLoaded', function() {

 // Duplicate the dashboard shortcuts
 $clone = $("#dktpSectionView").clone().attr('id', 'bdOurDashboards' ).insertBefore("#dktpSectionView");
 $("#bdOurDashboards .mstrDesktopSectionIcon").text("Our Dashboards");

 // Remove unnessary shortcuts
 $("#bdOurDashboards .shared").remove();
 $("#bdOurDashboards .profile").remove();
 $("#bdOurDashboards .inbox").remove();

 $("#bdOurDashboards .subs").addClass("new-rwd myShortcut");
 $("#bdOurDashboards .subs").removeClass("subs");
 $("#bdOurDashboards .subs").attr('id', 'myShortcut' );

 $clone = $("#bdOurDashboards .myShortcut").clone().attr('id', 'bdAvailabilityDash' ).appendTo("#bdOurDashboards");
 $( "#bdAvailabilityDash .mstr-dskt-nm" ).text("Data Availability");
 $( "#bdAvailabilityDash .mstr-dskt-dsc" ).text("Check what data is available");
 $( "#bdAvailabilityDash" ).attr("href", "mstrWeb?evt=2048001&src=mstrWeb.2048001&visMode=0&documentID=D2893BE111E46A8C00000080EF650BDD");
 $("#bdAvailabilityDash").removeClass("myShortcut");

 $clone = $("#bdOurDashboards .myShortcut").clone().attr('id', 'bdMstrDash' ).appendTo("#bdOurDashboards");
 $( "#bdMstrDash .mstr-dskt-nm" ).text("Dashboard (Daily)");
 $( "#bdMstrDash .mstr-dskt-dsc" ).text("Daily Activity");
 $( "#bdMstrDash" ).attr("href", "mstrWeb?evt=2048001&src=mstrWeb.2048001&visMode=0&currentViewMedia=2&documentID=D045D7D011E46B4500000080EF8570E1");
 $("#bdMstrDash").removeClass("myShortcut");

 $clone = $("#bdOurDashboards .myShortcut").clone().attr('id', 'bdMasterDashRev' ).appendTo("#bdOurDashboards");
 $( "#bdMasterDashRev .mstr-dskt-nm" ).text("Dashboard (Monthly)");
 $( "#bdMasterDashRev .mstr-dskt-dsc" ).text("Monthly Activity");
 $( "#bdMasterDashRev" ).attr("href", "mstrWeb?evt=2048001&src=mstrWeb.2048001&visMode=0&currentViewMedia=2&documentID=EF4EFAAC11E46B4600000080EFF550E0");
 $("#bdMasterDashRev").removeClass("myShortcut");

 $("#bdOurDashboards .myShortcut").remove();
    }, false);
</SCRIPT>



Please let me know if you have any other idea to improve this or add to it.

ETL Status page accessible from the Portals (with jQuery)

As I started my current role, the MicroStrategy portal's login page had been customised. The customisation added an iframe pointing to an HTML page that was generated by the ETL team. This ETL Status page contained a summarised view of the daily data load.

The down side of this solution is that you had to log out to see it again.

As we implemented our SSO (using Google OAuth), I decided to remove all together the login page so users would be directly logged in, without having to click on anything. It meant that the ETL Status page would be gone all together.

The solution I got so far, and I might change my mind, is to have a button on the portal's main page allowing to show this HTML page on request only.

Solution


The following code was added in the Project Status page, thanks to the HTML view. Using jQuery, the button opens a dialog box with the HTML page.


<P>
  <BUTTON id=opener></BUTTON>
</P>
<DIV id=dialog title="ETL Status" style="HEIGHT: 450px; WIDTH: auto; MIN-HEIGHT: 470px; MAX-HEIGHT: 450px">
  <P>
    <OBJECT data="http://WEB_SERVER/mstr_status.phtml" width=410 height=450 type=text/html></OBJECT>
  </P>
</DIV>

<SCRIPT>
  $( "#opener" ).append( "<a>ETL Status information</a>" );

  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      maxWidth:410,
      maxHeight: 450,
      minHeight: 450,
      width: 410,
      height: 450,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "fold",
        duration: 1000
      }
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog("option", "height", 450 );
      $( "#dialog" ).dialog("option", "min-height", 450 );
      $( "#dialog" ).dialog("option", "max-height", 450 );
      $( "#dialog" ).dialog( "open" );
    });
  });
</SCRIPT>


Here is a screenshot of our main page when you click on the ETL Status button.


Remove main page Shortcuts (with jQuery)

Part of the User Experience project, I decided to remove from the main page unnecessary shortcuts. In particular the "Import MicroStrategy File" as none of our users are using the Desktop application.
I've been told that I could look for the jsp/html/xml file responsible for this, but as I've been using jQuery for many things, I decided to go the easy way.

Solution

In this solution, you need to edit the Project Status and add (and adapt) the following code that will hide specific shortcuts


<SCRIPT>
document.addEventListener('DOMContentLoaded', function() {
 $('#import_form_dsktp').parent().hide();
 $('#dktpSectionCreate .mstr-dskt-lnk .import').hide();
 $('#dktpSectionCreate .mstr-dskt-lnk .new-cg').hide();
 $('#dktpSectionCreate .mstr-dskt-lnk .new-metric').hide();
    }, false);
</SCRIPT>

I have tried this in version 9.4 successfully.

Hide Document toolbar for Screen Displays (with jQuery)

Not long ago, we got a request to provide some dashboards to be displayed in large screens. The idea was that all users would consume the BI data on a daily basis. The dashboard design and development was interesting but didn't present any particular challenge.
When we got to display it we realised that we didn't know how to remove the main toolbar, that had of course to go away. I then decided to use my friend jQuery to solve this.

Solution:

One way to use jQuery, or simple javascript, code in a MicroStrategy document is through the HTML container. You just need to edit a Document and access the Insert menu and you will find this element.
Create a container and remove the borders of the new object in your document. Inside, just paste the following code:


<script>
    $(document).ready(function() {
        $('#mstrWeb_dockTop').remove();
        $('#mstr20').parent().hide();
    });
</script>

This simple code would then remove the Toolbar. This only works in Interactive Mode. For Express Mode, you might just have to find out what object needs to be removed.

In order to toggle between showing or not the toolbar, you will just have to toggle the visibility property of this HTML Container.

Engage your users with the Project Status area (with Confluence links)

I had this idea that to improve users engagement with our BI team, we should provide them with information on our releases, projects, data caveats in a way that is easy to consume.
We all agree that it's not because you sent an email that users will remember what has changed or what is soon to come. The idea was to have an attractive page with such information.

My following thought was on maintainability. I needed to make sure that whatever we implement would be easily maintained without any technical knowledge. This would allow Business Analysts, for example, to update the content when needed.Best to achieve this is to leverage an existing tool that users are familiar with: Confluence. This strategy allowed anyone with the right access a given page to update the content that is displayed in the BI Portal.

Solution: 


As the page would be shown always in the portal's main page, I just had to add the following code in the HTML area of the Project Status:

<OBJECT data="http://WEB_SERVER/MicroStrategy/html/getStatusPage.jsp" width="100%" height="100%" type=text/html>
</OBJECT>

The JSP page that is referred is only used to retrieve the HTML content from Confluence. Here is the code for this page:


<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="../style/StatusPageBatch.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>BI Status Page</title>
</head>
<body style="background-color: light-grey; border-width:1px; border-style: double; border-color: red">
        <%
            out.println(com.corp.mycompany.GetStatusPage.parsePage());
        %>
</body>
</html>


As the confluence page needed some login information, I had to create a simple Java class to extract the necessary HTML content. I also decided to change all hyperlinks in the page to open in a new browser. Here is an extract of the code:


package com.corp.badoo;

import java.io.IOException;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;

public class GetStatusPage {
 public static String parsePage() {
 try {
  org.jsoup.nodes.Document doc = Jsoup.connect(
       "https://wiki.jira.com/display/BITEAM/BI+Status+Page?os_username=USER_NAME&os_password=PASSWORD")
    .get();
  Element lWikiContent = doc.select("div.wiki-content").first();
  // System.out.println(lWikiContent.toString());
  String lHTMLPage = lWikiContent.toString();
  // The following line allow to for a new page when clicking on any
  // link in the status area.
  lHTMLPage = lHTMLPage.replace("href=", "target=\"_blank\" href=");
  return lHTMLPage;
 } catch (javax.net.ssl.SSLHandshakeException e) {
  return e.getMessage();
 } catch (IOException e) {
  return e.getMessage();
 }
 }
}


With this 3-steps approach I get an easy-to-update Information box. We've been adding information on latest released projects, contents of the next release, links to our FAQ/Documentation, Alerts when data is late or affected by a known issue, and so on.
Here is a screenshot of how it looks like:


Tuesday, December 30, 2014

Check what Screen Resolution your users have?

Every time we create a new Dashboard we need to ask ourselves, what is the best default size? Even if you can zoom in and out, you still need to the ration right and be sure of the users experience.

I just started to record our users behaviour so that we can then make some decisions on this matter. My approach is to add some Javascript code that would capture the Window size and combine this with a very simple JSP page that would allow to save the results in a file.

As usual for this kind of Javascript, I added it in the Project Status HTML code, and you should be able to do the same.


<SCRIPT>
    document.addEventListener('DOMContentLoaded', function() {
        var mystring = $('.mstrInstruct').text();
        mystring = mystring.replace(" |", "");
        $('.mstrInstruct').text(mystring);
        var isChrome = /Chrome/.test(navigator.userAgent)
                                && /Google Inc/.test(navigator.vendor);
        var isSafari = /Safari/.test(navigator.userAgent)
                                && /Apple Computer/.test(navigator.vendor);
        var isFireFox = /Firefox/.test(navigator.userAgent);
        var lWebBrowser = "Other";
        if (isChrome) lWebBrowser = "Chrome";
        if (isSafari) lWebBrowser = "Safari";
        if (isFireFox) lWebBrowser = "FireFox";
        mystring = mystring.replace("Welcome ", "").trim();
        $.post("http://WEB_SERVER:PORT_NUMBER/logresolution.jsp", {
            username: mystring,
            height: $(window).height(),
            width: $(window).width(),
            webbrowser: lWebBrowser
        });
    }, false);
</SCRIPT>




The previous code is sending the information gathered to a JSP page that we now ned to create. As using the default Tomcat deployment, I created a simple JSP page and placed it in the webapps\ROOT folder so it's easily accessible.

<%@page import="java.util.logging.Logger" %>
<%@page import="java.util.logging.LogRecord" %>
<%@page import="java.util.logging.Level" %>
<%@page import="java.util.logging.FileHandler" %>
<%@page import="java.util.logging.SimpleFormatter" %>
<html>
<head>
    <title>Log Web Browser Information per User</title>
</head>
<body>
<%      Logger lLogger = Logger.getLogger(this.getClass().getName());
        FileHandler lFileHandler = new FileHandler("/tmp/LogResolution.log", true);
        lLogger.addHandler(lFileHandler);
        SimpleFormatter lFormatter = new SimpleFormatter();
        lFileHandler.setFormatter(lFormatter);
        lLogger.setUseParentHandlers(false);
 
        LogRecord lRecord = new LogRecord(Level.INFO
                        request.getParameter("username") + ";" 
                        + request.getParameter("height") + ";" 
                        + request.getParameter("width") + ";" 
                        + request.getParameter("webbrowser") );
        lLogger.log(lRecord);
        lFileHandler.flush();
        lFileHandler.close();
%>
</body>



This code will then generate a log file that will contain the UserName, size of the Web Browser Window and some approximated information on the web browser.