[TIP 100] - Fine Tuning Your Tile Navigation Styling

WOW! 100 Tips! Can you believe it?

Using the tile navigation component, you can easily setup a dynamic navigation system that updates automatically whenever new content is created. In other words, you can setup a template that is using the tile navigation component and reuse that template in all of your dashboards.

Then every time a new dashboard is created, there will be no need to update your dashboards or template to expose that new dashboard to the users. The tile navigation will automatically pick it up and display that to the users – no more maintenance headaches…

One of my favorite setups for the tile navigation is to use it on a template and have it point to a specific folder of dashboards. I also like the “Show As Bar” layout option in case I have lots of dashboards, so users can scroll to the right and left rather than up and down. That way I save more space for the dashboards.

Then, all I need to do every time a new dashboard is created is drop it in that folder and voila – that dashboard will show as well as a tile, making it easy to find by other users.

One more way to further enhance the tile navigation design is to highlight the current dashboard the user is viewing, for example, by coloring that tile background in a different color (in the image below I used grey). To do so, all I need to do is drop the script below in the template “Ready” action.

There are of course other ways to design navigation for your users – check out this blog for more ideas.

SCRIPT:

// set the color that you would like the current dashboard tile to have
var currentDashboardTileColor = “grey”;

// store the current view
var currentView = this.baseViewService.currentView;

// get all the adapters on the current view
currentView.getAdapters().concat(currentView.templateAdapters)
// filter for all the Tile Navigation adapters
.filter(function(adapter){return adapter instanceof dundas.view.controls.TileNavigation;})
// for each Tile Navigation adapter find and color the tile that matches the current view
.forEach(
function(tileNav)
{
// find the tile with the same id as the current view
var currentDashboardTile = tileNav.control.getItemById(currentView.id)

// if the tile exists, color it
if(currentDashboardTile != null)
{
currentDashboardTile.element[0].childNodes[0].style.backgroundColor = currentDashboardTileColor;
}
}
)

2 Likes