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 · Accepted solution]

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.

[Craig Day · Accepted solution]

Bill, thanks for your help!

Well the actual issue was that there was a space between the '=' and 'boolean' :| 

So changing

type= boolean

To

type=boolean

 Fixed the broken macro editor issue...

A couple of notes on your other comments:

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;
}

-- Ok so I did try this and it was problematic. When I had the code written like this you couldn't stylize the individual tiles. It would just replace the .card class with whatever css you had for one of the tiles. Perhaps I could look into this again as maybe I had a different issue that is resolved now.

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

I believe you can also accomplish the same  by using the |default="" argument on the parameter initialization

Here is my, now, working 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

## Parameters
## @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

## Initialization
#if($paramTextColor == "")#set($paramTextColor ="ABABAB")
#end
#if($paramBackgroundColor == "")#set($paramBackgroundColor ="white")
#end
#if($paramImgHeight == "")#set($paramImgHeight ="150px")
#end
#if($paramImgWidth == "")#set($paramImgWidth ="150px")
#end
#if($paramHeight == "")#set($paramHeight ="200px")
#end
#if($paramWidth == "")#set($paramWidth ="200px")
#end
#if($paramDetail == "")#set($paramDetail ="")
#end
#if($paramtileURL == "")#set($paramtileURL ="https://")
#end
#if($paramTitle == "")#set($paramTitle ="myTile")
#end
#if($paramOpenInNewWindow == "")#set($paramOpenInNewWindow="false")
#end





<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)
<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]

You would think that the default setting for the params would do the trick. But unless they have fixed an eight-year-old bug CONFSERVER-23704, it won't work.

On the CSS, I would be more anal and restrict users to a select few, corporately approved versions. ;-) Then you could just use different class to select versions.

And I probably would have just had the title text passed in the macro body, to make editing easier.

[Bill Bailey]

Could you accept my answer (or vote) please? ;-)