Conditional formatting in user macro breaks macro editor

Craig Day

I've created a user macro that has some conditional formatting based on a user-selectable macro parameter.

 

The macro works but only if you place it by editing the page source.

When trying to edit the macro in Confluence the editor just shows a spinner (see attached photo).

 

Here is my macro code:

## Macro title: Rounded Corner Tile
## Macro has a body: No
## Body processing: Selected body processing option
## Output: Selected output option
##
## Developed by: Nick McCarty
## Date created: 08/06/2019
## Installed by: Nick McCarty

## This is an example macro
## @param Title:title=Title|type=string|required=true|desc=Tile title (H1 style)
## @param imgURL:title=Image URL|type=string|required=true|desc=URL of image
## @param tileURL:Tile link URL|type=string|desc=URL to link entire tile to
## @param Detail:Tile link URL|type=string|default=|desc=Short description
## @param Width:Width|type=string|desc=Width in pixels or % (of parent container)
## @param Height:Width|type=string|desc=Height in pixels or % (of parent container)
## @param ImgWidth:Width|type=string|desc=Width in pixels or % (of parent container) of image
## @param ImgHeight:Width|type=string|desc=Height in pixels or % (of parent container) of image
## @param BackgroundColor:Width|type=string|desc=Background color e.g #ABABAB
## @param TextColor:Width|type=string|desc=Text Color e.g #ABABAB
## @param OpenInNewWindow:Open in New Window|type= boolean|desc=Check to have tile open in new browser|default=false




<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
text-align:center;

padding-top: 5px;
padding-bottom: 5px;

}

.card a {
text-decoration: none;
}

.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-img {
border-radius: 5px 5px 0 0;
padding-top: 10px;
min-width:0px;

}

</style>
#if ($paramOpenInNewWindow == "true")
<div class="card" style="background-color:$paramBackgroundColor; width:$paramWidth;
height:$paramHeight;">
<a href="$paramtileURL" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" >
<img src="$paramimgURL"style="width:$paramImgWidth; height:$paramImgHeight;background-color:$paramBackgroundColor; " alt="Avatar">
<h4 style="color:$paramTextColor;"><b>$paramTitle </b></h4> 
<p>$paramDetail</p> 
</a>
</div>
#else
<div class="card" style="background-color:$paramBackgroundColor; width:$paramWidth;
height:$paramHeight;">
<a href="$paramtileURL">
<img src="$paramimgURL"style="width:$paramImgWidth; height:$paramImgHeight;background-color:$paramBackgroundColor; " alt="Avatar">
<h4 style="color:$paramTextColor;"><b>$paramTitle </b></h4> 
<p>$paramDetail</p> 
</a>
</div>
#end

Bill Bailey

I think this line may be causing you an issue:

<div class="card" style="background-color:$paramBackgroundColor; width:$paramWidth;
height:$paramHeight;">

Since you already have a style directives in your style tags earlier, why not restructure the code to move those definitions to your earlier style for the class card?

.card {
background-color:$paramBackgroundColor; 
width:$paramWidth;
height:$paramHeight;
}

 It may also be that some of the params are initially undefined. So you should set default values for each of the parameters in cases where no input is defined (best practices), for example:

#if($paramBackgroundColor=="")#set($paramBackgroundColor="#ABABAB")
#end

Also, I think this syntax is wrong:

#if ($paramOpenInNewWindow == "true")

That is should be

#if ($paramOpenInNewWindow == true)

But easier is just:

#if ($paramOpenInNewWindow)

I would try these fixes in reverse order. If they don't clear the problem, I will experiment with your code.