Drop-Down Statuses Macro
Asked by 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")  &lt;style&gt;    #$dropdownId { color:green }    #$dropdownId:invalid { color: red; }  &lt;/style&gt;  #set ( $required = 'required="required"' )#end#if ( $label == "" )  #set ( $toplabel = "top-label" )#end#set ( $pageId = $content.id )&lt;form class="aui $toplabel"&gt;  &lt;div class="field-group"&gt;    #if ( $label != "" )      &lt;label for="$dropdownId"&gt;$label&lt;/label&gt;    #end    &lt;select class="select" id="$dropdownId" name="$dropdownId" $required&gt;	#if ($paramIncludeBlank == "true")	  &lt;option&gt; &lt;/option&gt;	#end    #foreach ( $option in $options.split(",") )      #set ( $option = $option.trim().replaceAll('"', '' ) )       &lt;option value="$option"&gt;$option&lt;/option&gt;    #end    &lt;/select&gt;  &lt;/div&gt;&lt;/form&gt;&lt;script&gt;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 );      }    }  });});&lt;/script&gt;
```


Answers:
author: Gregor Kasmann_Actonic
body: 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>
```

comments: author: Harish Anand
body: Thanks Gregor, that fixed the issue!


author: Kevin Jewett
body: Anything like this for the cloud version?

comments: author: Stiltsoft Support
body: Hi [@Kevin Jewett](/t5/user/viewprofilepage/user-id/1448996)

You could like our [Handy Macros for Confluence](https://marketplace.atlassian.com/apps/1214971/handy-macros-for-confluence-formatting-and-interactive-ui?tab=overview&hosting=cloud&utm_source=atlassian-community&utm_medium=answer&utm_campaign=handy-macros-traffic-sources&utm_id=1216111&utm_content=drop_down_menu_cloud). 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.


author: Andrey Khaneev _StiltSoft_
body: Hello Harish,

There is a ready solution: [Handy Status](https://docs.stiltsoft.com/display/HMFC/How+to+use+Handy+Status+macro) macro ([Handy Macros](https://marketplace.atlassian.com/plugins/com.stiltsoft.confluence.handy.macros/server/overview) add-on)


Tags: list

menu

select-list