No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluence - Atlassian Summit 2010

No coding necessary
Building user macros and dynamic reports inside Conﬂuence

Charles Hall
Wiki Project Manager
Astrium

2

Who we are

Europe’s leading satellite manufacturer, number 3
worldwide.

www.astrium.eads.net

3

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 Conﬂuence objects

6

Complexity vs Functionality
High Effort
Capability

Functionality

Complexity
High
Low
Standard Wiki {html} User Custom plugins
markup macros

7

An example

A performance testing tool – {response-time}

See your cheat sheet for details of this macro

8

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 Conﬂuence
• Minimizes Javascript coding

9

Worked example 1 – colored tables

No more boring tables!

10

Worked example 1 – colored tables
Listing 2

## Macro name: color-table
## Macro has a body: N
## Body format: n/a
## Output: HTML
## Comment header
## 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>

11

Worked example 1 – side effects

Test, test then test some more!

12

Firebug to the rescue

Pinpoint the table(s) we
want to modify

Point & Click

13

Worked example 1 – revised version
Listing 2

## Macro name: color-table
## Body format: n/a
## Output: HTML
##
## Developed for: All users

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

jQuery(document).ready(function() element.class
{
jQuery("table.confluenceTable tr:nth-child (odd)").css("background-color",
"#f86a46");
jQuery("table.confluenceTable tr:nth-child (even)").css("background-color",
"#318db6");
});
</script>

14

Worked example 1 – Accepting parameters

{color-table:A2C1D5|BFEBEF}

15

Worked example 1 – Accepting parameters

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

16

Worked Example 2 - Using Conﬂuence objects

17

Worked example 2 – Referencing the image
{watermark:draft.gif|no-repeat|1000}
Listing 3

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

jQuery(document).ready(function()
{
jQuery('#mainViewPane').css('background-image',
'url($config.getBaseUrl()
$content.getAttachmentNamed("$image").getDownloadPath())');
…

2 strings joined together

18

Worked example 2 – Setting the repeat behaviour

Listing 3

#set($repeat = $param1)
…

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

…

19

Worked example 2 – Specifying a minimum height

Listing 3

#set($minheight = $param2)
…

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

…

20

Worked example 2 – reusing

How about deﬁning some standard watermarks to help users?
• Draft
• Company logo

Could we make the syntax easier too?

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

21

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
…

22

Listing 4

## Macro name: draft-watermark
## Body format: n/a
## Output: HTML
##
## Developed for: Astrium wiki Calling the existing user macro

## 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}")

23

Gradient background

25

Client-side RSS feed reader

27

Tweaking another plug-in

28

In summary

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

Useful resources
• See your cheat sheet

30

Building Awesome
Dashboards
with Confluence

Jim Severino, Atlassian

Conﬂuence
Free Plugins
+ Your Data
= Awesome

Plugins For Reporting:
1. SQL
2. Chart
3. Run
4. Scripting

Plugin: SQL

{sql} Wiki

JDBC

DB

Plugin: SQL

{sql} Table

JDBC

DB

Plugin: Chart
{chart}

{sql} Table

DB

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

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

Plugin: Run
{run} {chart}

{sql} Table

DB

Text
Image (c) United
Feature Comics

Recommendation:
Use the
Macro Security Plugin.

Recommendation:
Run Reports off a
Summary Database

No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluence - Atlassian Summit 2010

More Related Content

What's hot

Viewers also liked

Similar to No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluence - Atlassian Summit 2010

More from Atlassian

Recently uploaded

No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluence - Atlassian Summit 2010