Skip to main content

I have a "simple" requirement to allow the user to select between a fixed range of numbers, 0-4, and I'm trying to find an elegant UI for this input because a plain ol' single line of text input just won't do! Sure, I can turn on validation and enforce the min/max values, but this isn't visually communicated to the user.

So, I can do this with a Choice field formatted as either a Drop down list, or, with Option buttons (render as buttons: yes).

220514_pastedImage_2.png

Both of these visually communicate a ranged-input, but I was looking for more modern alternatives.

I found some really old posts referring to the use of jQuery UI and that Nintex Forms includes this by default? For example, I tried to use the .spinner() and .slider() methods on an input but it produces an error in the console. Also, if I search in the official help documentation, 0 results are returned on "jQuery", which wasn't promising. So, my questions are as follows:

  1. Is jQuery UI supported out-of-the-box with Nintex forms? If so, how does one go about using it?
  2. Alternatively, has anyone come up with some elegant UI solutions for ranged number inputs?

Thanks.

Hi Michael,

Nintex Forms bring jQuery by default. However, you need to reference $NWF instead of $ namespace.

I'm not very familiar with jQuery. If there are methods missing you can still add jQuery-JS-Files as references in your form which then should make your functions work.

But maybe you don't even need it. It doesn't look as fancy as your screenshot but you can have a drop down choice field render in 5 columns to enable a selection:

220501_pastedImage_1.png

Would that work too?

Best regards

Enrico

Hi Enrico,

Thanks for the reply, and yeah, I'm aware of the radio button display. I should have also mentioned that I'm very familiar with the use of jQuery (core) within Nintex forms by use of the NWF$ selector. So I was actually enquiring into the "jQuery UI" which is an extra component, and, as I mentioned above does not seem to be included by default... unless I've missed something!

I'm also aware that I could reference jQuery UI externally, but again, I was just enquiring to see if it was already there and, maybe more importantly, would it's use break anything? Nintex Forms is already doing a lot of fancy DOM manipulation behind the scenes.

Cheers.

Ah I see. No it won't break your form. I'm not sure if this is helpful for you but here's a form that uses jQuery to render controls differently. Maybe it gives you a hint on how you can achieve your goal:

Nintex jQuery Forms Demo

Sorry for the screenshot being in German:

220517_pastedImage_1.png

Best regards

Enrico

Hi Enrico,

Is there something wrong with the link your provided? It seems to take me straight to a binary file!? 

Either way, from the screenshot you attached I see that there's a slider (with the smiley face above) being used, so that might be helpful. Do you know if this is using jQuery UI? And are you able to provide an alternate link?

Cheers,

Michael

Hi!

The link should lead you to a xml of an exported Nintex Form. I zipped it so I hope the link works now:

Advanced Nintex Forms Demo

The form implements sliders, placeholders, reorder controls and intellisense so I hope it gives you a hint on how to implement your scenario.

Best regards

Enrico

Hi Enrico,

Thanks for sharing the form, the examples on there are certainly helpful! One quick question though, in addition to including the jquery-ui JS file, you also include the core jquery.js? For some reason, I thought this was being included by default -- is that not the case?

Cheers,

Michael

Hi Michael,

I'm glad this is helpful for you.

I don't really know if it is included by default. I got the example of one of the Nintex Devs and don't questioned the includes grin.png

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings