Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,362,006
Community Members
 
Community Events
168
Community Groups

Table Filter and User Macro not working properly. Filter shows code.

Edited

Hi,

 

I have a User Macro that I found in the forum for a Dropdown Menu.

I have customized it to fit my current needs and it works perfectly.

 

Now I'm trying to display the dropdown in a Table using the Properties Properties macro.

The filter is showing part of the Java script behind the Macro, instead of the current state of the dropdown.

 

## @Param DropdownId:title=Unique dropdown ID|type=string|required=true|default=1|desc=If more than one dropdown in page, change this to a unique name.
## @Param Label:title=Label|type=string|desc=Enter dropdown label, if desired

#set ( $DateCreated = $action.dateFormatter.formatGivenString("hhmmssms", $content.getCreationDate()) )


#set ( $dropdownId = "" )
#set ( $dropdownId = "dropdown-" + $paramDropdownId + $DateCreated)
#set ( $label = "" )
#set ( $label = $paramLabel )
#set ( $toplabel = "" )
#if ( $label == "" )
#set ( $toplabel = "top-label" )
#end
#set ( $pageId = $content.id )
#set ( $options = $body.split("\n") )
<form class="aui $toplabel">
<div class="field-group">
#if ( $label != "" )
<label for="$dropdownId">$label</label>
#end
<select class="select" id="$dropdownId" name="$dropdownId">
#foreach ( $option in $options )
#set ( $option = $option.trim().replaceAll('"', '' ) )
<option value="$option">$option</option>
#end
</select>
</div>
</form>
<script>
AJS.toInit(function() {
var canEdit = true;

#if ( $permissionHelper.canEdit($userAccessor.getUserByName($req.remoteUser), $content) )
jQuery("#$dropdownId").change(function() {
var dropdownObject = this;
jQuery.ajax({
url: contextPath + "/rest/api/content/${pageId}/property/${dropdownId}",
success: function(dropdownData) {
dropdownData.value = jQuery(dropdownObject).val();
dropdownData.version.number += 1;
jQuery.ajax({
contentType: 'application/json',
type: 'PUT',
url: contextPath + "/rest/api/content/${pageId}/property/${dropdownId}",
data: JSON.stringify(dropdownData)
});
},
error: function(response) {
var dropdownData = {};
dropdownData.key = "$dropdownId";
dropdownData.value = jQuery(dropdownObject).val();
jQuery.ajax({
contentType: 'application/json',
type: 'POST',
url: contextPath + "/rest/api/content/${pageId}/property",
data: JSON.stringify(dropdownData)
});
}
});
});
#else
canEdit = true;
#end

jQuery.ajax({
url: contextPath + "/rest/api/content/${pageId}/property/${dropdownId}",
success: function(dropdownData) {
jQuery("#$dropdownId").val(dropdownData.value);
if (!canEdit) {
jQuery("#$dropdownId").prop( "disabled", true );
}
}
});
});
</script>


Do I have to edit anything on my code to prevent this from happening?

Thank you.

1 comment

Hi @Aurelio Haro,

Yes, this is expected behavior: select option, as well as js code placed within a table cell, are returned as the text content of the cell, that's why you see it in filters.

It is possible to fix in your macro:

  1. Remove the script from the user macro and load it separately to the page header. You can add your script to the whole Confluence or some specific spaces.
  2. Replace the <select> element with some kind of dropdown element.

Also, I recommend you to try Handy Status macro from the Handy Macros app instead of custom macro - it works fine with the Table Filter and Charts app. Maybe you already have this one. Here is the demo site.

Comment

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

Watch 4 Confluence apps compete for Best App Demo in September's Appy Hours

Calling all collaborators! Appy Hours on the Atlassian Community is a monthly event where 4 Partner and app vendor presenters go head-to-head with 5-minute demos for the title of Best App Demo. I...

601 views 0 13
Read article

Atlassian Community Events