Designing Dashboards and Tiles for HTML Viewing

Modified on Wed, 05 Mar 2014 10:31 AM by Steve C. — Categorized as: Design, HTML, Mobile

Click to return to: Documentation | Designing Dashboards | Dundas Dashboard for Mobiles


Overview

This article provides tips and best practices for designing dashboards and tiles for HTML viewing.

Designing dashboards

Resizable dashboards

Below are some notes regarding the design of resizable dashboards for HTML viewing:


For more details, see Designing Resizable Dashboards.

Hiding dashboards from navigation

Dashboard designers can hide dashblocks and dashboards from being visible in the HTML Explorer as follows:

  1. Edit the dashblock or dashboard in the Dashboard Designer.
  2. Click the dashboard canvas to see its properties displayed in the Properties grid.
  3. Set the Hide From Navigation property to True.
  4. Save, and then check-in the dashblock or dashboard.

Now, when you use the HTML Explorer to navigate your projects, you won't see the hidden dashblock or dashboard anymore. This option is useful for hiding unnecessary details from dashboard viewers. For example, you may have a dashboard that is used in a hover-over or a pop-up, but it doesn't make sense for users to view this dashboard just by itself.

Hide From Navigation property.

Hide From Navigation property.


Design recommendations

Various dashboard design tips and workarounds for known issues:


Designing tiles

The HTML Home screen displays two kinds of items:


A dashboard shows up as a preview by default when you add it to the home screen. If you want to have something more customized, create a corresponding tile which will basically replace the preview on the home screen. A tile is just a separate dashboard/dashblock for which you have set the following advanced properties:


The size of the dashboard canvas adapts automatically whenever you change the tile row or column span. The figure below shows an example of creating a new dashboard to act as a 2x2-sized tile. The tile is linked to the Executive dashboard from the Sonatica sample project.

Setting the tile size and click target at design-time.

Setting the tile size and click target at design-time.


Once the click target of a tile is set, the tile will no longer appear in the explorer view. This is because the tile is now linked to the target dashboard and only the target dashboard will be displayed in the explorer view.

When users add the target dashboard (⪚ Executive dashboard from the Sonatica project) to their home screen, the corresponding tile will be displayed in the home screen instead of the regular preview of the actual dashboard. For example, in the HTML Home screen below, the Executive dashboard has been added, but its corresponding tile is displayed instead of the regular preview icon. Clicking the 2x2-sized tile will result in navigation to the actual Executive dashboard (the click target).

HTML home screen with a 2x2 tile.

HTML home screen with a 2x2 tile.


Multiple tiles linked to the same dashboard

Dashboard designers can choose to create multiple tiles and set their click targets to point to the exact same dashboard. This allows users to choose the tile they want to appear on their home screen. The figure below shows an example of creating a second tile that also points to the Executive dashboard.

Designing a 1x1 tile that links to the same dashboard.

Designing a 1x1 tile that links to the same dashboard.


Now, when a user tries to add the Executive dashboard to their home screen from the explorer view, a popup window appears, giving the user the option of selecting the tile to use.

Choose the tile to appear on the home screen.

Choose the tile to appear on the home screen.


Tip: Suppose you have designed two tiles linked to the same dashboard. Tile 1 shows a summary view of KPI 1, and Tile 2 shows a summary view of KPI 2. When multiple tiles are linked to the same dashboard, users can only choose one of the tiles to appear on their home screen. But what if they would like both summary views to appear on their home screen? One solution in this case is to design a third tile for your users that displays the summary information for both KPIs. Your users then have the flexibility of choosing the amount of information they want to see on their home screen.

Live tiles

A live tile is like a miniature dashboard. It usually displays a small number of data controls which are linked to KPI data in a compact arrangement. You can create a live tile that shows a summary or subset of a full dashboard, and then set the click target of the tile to point to the full dashboard.

Live tiles from the Sonatica project on the home screen. Clicking on a tile loads the full dashboard.

Live tiles from the Sonatica project on the home screen. Clicking on a tile loads the full dashboard.


Interactive tiles

The Is Tile Interactive property of a dashboard or dashblock indicates whether the corresponding tile is interactive or not. By default, this property is set to False, which means the tile is non-interactive. In this case, the tile itself will not respond to clicks or other user interaction the way a normal dashboard would. Clicking on the tile simply results in navigation to the Tile Click Target dashboard.

However, if you set Is Tile Interactive to True, the tile will respond to user interactions normally instead of navigating to itself (the full dashboard), or navigating to the click target. This basically overrides the default click target behavior and allows you to achieve results such as:


// Get the base URL of your Dundas Dashboard instance. string url = services.ServerUri;

// Append the view dashboard link (explorer or viewer, explorer in this case). url = string.Format("{0}HtmlExplorer.ashx?Dd_ContentId={1}", url, services.CurrentDashboard.DashboardId);

// Build the javascript to navigate to the new link (must be set on the parent window). string js = string.Format("window.parent.location = '{0}'", url);

// Execute the javascript. services.EvalJavaScript(js);


Protected tiles

In Dundas Dashboard 5.0.2 or later, administrators can designate dashboard tiles as being protected to prevent users from removing them from their HTML Home screens. Here are the steps to do this:

  1. Set the dashboard property, Is Tile Protected, to true for your tile(s).
  2. Go to HTML Home Screen Settings and remove any existing selected dashboards.
  3. Add the protected tile(s) along with any unprotected tiles, and then click Save.
    Protected tiles in HTML Home Screen Settings.
  4. Click Reset HTML Home Screen for ALL users to propagate the changes to all users.

Best practices for tile design

As a dashboard designer, you are free to design your tiles however you like. You can add text labels, image backgrounds, or even data controls (⪚ live tiles). However, for performance reasons, it is best to keep your designs clean and simple. Here are some ways to do this:


When using live tiles, you may experience performance problems on low-powered or older devices. For example, you may see scrolling problems on a smartphone or other issues. Here are some ways to deal with this:


Related topics


Click to return to: Documentation | Designing Dashboards | Dundas Dashboard for Mobiles