Expand Cards - to light up your confluence page

[Alana Fernando]

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 

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. 

[Minh Tran]

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]

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]

It looks so neat and beautiful @Alana Fernando. 

[Alana Fernando]

Thank you very much @Minh Tran :-) 

[Minh Tran]

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

[Alana Fernando]

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

[Minh Tran]

Awesome thanks @Alana Fernando

[Davin Studer]

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]

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

[Hunter Morgan]

@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?