Nintex forms: possible to limit the amount of choices that display in a dropdown?

  • 4 January 2019
  • 2 replies
  • 16 views

Badge +8

I have a form with a choice field using a dropdown with about 20 options.  Can I only show, say five of them at a time?  The scrollable box is showing like 15 of them.


2 replies

Badge +7

Updated: 

I thought it might be a little more efficient to combine the .blur and .change events so, I updated the code.

Solution:

  1. Set a Client ID JavaScript Variable on your Choice field.
  2. Then add the following code to your Custom JavaScript field in Form Settings:
    NWF$(document).ready(function () {
         NWF$('#' + myOptions).focus(function () {
              NWF$('#' + myOptions).attr("size", "6");
         });

         NWF$('#' + myOptions).on('blur change', function () {
              NWF$('#' + myOptions).attr("size", "1");
         });
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
  3.  You'll need to replace 'myOptions' with the variable name you added to the Choice field (unless you use 'myOptions' as your variable.
  4. To change the number of items that appear in the scrollable window, modify the number at the end of line 3. It's currently set to 6 so that 5 options plus the 'Select...' appear in the window. 

Explanation of Code:

Line 2 will run only when the object with 'myOptions' as its Client ID JavaScript Variable is in focus. This means if you tab or click on the control.

When that happens, Line 3 will be run, which sets the 'size' attribute of the control to the number given.

If we just left it at that, the size would always be set to that number, even if we clicked off of it.

To ensure it goes back to a size of 1, we have to also use .blur and .change. Both events have been combined on line 6

Blur is the opposite of .focus so, when it loses focus, line 7 is run to set the size back to 1.

This could be enough, except that when you click one of the options, it won't go back to 1 until you click or tab to something else. 

So, we add in the .change on line 6, which runs when a different option is selected, and it also sets the size back to 1.

Source:

This solution was found and modified from a Stack Overflow article called "How to change “size” of select when click on select?".

Badge +8

I am currently using a similar method.  In the "Custom Javascript" field under Form settings, I have:

 

NWF$(document).ready(function() { var objSelect = NWF$('.ListMultiSelect'); objSelect.find('select').attr('size', '5'); });

 

And then under the choice control, Formatting, CSS class is "ListMultiSelect".  

I like your way better happy.png  Thanks!

Reply