Expand Cards - to light up your confluence page

Expand-cards is a user macro which is an enhancement version of expand macro.  Expand-cards change styles of a default expand so that user can manage page length while contrasting the content.

Expand macro to hide extra content from the first appearance of the page. Expand-cards macro allow users to hide their content while providing a hint about the hidden context to the readers.

In case users’ need to avoid lengthy content from confluence pages; while providing readers a sense about the content that is hidden expand-cards macro would be the handiest tool available.

Key features

  • Change colors of a expand note
  • Add icons to expand card
  • Add summary of the content invisible

How to use

  1. Insert expand card and use macro options to add your preference
  2. Add content inside macro body 
  3. Save changes 

1.png

2.png

Code 

always welcome to make the code more efficient. I am not a developer ;) ...

## Developed by: Alana Fernando
## Date created: 27/07/2017
##Shared with love...

## @param Status:title=Style type|type=enum|required=true|enumValues=Default,Success,Primary,Danger,Info,Warning|desc=Choose a status.

## @param title:title=Note title|type=string|desc=Title to display|required=true|option-showValueInPlaceholder=true

## @param exptitle:title=Expand title|type=string|desc=Title to display in expand|required=true

## @param summary:title=Note summary|type=string|desc=Summary to display|required=true

## @param icon:title=Note icon|type=enum|desc=Choose note icon. |enumValues=editor-task,workflow,quote,version,workbox,like,group,email,edit,comment,add,editor-mention,devtools-file


#if ( $paramStatus == "Success" )
#if ($paramtitle.length() > 120)//additional code to limit title length
<div class="aui-message aui-message-error">
<p class="title">
<strong>Error</strong>
</p>
<p>Macro parameter "input" must be 10 characters or less!</p>
</div>
#else
<div class="notice notice-success">
<h1 style="color:#80D651;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
<ac:macro ac:name="expand">
<ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
<ac:rich-text-body>
<ac:default-parameter>${body}</ac:default-parameter>
</ac:rich-text-body>
</ac:macro>

#if (!$paramsummary.isEmpty())
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
#end
</div>


#elseif ( $paramStatus == "Danger" )
<div class="notice notice-danger">
<h1 style="color:#d73814;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty())
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
<ac:macro ac:name="expand">
<ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
<ac:rich-text-body>
<ac:default-parameter>${body}</ac:default-parameter>
</ac:rich-text-body>
</ac:macro>
</div>

#elseif ( $paramStatus == "Info" )
<div class="notice notice-info">
<h1 style="color: #45ABCD;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty())
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
<ac:macro ac:name="expand">
<ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
<ac:rich-text-body>
<ac:default-parameter>${body}</ac:default-parameter>
</ac:rich-text-body>
</ac:macro>
</div>

#elseif ( $paramStatus == "Warning" )
<div class="notice notice-warning">
<h1 style="color:#FEAF20;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty())
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
<ac:macro ac:name="expand">
<ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
<ac:rich-text-body>
<ac:default-parameter>${body}</ac:default-parameter>
</ac:rich-text-body>
</ac:macro>
</div>

#elseif ( $paramStatus == "Primary" )
<div class="notice notice-primary">
<h1 style="color:#428bca;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty())
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
<ac:macro ac:name="expand">
<ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
<ac:rich-text-body>
<ac:default-parameter>${body}</ac:default-parameter>
</ac:rich-text-body>
</ac:macro>
</div>

#elseif ( $paramStatus == "Default" )
<div class="notice notice-default">
<h1 style="color:#546E7A;"><span class="aui-icon aui-icon-small aui-iconfont-$paramicon"> </span> $paramtitle</h1>
#if (!$paramsummary.isEmpty())
<div style="color:#90A4AE;">$paramsummary</div>
#else
<div style="color:#90A4AE;"></div>
#end
<ac:macro ac:name="expand">
<ac:parameter ac:name="title">${paramexptitle}</ac:parameter>
<ac:rich-text-body>
<ac:default-parameter>${body}</ac:default-parameter>
</ac:rich-text-body>
</ac:macro>
</div>

#else
<div>$body</div>
#end


<style>
.notice {
padding: 15px;
background-color: #fafafa;
border-left: 6px solid #7f7f84;
margin-bottom: 10px;
-webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.notice-lg {
padding: 35px;
font-size: large;
}
.notice-success {
border-color: #80D651;
}

.notice-info {
border-color: #45ABCD;
}

.notice-warning {
border-color: #FEAF20;
}

.notice-danger {
border-color: #d73814;
}
.notice-primary {
border-color: #428bca;
}
.notice-default {
border-color: #546E7A;
}
</style>

 

Adding user macro 

Remember to select Rendered as macro body processing. 

 

DIVE DEEP...

Gain

  • Simple usage
  • Compatible with multiple other macros/plugins
  • Direct cost of development = Zero
  • Since this is an user macro it is free for lifetime
  • Cross browse compatibility

Macro testing 

Notes and texts are use in almost everywhere in confluence. Considering usage; below test scenarios executed.

  • Macro functional testing
  • Macro combination testing
  • Macro stability testing
  • Cross browser compatibility and stability testing

Macro deployment 

Expand cards macro is deployed as a user macro. It required no system down time and you just have to add macro code to confluence as a user macro. 

 

Make it grow and glow ...

Expand cards macro currently supports only few styles and changes. It would be nice to have  an option to change styles of a note according to user’s choice with color picker.

 

Love to hear your comments , suggestions on this. 

4 comments

Minh Tran
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
April 4, 2018

Nice work! Thanks for sharing @Alana Fernando.

Can we extract color of summary and title as parameters? So anyone can use their preference colors 

Davin Studer
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 5, 2018

Nice! Looks great!

You could cut out a bunch of the code in your original if instead of repeating the structure of the card for each possible status you set variables for the parts that change between types and then just plug those into your one card layout.

Hunter Morgan February 13, 2020

@Alana Fernando I am sorry if this is a silly question but how do I use the code you've shared? I love the look of the expanding box and I've tried copy and pasting but to no avail.

Could you please help this poor noob?

Like Angela Carlson likes this
Angela Carlson September 18, 2024

@Davin Studer How would you implement this? (not a developer, but I want to use this!)

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events