Now that we know how to design a dashboard, we need to learn how to make it interactive, so that our users can slice data and view it from different perspectives. Selectors are one of the most, if not the most, useful features on a dashboard and can really make a difference in your BI project. They may seem tricky at the first bite, yet your customers will appreciate the effort and ask for more.
A panel is a group of controls (textboxes, lists, buttons, grids, and more) that act together responding to the user's input. Think of a panel as a layer, or—in HTML terms—as a <DIV> tag. They can be nested like containers; as a general rule remember this: the outer panel drives the inner panel, in other words, the inner panel inherits the filtering conditions of the outer panel. The big empty gray area where you put objects is, in fact, the mother of all panels, a container for the entire dashboard, let's call it the root. Once you have this in mind, you're already halfway through the title of "Dashboard Landlord".
We will reuse the dataset of the preceding recipe but with an added attribute: Product. So, open the Desktop application and modify the 28 InternetSales Dashboard report.
Once you have the report ready, open the Web Interface:
- From the Home page of the project, click on Create Document | Blank Dashboard, and add the report 28 as dataset.
- Now click anywhere in the gray area (the root panel). Next, right-click on the Product Category attribute and from the context menu select Add Element Selector.
- The element selector has a cross-arrow handle, click-and-drag it inside the gray area until you see the yellow border around the root panel. Release the selector.
- Click again inside the root panel and from the Insert menu choose Panel Stack.
- With the cross-cursor, draw a rectangular area to the right of the selector, big enough to have other elements inside it. This will create an inner panel; select it and when it has the eight white squares around its border, right-click on the Product Subcategory attribute and click on Add Element Selector.
- Drag the newly created selector inside the inner panel. Drop it when you see the yellow line surrounding the border.
- Again select the inner panel and insert another panel stack into it. I call this a Matrioska panel.
- With the innermost panel selected, click on the green plus icon just below the panel title bar, labeled Add Content.
- From the drop-down menu, click on Grid, and complete this grid with the Product attribute and the metric.
- In summary: we have the root panel with the Category selector, the middle panel with the Subcategory selector and the inner panel with the Product attribute in grid, as shown in this screen capture:
- Click on Save As… and name it
31 Panels and Selectors. Then click on Run newly saved document, and play a little with the selectors to see the effect on the innermost grid.
The panels are nested and have a parent-child dependency. So, when you select a category, the middle and the inner panels are affected; when you select a subcategory, only the inner panel changes. In this case the three attributes belong to the same hierarchy, but it would work just as well with Year for example.
When changing values inside selectors, you may find that the grid displays no data and an error appears: No data returned for this view. This might be because the applied filter excludes all data.
In this case:
- Switch to Editable Mode. Select the Product Subcategory selector, right-click on it and open the Properties and Formatting... window.
- Go to Properties | Selector, uncheck Apply selections as a filter and check Automatically update when there is no data for the current selection.
- Confirm with OK. Notice that when you switch the category, by default the first subcategory is automatically selected.
- When you save the document, the current status of the selectors is used as default; so, next time you open the dashboard, you will see the same selection.
Note
Please refer to the online MicroStrategy help at http://www2.microstrategy.com/producthelp/9.3/WebUser/WebHelp/Lang_1033/Applying_selections_as_filters_or_slices.htm for more details about filtering and slicing.
You are not limited to dropdowns. Right-click on a selector, open the Properties and Formatting | Properties | Layout settings and choose from a series of controls, see screen capture:
