Skip to end of metadata
Go to start of metadata

 

Initial Setup

Blueprint

The fastest way to get started with Confluence Dashboards is to use the in-built Blueprint (note: this is available only for the Confluence 5 version of the plugin).

You can use the top bar to create an example of the Confluence Dashboard using the "Create" button.

Select the "Example of Confluence Dashboard", then click on the Create button.

This will insert a pre-created Confluence Dashboard to a page. Click on "Save" to see the result.

Initial Setup video

You can also see the below video which shows you how to create a custom dashboard step-by-step.


Top of page

Themes

The {box-layout} macro has a class parameter than can be set to select from a selection of pre-made themes – theme-conf, theme-gold, theme-adapt, and theme-redicons are available:


Top of page

Macro Parameters

{box-define} Macro Parameters

Define the contents of a box using standard wiki markup

Parameter

Description

Type

Default

Required

id

specify a name that can be referred to later by the {box} macro

string

none

?

title

Title displayed in the box's header

string

none

?

category

The category in which to place this within the {box-list}. You can set this to "hide" to ensure this box is never listed.

string

none

?

closable

The user can remove this box from the layout

boolean

true

?

collapsible

The box can be collapsed, so just the title is visible

boolean

true

?

draggable

Can a user drag this box to another location in the layout?

boolean

true

?

editable

Allow the user to edit the parameters of the box and/or the contained macro using the macro browser

boolean

false

?

box-params

Select the box definition parameters that you would like the user to be able to edit

title / category / retarget / class

none

?

content-params

Select the parameters of the macro inside the box that the user can or can not edit (dependingon the checkbox below). Only relevant if the box is Editable and Dynamic

string

none

?

exclude

If this is checked then the list above indicates parameters that can not be edited, otherwiseit lists only the parameters that can be edited

boolean

false

?

duplicable

Allow the user to duplicate this box, most useful in combination with Editable

boolean

false

?

edit-title

Allow the user to edit the title of the box by double clicking on it

boolean

false

?

cache

Enable transparent caching of the content of this box. Provide a cache timeout in minutes orleave blank to disable caching. NOTE: Only in dynamic rendering mode

string

none

?

 

 

 

 

 

refresh

The user can refresh the contents of this box. The default auto will determine this based onthe rendering mode, where dynamic is refreshable, and static/live are not

auto / true / false

auto

?

retarget

Setting this will add a target attribute to all <a> links within the box content. Set to_blank to force opening in a new window/tab. NOTE: This will not work for content inside aniframe, eg. gadgets and widgets

string

none

?

class

A CSS class name for the box to allow for custom styling

string

none

?

mode

By default (dynamic mode), box content is dynamically loaded as required, this allows the boxto be editable or refreshable and also reduces the size of the layout page, ideal for macrossuch as {rss}. This is not ideal for all types of content though. Static mode will render thecontent on the page in such a way that it is not processed by the browser until it becomesvisible, this is ideal for the {gadget}, {widget}, {iframe} or other simple macros. This can beproblematic with some macros that rely on scripting, therefore live mode will force the boxescontent to be processed, allowing any initialisation by accompanying scripts.

dynamic / static / live

dynamic

?

{box-layout} Macro Parameters

Layout the boxes into columns. The boxes can be collapsed, removed or moved by drag'n'drop.

Parameter

Description

Type

Default

Required

id

Layout id for the boxes

string

default

?

col-width

Define the width of the columns (eg: "200px")

string

300px

?

columns

The number of columns will be determined by the table in the macro body if this is not given

int

none

?

class

A CSS class name for the layout element to allow for custom styling

string

none

?

col-class

A CSS class name that will be applied to each column

string

none

?

{box} Macro Parameters

Put inside the {box-layout} macro to indicate where a box should be placed.

Parameter

Description

Type

Default

Required

id

Refers to the id of a {box-define}

string

none

?

closed

The box will not appear in the layout by default, but this will mark its default location whenadded by a user

boolean

false

?

collapsed

Show the box with its content collapsed by default

boolean

false

?

{box-list} Macro Parameters

Generate a list of boxes available to the user

Parameter

Description

Type

Default

Required

categorise

Display as a hierarchy of categories, according to the category parameter of the box definition

boolean

false

?

toggles

Allow categories to be expanded and collapsed

boolean

true

?

filter

List only boxes whose category matches this regular expression

string

none

?

layout-only

List only those boxes which have been placed in the layout with the
{"boxId":"","closed":false,"collapsed":false}
macro, otherwise all defined boxes will be listed

boolean

false

?

class

A CSS class name for the list to allow for custom styling

string

none

?

{box-reset} Macro Parameters

Render a control for resetting the layout back to its default

Parameter

Description

Type

Default

Required

tag

The HTML element tag for the control

a / button / div / span

a

?

class

A CSS class name to allow for custom styling

string

none

?

{box-page-frame} Macro Parameters

Show the content of a wiki page (in an iframe). Ideal for including a wiki page inside a box-define macro. Set the mode on the box-define to static when using this.

Parameter

Description

Type

Default

Required

page

Name of the page to show in the box

string

 

?

space

Supply a space key to get the page from another space, leave blank to use current space

string

Current

?

height

Set the height of the frame (eg: "200px"), or "auto" to resize automatically to fit the pagecontent

string

auto

?

{box-note} Macro Parameters

Place inside a box-define, make the box editable and duplicable, and you have a simple way for your users to leave themselves notes.There are no parameters for this macro

Top of page

Recipes

For some useful gadgets to use on your Dashboard, see Atlassian's list of useful gadgets

Blog – 10 handy gadgets to supercharge your Confluence Dashboard

Blog – 3 steps to create the perfect landing page with the Confluence Dashboards plugin

Create an initial layout with the following wiki markup

 {box-define:news|title=Confluence News|category=hide|closable=false|collapsible=false|
 draggable=false|editable=true|content-params=width border|exclude=true}
 {gadget:url=rest/gadgets/1.0/g/com.atlassian.confluence.plugins.gadgets:confluence-news-
 gadget/gadgets/confluence-news-gadget.xml|width=auto|border=false}{gadget}
 {box-define} 

 {box-define:search|title=Search|mode=static}
 {gadget:url=rest/gadgets/1.0/g/com.atlassian.confluence.plugins.gadgets:
 gadget-search/gadgets/gadget-search.xml|width=auto|border=false}{gadget}
 {box-define} 

 {box-define:activity|title=Activity Stream|refresh=true|mode=static}
 {gadget:url=rest/gadgets/1.0/g/com.atlassian.streams.confluence:
 activitystream-gadget/gadgets/conf-
 activitystream-gadget.xml|width=auto|border=false}title=Activity
 %20Stream&keys=ds&username=&numof
 entries=5&isConfigured=true&refresh=false{gadget}
 {box-define} 

 {box-define:pie|title=Pie|editable=true|box-params=title|content
 -params=type legend orientation 3D colors|edit-title=true}
 {chart:3D=true|width=276}
| A | One | Two | Three | Four |
| B | 1 | 2 | 3 | 4 |
{chart}
 {box-define} 
 {box-define:secret|title=Secret|mode=static}
 {info}Quiet please{info}
 {box-define} 
 {box-define:list|title=Boxes|category=hide|closable=false|collapsible=false|mode=live}
 {box-list:class=checkboxes-on-right}
 {box-reset:tag=button}Reset Layout{box-reset}
 {box-define} 

 {box-layout:col-width=280px|class=theme-conf}
| {box:news} | {box:pie} | {box:list} {box:activity|collapsed=true} {box:search} |
{box-layout}

 

Save the page and you should see:


Here's another example layout, with caching enabled for feeds:

 {box-layout:example}| {box:confluence-news}{box:chart} | {box:adaptavist-news} {box:bbc
 -news} | {box:list} {box:custom-feed|closed=true} |{box-layout} 

 {box-define:confluence-news|title=Confluence News|category=News/Software|editable=true|
 content-params=width border|exclude=true}{gadget:url=rest/gadgets/1.0/g/com.atlassian.c
 onfluence.plugins.gadgets:confluence-news-gadget/gadgets/confluence-news-gadget.xml|wid
 th=auto|border=false}show_ads=false{gadget}{box-define} 

 {box-define:adaptavist-news|cache=10m|title=Adaptavist News|category=News/Software|cont
 ent-params=max showTitlesOnly|retarget=_blank|cache=true}{rss:url=http://www.adaptavist
 .com/createrssfeed.action?types=page&types=blogpost&sort=modified&showContent=true&spac
 es=ADAPTAVIST&spaces=Bubbles&spaces=Builder&labelString%3D&rssType=rss2&maxResults=10&t
 imeSpan=30&publicFeed=true&title=Adaptavist.com&showDiff=false|max=5|showTitlesOnly=tru
 e|titleBar=false}{box-define} 

 {box-define:bbc-news|cache=1h|title=BBC News|category=News/General|content-params=max sh
 owTitlesOnly|retarget=_blank|cache=true}{rss:url=http://feeds.bbci.co.uk/news/rss.xml?|m
 ax=10|showTitlesOnly=true|titleBar=false}{box-define} 
 {box-define:custom-feed|title=Custom Feed|category=News|editable=true|box-params=title r
 etarget|content-params=titleBar|exclude=true|duplicable=true|edit-title=true|retarget=_b
 lank}{rss:max=5|showTitlesOnly=true|titleBar=false}{box-define} 
 {box-define:sticky-note|title=Sticky Note|editable=true|box-params=title|duplicable=tru
 e|edit-title=true|retarget=_blank}{box-note}Edit me!{box-note}{box-define} 


{box-define:chart|title=Chart|editable=true|content-params=type orientation 3D height l
egend colors}{chart:3D=true|width=290|height=200}| A | One | Two | Three | Four |
| B | 1 | 2 | 3 | 4 |{chart}{box-define}

{box-define:radar|title=Weather|editable=true|content-params=width border|exclude=true|
edit-title=true}{gadget:url=http://hosting.gmodules.com/ig/gadgets/file/110652509711029
289441/met_radar_gadget.xml|width=auto|border=false}mapType=weather{gadget}{box-define}

 {box-define:html-include|title=External Include}{html-include:url=http://www.adaptavist
 .com/display/ADAPTAVIST/Home?decorator=none}{box-define} 

 {box-define:list|title=Feed Boxes|category=hide|closable=false|mode=live}{box-list:cate
 gorise=true}{box-reset:tag=button}Reset layout{box-reset}{box-define}

 

Top of page

Use your Confluence Dashboards Plugin Layout on your actual Confluence Dashboard

  • First, start by creating a default layout using the Confluence Dashboards Plugin Macros on any Confluence page. Once you are happy with it, then you are ready to embed this within the Confluence Dashboard.
  • You can do this by going to the Confluence Admin screen, and selecting 'Layouts'.
  • The dashboard layout is defined by the 'Global Layout' decorator, which you can customise by selecting 'Create custom'.
    You then want to replace the main Dashboard table with the following code:

    <table class="dashboard" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    #if ($mode == "dashboard")
    #parse ("/decorators/includes/dashboard-navigation.vm")
    #requireResourcesForContext("dashboard")
    #rssautodiscovery($action.rssDescriptor)
    #permitSearchEngines()
    <td class="left" width="100%" valign="top">
    <div>
    $helper.renderConfluenceMacro("{include:Space Key:Page Title}")
    <br />
    </div>
    <div>
    #dashboard_renderGlobalActions("dashboardActionsId", ["system.dashboard"] )
    </div>
    </td>
    #elseif ($mode == "userdir")
    <td width="100%" valign="top">
    $body
    </td>
    #elseif ($mode == "rss")
    <td width="50%" valign="top">
    $body
    </td>
    #end
    ## INFO PANEL FOR ANY PAGE
    #if ($infoPanelRequired)
    <td width="$infoPanelWidth" valign="top" id="helptd">
    #infoPanel(true true true true)
    </td>
    #end
    </tr>
    </table>



  • All this code does is replace the layout with an include macro.
    You then need to update the include macro parameters, so for example replace 'Space Key' with 'ds' and 'Page Title' with 'New Dashboard', where New Dashboard is the name of the page that contains the Confluence Dashboards plugin layout and ds is the key of the space this page was created in.
  • You can then save the layout.
  • The dashboard will now include the Confluence Dashboards Plugin layout.

 

 

Top of page

 

 

 

  • No labels