1

No coding necessaryBuilding user macros and dynamic reports inside Confluence

2

Charles HallWiki Project ManagerAstrium

Who we are

3

Europe’s leading satellite manufacturer, number 3 worldwide.

www.astrium.eads.net

Agenda

•What is a user macro?

•Worked example – colored tables

•Worked example – watermark for wiki pages

•Showcase

4

User macros

•What is a user macro?• Added functionality• Removes complexity for authors• Facilitates re-use

•Restrictions• Used by users but…• …installed by system admins

5

User macros

•Where can they be used?• Pages• Templates• In other user macros

But not…• Custom HTML (administration screen)

•What do they consist of?• HTML• Javascript• Velocity Template Language (VTL)• References to Confluence objects

6

Complexity vs Functionality

7

Standard Wiki markup

{html} User macros

Custom plugins

Capability

Low

High

Functionality

Effort

HighComplexity

An example

8

A performance testing tool – {response-time}

See your cheat sheet for details of this macro

Introducing jQuery

“I thought you said no coding?”

•A Javascript library for simplifying HTML document traversal, event handling, and adding AJAX support easily

•Already used by Confluence•Minimizes Javascript coding

9

Worked example 1 – colored tables

10

No more boring tables!

Worked example 1 – colored tables

11

Listing 2

## Macro name: color-table## Macro has a body: N## Body format: n/a## Output: HTML#### Developed by: Charles Hall## Developed for: All users## Date created: 23/02/2010## Installed by: Charles Hall

## Apply coloring to alternate rows of tables.

<script type="text/javascript" defer="defer"> jQuery(document).ready(function() { jQuery("tr:even").css("background-color", "#318db6"); jQuery("tr:odd").css("background-color", "#f86a46"); });</script>

Comment header

Worked example 1 – side effects

12

Test, test then test some more!

Firebug to the rescue

13

Pinpoint the table(s) wewant to modify

Point & Click

Worked example 1 – revised version

14

Listing 2

## Macro name: color-table## Macro has a body: N## Body format: n/a## Output: HTML#### Developed by: Charles Hall## Developed for: All users## Date created: 23/02/2010## Installed by: Charles Hall

## Apply coloring to alternate rows of any tables with the class of confluenceTable.

<script type="text/javascript" defer="defer"> jQuery(document).ready(function() { jQuery("table.confluenceTable tr:nth-child (odd)").css("background-color", "#f86a46");

jQuery("table.confluenceTable tr:nth-child (even)").css("background-color", "#318db6");

});</script>

element.class

Worked example 1 – Accepting parameters

15

{color-table:A2C1D5|BFEBEF}

Worked example 1 – Accepting parameters

16

Listing 2

## Apply coloring to alternate rows of any tables with the class of confluenceTable.

#set($oddcolor= $param0)#set($evencolor= $param1)

## Check for valid odd color, otherwise use default#if (!$oddcolor) #set ($oddcolor="ffffff")#end

## Check for valid even color, otherwise use default#if (!$evencolor) #set ($evencolor="ededed")#end

Worked Example 2 - Using Confluence objects

17

Worked example 2 – Referencing the image

18

Listing 3

#set($image= $param0)#set($repeat = $param1)#set($minheight= $param2)

<script type="text/javascript" defer="defer">jQuery(document).ready(function(){jQuery('#mainViewPane').css('background-image', 'url($config.getBaseUrl()$content.getAttachmentNamed("$image").getDownloadPath())');

…

2 strings joined together

{watermark:draft.gif|no-repeat|1000}

Worked example 2 – Setting the repeat behaviour

19

Listing 3

#set($repeat = $param1)…

## Add the specified repeat behaviour#if ($repeat) jQuery('#mainViewPane').css('background-repeat', '$repeat');#end

…

Worked example 2 – Specifying a minimum height

20

Listing 3

#set($minheight = $param2)…

## Check for a specified minimum height#if ($minheight) jQuery('#mainViewPane').css('height', '$minheight');#end

…

Worked example 2 – reusing

21

How about defining some standard watermarks to help users?• Draft • Company logo

Could we make the syntax easier too?

• {draft-watermark}• {company-watermark}

Worked example 2 – reusing

22

Listing 3

…

## Check for full image path or attachment name#if($image.startsWith("http",0))#set($url=$image)#else#set($url=$config.getBaseUrl()+$content.getAttachmentNamed("$image").getDownloadPath())

#end…

Worked example 2 – reusing

23

Listing 4

## Macro name: draft-watermark## Macro has a body: N## Body format: n/a## Output: HTML#### Developed by: Charles Hall## Developed for: Astrium wiki## Date created: 19/04/2010## Installed by: Charles Hall

## N.B. Calls the watermark user macro## draft.gif must reside in "company" space

#set($url="http://globalcorp.com/confluence/download/attachments/74416134/draft.gif")

$action.getHelper().renderConfluenceMacro("{watermark:$url|no-repeat|1000}")

Calling the existing user macro

Showcase

24

Gradient background

25

Page theme

26

Client-side RSS feed reader

27

Tweaking another plug-in

28

Tweaking a standard feature

In summary

30

•Add real functionality•Users can control behaviour•Access to some Confluence objects•Can perform useful UI tweaks•Can be re-used in other macros

Useful resources•See your cheat sheet

Building Awesome Dashboards

with Confluence

Jim Severino, Atlassian

ConfluenceFree Plugins

Your Data

= Awesome

+

JDBC

1. SQL

2. Chart

3. Run

4. Scripting

Plugins For Reporting:

{sql}

DB

JDBC

Wiki

Plugin: SQL

{sql} Table

DB

JDBCJDBC

DB

Plugin: SQL

{chart}

{sql} Table

DB

Plugin: Chart

{chart}

{sql} Table

DB

Plugin: Chart

https://confluence.foo.com/FOO/Sales+Report?

run_1_category=motorcycles&run_1=run

https://confluence.foo.com/FOO/Sales+Report

?run_1_category=motorcycles

&run_1_foo=...&run_1_bar=...Other Parameters!

{sql} Table

DB

{run} {chart}

Plugin: Run

Scripting

Text

Image (c) United Feature Comics

Rule #1:Macro Security

Recommendation:Use the

Macro Security Plugin.

Rule #2:Datasource Security

Rule #3:Summary Databases

Recommendation:Run Reports off a Summary Database

1. SQL

2. Chart

3. Run

4. Scripting

Plugins For Reporting:

http://bit.ly/

howto-report