It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Expand Cards - to light up your confluence page Edited

Alana Fernando Community Leader Apr 04, 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. 

2 comments

Minh Tran Atlassian Team Apr 04, 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 Community Leader Apr 04, 2018 • edited

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 Apr 04, 2018

It looks so neat and beautiful @Alana Fernando

Alana Fernando Community Leader Apr 04, 2018

Thank you very much @Minh Tran :-) 

Minh Tran Atlassian Team Apr 04, 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 Community Leader Apr 04, 2018

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

Minh Tran Atlassian Team Apr 05, 2018

Awesome thanks @Alana Fernando

Davin Studer Community Leader Apr 05, 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 Community Leader Apr 05, 2018

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

Comment

Log in or Sign up to comment
Community showcase
Published in Confluence

Confluence CVEs and common questions

Two vulnerabilities have been published for Confluence Server and Data Center recently: March 20, 2019 CVE-2019-3395 / CVE-2019-3396 April 17, 2019 CVE-2019-3398 The goal of this article is...

862 views 0 19
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you