Drop down list User Macro

I found this user macro searching here but need to know if I have tweaked it correctly. Additionally, can someone run it and let me know what the output looks like if possible (screenshot?). I need to make sure it is correct before I send it to the admin to create it for me.

I want to create a drop down label box that can be changed in view mode, and the selection is saved. Need the default to be red label (blank) and then the selections to be Day1, Day2, Day3, Day4, Day5 preferably in green.

## @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
#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;

3 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

5 votes

Answer accepted

Updated code:

## @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>

You should not put the options (day1,day2,etc.) in the script itself, instead it should be put in the options field. If you want to show a label for the dropdown, it should be in the label field, not in the fieldId field. That should just be a unique number so that Confluence can identify which dropdown the macro refers to in the current page (in the case that you have more than one dropdown in a page).

Here's what it looks like (in Chrome browser) in the macro browser (along with the options you should put):

image2016-5-19 12:42:28.png

Here's what it looks like on the page:

image2016-5-19 12:43:21.png

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

If this works for you, could you please mark the answer as accepted?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Thank you! I have marked it as accepted. Took me a view days to get IT to try it out in dev.

I have a question though. I plan to use multiple drop down boxes (identical setup) on the same page. What happens if I dont use a "Unique dropdown Id" (copy and paste the macro over and over).

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Then it will save/load the same result for all dropdowns with the same ID. So if all of them have the same options, then it will select the same option for every single dropdown (with that ID). That is why the unique ID is there, so that Confluence can tell the dropdowns apart. You could certainly copy and paste the dropdown macro, it's just that you will have to go through afterwards and change the ID to something unique.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Great! Thanks. I really appreciate the help.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi Stephen and Angel,

I am running into an issue where the macro just outputs the body of macro rather than rendering it, regardless of the processing option I select.

Any idea why this could be?

Thanks!

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Harish, you'd have to post your copy of it here.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi Harish,

I'm guessing it's because for most of my user macros that were migrated when my answers were copied from answers.atlassian.com to community.atlassian.com, they changed all the < to < and the > to >, which won't work when copying and pasting. I updated the answer above, so if you try it again it might work.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

The god himself responds!

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Thanks Stephen! That worked!

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi @Stephen Deutsch

I've used your macro above and it's excellent, you're a credit to this community.

I wonder if you could entertain a follow-up question about this?

I've extended it slightly to update a target div in the article based on the drop-down selection value:

AJS.$('#$dropdownId').change(function () {
 var selection = AJS.$(this).val();
 AJS.$('#$targetdiv').load("$sourceURL #"+selection);
 });

The .load command pulls the contents of a div with the ID that matches the drop-down selection. The content in this case is a table with text and images.

This works great whenever I change the drop-down.

However, as I'm sure you're aware, on page load the drop-down initialises at the first value for a second before being updated to the actual set/remembered value. This means this extra line:

AJS.$('#$targetdiv').load("$sourceURL #"+AJS.$('#$dropdownId').val());

is not sufficient to update the div on page load, as it loads the content based on the drop-down's first value, and not the actual set/remembered value - essentially, my extra line is being executed too quickly.

Any ideas on how to ensure the targeted div would be updated with the correct information based on the set/remembered value in the drop-down?

Cheers,

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi @Stephen Deutsch

I just used the macro and it works great as a drop down, but I have two issues.

1. The colouring bit doesn't work for me (using Confluence server 6.10.1), but that is not that important.

2. This is the main thing. When I export the page with the dropdown to PDF, it exports with all the options listed, not just the one selected. see attached image.

dropdown export.PNG

Is there a way to resolve these issues?

If I had to remove the colouring bit, I only need to delete the following lines from the script right?

## @param ShowColors

#if ($paramShowColors == "true")
<style>
#$dropdownId { color:green }
#$dropdownId:invalid { color: red; }
</style>
#set ( $required = 'required="required"' )
#end

Many thanks in advance.

Peter

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

1 vote

Hi Angel, looks like my macro, but it doesn't look like you modified it correctly. I'll update it if I have time, but no promises.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

Hello, I found this question while searching for the answer how to create macro for the dropdown menu with URL link values. I tried to alter suggested code (with some addition of <a href=>link text</a>), but unsuccessfully. Maybe someone could help me with this?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Was this helpful?

Thanks!

Answers Developer Questions

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

Drop down list User Macro

3 answers

1 accepted

Comments for this post are closed

Was this helpful?

Thanks!

TAGS

Atlassian Community Events

Ask a question

Start a discussion

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

Drop down list User Macro

3 answers

1 accepted

Comments for this post are closed

Was this helpful?

Thanks!

TAGS

Atlassian Community Events