The dashboard is one of the most dominant parts in most Confluence systems. Being the landing page for most users, it is the very first impression of what awaits in many spaces, pages, blog posts, etc. It should be ensured that this first impression is a good one! Unfortunately, administrators will face a sad fact very early in their Confluence career: the dashboard can only be customized by programming. Many clients approach us at Scandio and ask us if we can change the layout of their dashboards. In most cases, we’ll develop a custom theme that gives us the power to do anything we like to the dashboard. The dashboard can also be customized by editing the “global layout” at Confluence Admin / Look and Feel / Layouts. Realistically, this will never be enough since it is only template code without any means of Java or clean front-end development. So in most cases we start immediately with a theme plugin.

But there is another very clean and easy way to change and manage the dashboard. Best thing is: this can be done by any user who knows how to administrate a Confluence page - because we simply display a Confluence page on the dashboard! Also: no special add-ons needed - it is all achieved with vanilla Confluence capabilities! Cannot believe? Let me explain…

Create a new “dashboard” page

Since we want to display a Confluence page on the dashboard, we have to create a specific page for this purpose. I’ll simply title this page “dashboard” and create it in my sample space with the key “manage”. It doesn’t really matter where you create the page and how you title it, because this will be configurable when we include the page.

My sample page looks like this in the editor (I simply copied over a few articles from the New York Times website):

managed-dashboard-1

I gave my page a three-column layout with equal widths. Otherwise, there is no special formatting - very simple. I save this page.

Include the page in the “global layout” code

We now somehow have to make this page the content of our dashboard. We can achieve this by using the include macro in the “global layout” mentioned in the introduction. This change has to be done only once and we do not need to edit the layout code afterwards - all further changes will be displayed on the fly as soon as the page is edited.

Go to Confluence Admin / Look and Feel / Layouts. Click on “edit layout” in the “global layout” row. The Velocity code of the default dashboard will be displayed in a text area (without any syntax highlighting - *aarrrr*).

Find this section in the code:

<div class="dashboard-section">
 #if ($mode == "dashboard")
 #parse ("/decorators/includes/dashboard-navigation.vm")
 #requireResourcesForContext("dashboard")
 #rssautodiscovery($action.rssDescriptor)
 #permitSearchEngines()
 [...]
 #else

Replace everything at […] with this code:

<div id="mandb" class="wiki-content">
 $helper.renderConfluenceMacro("{include:manage:dashboard}")
</div>

We’re using the “include” macro to include our page with the title “dashboard” in the space with space key “manage”. We wrap everything in a div with ID “mandb” (“managed dashboard”), so that we can select its content specifically with CSS later on. The class “wiki-content” is required for the default page styles to apply.

If we navigate to our dashboard now, we will see something like this:

managed-dashboard-2

Some basic styling

Let’s pimp our styles a little. Since we are in a vanilla Confluence, we’ll use the “global stylesheet” at Confluence Admin / Look and Feel / Stylesheet. If the CSS gets more complex, you might consider maintaining a separate CSS file somewhere and include it in the “global layout” (see above) instead. If you work in the global stylesheet, always make sure to prefix your selectors with #mandb, so that the styles will never appear outside of the managed dashboard.

In our case, we’d like to adjust the widths of the columns and provide some borders and paddings to them. And we’d also like to pimp the headings a bit. This is our CSS code:

#mandb .cell:nth-child(1) {
    width: 38%;
    padding-right: 2%;
}
#mandb .cell:nth-child(2) {
    width: 56%;
    padding: 0 2%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
#mandb .cell:nth-child(3) {
    width: 38%;
    padding-left: 2%;
}
#mandb h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

Now our dashboard looks like this:

managed-dashboard-3

The layout can still be improved. But it doesn’t look too bad for the 10 minutes of effort, I think.

Hotel business example

The example above looks a little boring, I admit. So we decided to create a better one with a few more features. On the dashboard of our fictional (very successful ;)) hotel we prepared a few neat widgets. It looks like this:

hotel-dashboard-1

For our hotel intranet we chose the three-column layout again. In the left column, Lively Blog Posts will inform our employees about the latest news in the hotel. And to brighten their day we also added a little area with daily changing quotes. The center column shows what’s currently happening in our hotel wiki: to dos, today’s check-ins and recent updates. On the right, we visualized the current occupancy statistics from our external hotel database by using PocketQuery. Besides that, we always keep our employees up to date about the current weather situation and the $-€ exchange rate, so that they are always able to promptly inform the hotel guests when they ask for it. And if they are having some more questions, e.g. about a special store in the inner-city, the employees can just look for it by entering the keywords in the search bar at the beginning of the right column.

The global styles almost didn’t change. This is our code:

#mandb .cell {
 border-radius: 0;
}
#mandb .cell:nth-child(1) {
 width: 38%;
 padding-right: 2%;
}
#mandb .cell:nth-child(2) {
 width: 56%;
 padding: 02%;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}
#mandb .cell:nth-child(3) {
 width: 38%;
 padding-left: 2%;
}
#mandb h2 {
 padding-bottom: 10px;
 border-bottom: 1px solid #ccc;
}

Did I mention that from now on the dashboard can be changed by simply editing the “dashboard” page? Without any further technical knowledge? Right, I think I did.  (Lächeln)