Drop-Down Statuses Macro

[Harish Anand]

Hello,

I would like to create a dynamic drop-down menu with pre-decided entries (that also change color) which can be chosen in view mode. I found this macro on this forum, but am having trouble with it. 

The macro seems to output the code rather than rendering it. I have tried configuring the processing options, but no luck. 

Any ideas of why this is happening?

Thank-you in advance!

## @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 Options:title=Options|type=string|required=true|desc=Enter desired dropdown options separated by a comma.
## @param IncludeBlank:title=Include Blank Option|type=boolean
## @param ShowColors:title=Show Colors|type=boolean|desc=If this option is selected, then blank dropdown = red, filled dropdown = green.
## @param Label:title=Label|type=string|desc=Enter dropdown label, if desired
#set ( $dropdownId = "1" )
#set ( $dropdownId = $paramDropdownId )
#set ( $dropdownId = "dropdown-" + $dropdownId )
#set ( $options = "" )
#set ( $options = $paramOptions )
#set ( $label = "" )
#set ( $label = $paramLabel )
#set ( $toplabel = "" )
#set ( $required = "" )
#if ($paramShowColors == "true")
  <style>
    #$dropdownId { color:green }
    #$dropdownId:invalid { color: red; }
  </style>
  #set ( $required = 'required="required"' )
#end
#if ( $label == "" )
  #set ( $toplabel = "top-label" )
#end
#set ( $pageId = $content.id )
<form class="aui $toplabel">
  <div class="field-group">
    #if ( $label != "" )
      <label for="$dropdownId">$label</label>
    #end
    <select class="select" id="$dropdownId" name="$dropdownId" $required>
	#if ($paramIncludeBlank == "true")
	  <option> </option>
	#end
    #foreach ( $option in $options.split(",") )
      #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 = false;
  #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>

[Gregor Kasmann_Actonic]

I think you should replace &lt; to "<" and &gt; to "<":

## @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 Options:title=Options|type=string|required=true|desc=Enter desired dropdown options separated by a comma.
## @param IncludeBlank:title=Include Blank Option|type=boolean
## @param ShowColors:title=Show Colors|type=boolean|desc=If this option is selected, then blank dropdown = red, filled dropdown = green.
## @param Label:title=Label|type=string|desc=Enter dropdown label, if desired
#set ( $dropdownId = "1" )
#set ( $dropdownId = $paramDropdownId )
#set ( $dropdownId = "dropdown-" + $dropdownId )
#set ( $options = "" )
#set ( $options = $paramOptions )
#set ( $label = "" )
#set ( $label = $paramLabel )
#set ( $toplabel = "" )
#set ( $required = "" )
#if ($paramShowColors == "true")
  <style>
    #$dropdownId { color:green }
    #$dropdownId:invalid { color: red; }
  </style>
  #set ( $required = 'required="required"' )
#end
#if ( $label == "" )
  #set ( $toplabel = "top-label" )
#end
#set ( $pageId = $content.id )
<form class="aui $toplabel">
  <div class="field-group">
    #if ( $label != "" )
      <label for="$dropdownId">$label</label>
    #end
    <select class="select" id="$dropdownId" name="$dropdownId" $required>
    #if ($paramIncludeBlank == "true")
      <option> </option>
    #end
    #foreach ( $option in $options.split(",") )
      #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 = false;
  #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>

[Harish Anand]

Thanks Gregor, that fixed the issue!

[Kevin Jewett]

Anything like this for the cloud version?

[Stiltsoft Support]

Hi @Kevin Jewett

You could like our Handy Macros for Confluence. This app is available for all hosting types (Cloud, Server, Data Center). With its help users can create custom status sets with unlimited number of statuses to choose from. These statuses can be changed in the page view mode without switching to the edit mode later on. There are also many other functions in our app that could be beneficial for diverse teams, like Handy Date, Handy Button, and others.

[Andrey Khaneev [StiltSoft]]

Hello Harish,

There is a ready solution: Handy Status macro (Handy Macros add-on)