How to resize input filler control as it grows based on user input

  • 22 November 2018
  • 6 replies
  • 19 views
E
Badge +2

Hi all,

I have created a custom Nintex Forms control (which inherits from NintexFormControl) and generates a Select2 enabled multi select.

When the user selects items the form control needs more space, but how do I do that?

What is the correct NWF function to call to get all the form controls below to move down and the form itself to resize?

For added context, here is the HTML that is generated:

<div class="nf-form-input nf-section nf-filler-control nf-filler-highlightonvalidationerror nf-resizable nf-resizable">
<div class="nf-filler-control-border">
<div class="nf-filler-control-inner">
 <select multiple=""style="display: none" ...>
</select>
<span class="select2 select2-container ..." ...>
<!-- STUFF IN HERE GROWS -->
</span>
</div>
</div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Update: Here is an example of how it looks when there are too many items selected in the multi select:

In this example, this happens right when the forms is opened in edit mode. So after Select2 finishes rendering og or a new element is selected, I need a way to make nintex forms re-layout the controls. Note, as Chrome shows, even when the content overflows, the controls filler form still has its original size (due to absolute positioning).

Thanks, Egil

Ps. we are using Nintex for SharePoint 2016 4.3.1.0 with SharePoint 2016.

(Marian Hatala - ive seen you answer similar questions elsewhere, hope you can help here as well.)

6 replies

E
Userlevel 5
Badge +14

you may try to make a call to 

NWF.FormFiller.Functions.ProcessFillerControl(....)‍‍

however, I'm not sure it'll work in your scenario, I've never tested it with forms 2016 nor with custom control.

you may find some example on this search results

https://community.nintex.com/search.jspa?q=ProcessFillerControl 

E
Badge +2

I can detect via javascript in the frontend when the size of the control changes and needs more/less space, and at that point, call a javascript function. I did try the ProcessFillerControl function, but was unable to get it to work (looked at your previous answers related to it). However, I am in no way certain I am using the API correctly. Is there documentation somewhere that I can read with regards to it? 

E
Badge +2

Marian Hatala‌ - I got it to work. ProcessFillerControl works when I added a wrapper div around my content, such that there is only one child HTML element below the "nf-filler-control-inner", see screenshot below:

Then, this javascript snippet works:

$("select.auto-complete-lookup[multiple]").on("select2:select", function () {
    NWF.FormFiller.Functions.ProcessFillerControl(NWF$(this).closest('.nf-filler-control'), NWF$('#formFillerDiv'));
});‍‍‍

Note: "this" refers to the <select> element, so ProcessFillerControl needs the outer <div> with the .nf-filler-control css class, and the entire form-control container as its second argument.

My last problem is that shrinking doesnt work, but that is a minor issue i can live without fixing.

E
Userlevel 5
Badge +14

glad to hear that,  

ProcessFillerControl works when I added a wrapper div around my content

I've never (been granted enough resources) came to the need  to develop my own custom control, but looking at Forms SDK that sounds to me to be expected (or mandatory?) requirement  ...

https://help.nintex.com/en-US/sdks/sdk2013/#FormSDK/Topics/SDK_NF_SC001_Add_SubClasses.htm?Highlight=div 

ProcessFillerControl needs the outer <div> with the .nf-filler-control css class, and the entire form-control container as its second argument.

I hope that might have been obvious from provided examples

My last problem is that shrinking doesnt work, but that is a minor issue i can live without fixing.

from my experience ProcessFillerControl works in both directions - enlarging and shrinking.

have you checked layouting model that your custom control resize correctly when selected elements are removed?

btw, you mentioned you developed your custom forms control.

I've briefly browsed through the page you've linked at the beginning. out of that it seems to me select2 is just kind of a jQuery extension, but not an (general) object model that would support custom form control development in term if .net coding.

how did you proceed then? what you mean with custom control? or correct me if I'm wrong ...

anyway, the component seems to be quite interesting, if you manage it to integrate with nintex it might be worth of short blog post wink.png

E
Badge +2

Marian Hatala skrev:

glad to hear that, Egil Hansen happy.png 

 

 

ProcessFillerControl works when I added a wrapper div around my content

I've never (been granted enough resources) came to the need  to develop my own custom control, but looking at Forms SDK that sounds to me to be expected (or mandatory?) requirement  ...

https://help.nintex.com/en-US/sdks/sdk2013/#FormSDK/Topics/SDK_NF_SC001_Add_SubClasses.htm?Highlight=div 

I actually started out following that guide you link to and created a .net based custom component.

The thing is, it is not obvious from the tutorial nor the rather lacking documentation of the NintexFormControl and NintexFormControlProperties classes, which methods one needs to overwrite, what their expected output is, what methods are optional, and again, what their use is. The same goes with the javascript API, especially if you are new to the nomenclature of Nintex Forms. So I hope @nintex will improve the documentation.

As for how I did it. I created a standard SharePoint Farm Project and added the Select2 and jQuery to the Layouts folder. Then, in the FormControl (which inherits from NintexFormControl) I add the script and css references needed and construct the HTML.

The goal is a (multi) lookup field form control that works like the People Picker, i.e. has live search/auto complete functionlity, and queries the lookup list from the client using the SharePoint REST API. It also tries its very best to work even when the lookup list has more than 5000 items / has reached the list view threshold.

To figure out how to actually get all the details right, I have been decompiling the Nintex .dlls and looking at how they have build the builtin form controls... so yeah, I would love some better documentation to work with.

Anyway, thanks for your input.

E
Badge +2

My last problem is that shrinking doesnt work, but that is a minor issue i can live without fixing.

from my experience ProcessFillerControl works in both directions - enlarging and shrinking.

have you checked layouting model that your custom control resize correctly when selected elements are removed?

The wrapper div (`div.auto-complete-lookup-wrapper`) correctly resizes down to a lower height, however, the `div.nf-filler-control-inner` keeps its height. I've tried trigger `ProcessFillerControl` in various ways, but I can never get it to shrink again, only grow. Any tips?

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings