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

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