how to create persistent dropdown in confluence page

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.

 

 

1 answer

1 accepted

3 votes
Accepted answer
Stephen Deutsch Community Champion Nov 17, 2015

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 smile

## @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 )
&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"&gt;
    #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;

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

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.

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.  

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 24, 2018 in Confluence

Atlassian Research opportunity with Confluence templates

Do you use templates with Confluence? Take part in a remote 1-hr workshop. You'll receive USD $100 for your time!   We're looking for people to participate in a   remote 1-hr workshop...

1,085 views 17 14
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you