how to create persistent dropdown in confluence page

[cipher]

I am trying to create a dropdown on a confluence page. I added the HTML macro to the page and then added code similar to

"

<select><option value="Test">Test1</option><option value="Test">Test2</option></select>

"

Now I see the dropdown in the view mode of the page. However that would not save the selection of a user and anytime the page is reopened the dropdown shows the default (first value in the HTML) code.

So how can I make it persistent.

I have another requirement too.

I want to be able to use this dropdown at several places on the page and also be able to add more options to the dropdown if required on the fly.

So I created a different page which only contains the above HTML code and then used the Page include macro, at every spot, on the page where I want this dropdown to show (I also used the excerpt / excerpt include macro) but thought the page include macro worked better.

So with this 2nd requirement in mind, again is there a way to have a persistent dropdown.

[Stephen Deutsch · Accepted solution]

I wrote a user macro to do this a while ago, might as well pass it on.  You have to do a little bit more complicated work than just putting a select field into a page in order to create a persistent 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 Options:title=Options|type=string|required=true|desc=Enter desired dropdown options separated by a comma.
## @param Label:title=Label|type=string|desc=Enter dropdown label, if desired
#set ( $dropdownId = "" )
#set ( $dropdownId = "dropdown-" + $paramDropdownId )
#set ( $options = "" )
#set ( $options = $paramOptions )
#set ( $label = "" )
#set ( $label = $paramLabel )
#set ( $toplabel = "" )
#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">
    #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>

I'm not sure what you mean by adding options "on the fly", but you can certainly customize the options on the edit page.  However, using excerpts is the wrong way to go.  First of all, you can only include one per page, and the whole point of an excerpt-include is to duplicate the content exactly, which means the content will be exactly the same.

For this user macro, make sure that you include a unique ID for each dropdown and then just put the possible options in the "Options" field of the macro options separated by a comma (i.e. first,second,third).

[cipher]

Hi Stephen, Thank you very much for this info. It is really helpful. However I am a very new user of confluence so it will take me some time to understand the code. I do understand the HTML and JS part , but not the confluence specific code yet. However I realized I need to be system administrator to create User Macros, which I am not and will probably not get those permissions or be able to contact the system administrator, since I work for a huge organization. Do you know of any other way of achieving this? About using the excerpt method. I do actually need the exact same dropdown at multiple places on the same page. Hence I thought of using it and I tested it and made sure it does what I need. I also tried creating the dropdown as a hidden excerpt on the same page and then include it at other places on the page but that just gave an error. However keeping the dropdown excerpt as part of another page and including it on the page I need the dropdown, worked fine. About changing it "on the fly". I may need to remove / add more options to the dropdown in the future. And again I want it to be reflected at every place the dropdown was included . Again this works fine with the excerpt-include method. Modifying the 'excerpt' changes every 'excerpt-include' instance.

[Angel Lopez]

Hi Stephen, this appears to be the macro I been looking for however I am a noob and dont know how to edit the macro include a unique ID or "Options".

What I need is basically for the drop down box to Display Day1, Day2, Day3, Day4, Day5, all in green if possible and then if nothing is has been selected for it to be defaulted red.

would the following changes be correct to accomplish my goal?

## @param DropdownId:title=Completion Date|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 Label:title=Label|type=enum|required=true|enumValues=Day1,Day2,Day3,Day4,Day5|desc=Choose a Status

Cipher,  I have pieced macros together before and had my admin team create the user macro for me. Not sure if that is an option for you but maybe you can pitch it to them.  

[Stephen Deutsch]

I answered this here: https://answers.atlassian.com/questions/38748776

[Joyce]

Truly godsent! Thank you for the user macro @Stephen Deutsch, works perfectly in v6.5.1