Expand Cards - to light up your confluence page

Alana Fernando
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 4, 2018

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. 

3 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 

Alana Fernando
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 4, 2018

thank you very-much for you suggestion @Minh Tran.

As you said we can extract summary and title colors as parameters. I think below code should do the trick and even the code length will reduced by your suggestion. 

## @param summaryclr:title=Summary color|type=string|desc=Color of summary|required=true

## @param titleclr:title=Title color|type=string|desc=Color of title|required=true


#if ( $paramStatus == "Success" )
#if ($paramtitle.length() > 120)
<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-cstmClr">
<h1 style="$paramtitleclr;"><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="$paramsummaryclr">$paramsummary</div>
#else
<div style="$paramsummaryclr"></div>
#end
#end
</div>
#end

<style>
.notice-cstmClr{
border-color:${paramtitleclr};
}
</style>

 

I think it is worth mentioning that; this way users have to type a color code or a name. most users in our company refuse to do that very often since it is time consuming to find a perfect color that matches their preference (too many choices) . so that most of the time they use default looks of the macros. that is the reason i add define style types in this macro.

but, it might not be the case in every where. so your suggestion is really helpful.  :-) 

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

It looks so neat and beautiful @Alana Fernando

Alana Fernando
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 4, 2018

Thank you very much @Minh Tran :-) 

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

Ohh i have just found your latest script missing and #end tag and the </div> right before the <style> tag seems redundant

Alana Fernando
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 4, 2018

thanks for letting me know. I just changed it :)

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

Awesome thanks @Alana Fernando

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.

Alana Fernando
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

Yes @Davin Studer that is absolutely correct. I'll try that. Thanks you very much for the suggestion :-) 

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?

Comment

Log in or Sign up to comment
TAGS
AUG Leaders

Atlassian Community Events