[milanshah]

Hello,
I want to implement autocomplete suggestions on my Dropdown field which get values from SQL database.
I am trying to use external JS librabry like Select2.
I copied JS and CSS links of select2 library but UI just keeps on rendering and throws error

Code: Select all

uncaught TypeError: $(...).getControl(...).select2 is not a function

I also copied those files in public_html folder and copied its url into external library and also checked the accessibility to those files from browser like

http://{SERVER-ADDRESS}/{FILENAME.EXT}

I also tried

Code: Select all

$('#category').getControl().find("select").select2()

but it throws same error.

How can we implement autocomplete in dropdown fields by select2 or any other method?
"Suggestion" web control does give search functionality but it does not shows values unless you type search string

[amosbatto]

I just tried using Select2 in PM 3.2.3 and it works, either with the library loaded from the internet or loaded from the workflow/public_html directory. You should verify that the files are world readable if using a Linux server.

Here are two versions of the dynaform. See the JavaScript code and the "external libs" property:

test model info.json

(1.41 KiB) Downloaded 447 times

test model infoWithLocalSources.json

(1.33 KiB) Downloaded 398 times

Here are the Select2 files:

select2.min.js

(66.16 KiB) Downloaded 457 times

select2.css

(17.18 KiB) Downloaded 430 times

[milanshah]

I was using same select2 versions and same way as you described in comments and dynaforms but it wasn't working for me but as I used select2 files given by you it worked. Wola

Thank you

[justinopsky]

How can i use Select2 into a grid, using a dropbox, with a sql query?

[amosbatto]

How can i use Select2 into a grid, using a dropbox, with a sql query?

You can use this JavaScript:

Code: Select all

//add Select2 to the "salesAgent" dropdown in all existing rows in the grid when the Dynaform loads:
var nRows = $("#productList").getNumberRows();

for (var i = 1; i <= nRows; i++) {
  $("[id='form[productList]["+i+"][salesAgent]']").select2({
    placeholder: 'Select an agent'
  });
}

//add Select2 a dropdown in a grid row when it is added:
$("#productList").onAddRow( function(aNewRow, oGrid, rowIndex) {
  $("[id='form[productList]["+rowIndex+"][salesAgent]']").select2({
    placeholder: 'Select an agent'
  });
});

Where "productList" is the ID of the grid and "salesAgent" is the ID of the dropdown inside the grid
You can add your database query in the dropdown's "sql" property. If you want to force the user to select an option, then add an option to the dropdown whose key is blank.

Here is a sample Dynaform for you to study:

form using select2.js.json

(4.92 KiB) Downloaded 416 times

[justinopsky]

Thanks.

[milanshah]

Hi,
I'm upgrading my processmaker version from 3.0 to 3.3 RE-1.0.
As previously discussed on this topic I was using Select2 for my Dropdown field in processmaker3.0 but When I am testing the same in 3.3 RE-1.0, list is not getting populated in Dropdown. I only get one value in the dropdown.
Query is giving correct result in 'id' and 'name' format.
If I remove select2 function call from javascript then I get all values in normal processmaker dropdown.

Code: Select all

$('#Setcategory').getControl().select2({
  placeholder : "select a category"
}); 

is it not compatible 3.3?

[amosbatto]

Select2 works fine in my installation of PM 3.3.0 Community (in Debian 9.5 with Firefox 52).
I suspect that you forgot to place the select2.min.js and select2.css files in the workflow/public_html/ directory. They would have been deleted when you upgraded.

[milanshah]

files are present and select2 is also getting applied but options are not getting popoulated inside dropdown.

With Select 2, no option appears

Screenshot from 2019-01-11 10-19-53.png (8.5 KiB) Viewed 11972 times

Without select 2, options appear

Screenshot from 2019-01-11 10_45_22.png (12.23 KiB) Viewed 11972 times

[amosbatto]

Export your Dynaform and post it here if you want me to try and figure out why it isn't working.

[milanshah]

Hi ,

Please find attached process dyanaform.

[amosbatto]

I assume that you are using an old version of the Select2 library. If you stick this code in the "external libs" property of your Dynaform:

Code: Select all

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css,https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js

Then you will see that it works.

[milanshah]

It is giving same results with these CDNs also i.e. it is not showing options in dropdown.
I changed the query in the dynaform I shared with you because of obvious reasons which was pretty straight forward but my actual query is quite big with multiple joins, is it causing the problem here??

Because when I used a simple query like 'select id, name from users' It worked but if I changed it to my original query it doesn't. But the same query is working in Processmaker 3.0-RE-1.8 which was my previous version.

[amosbatto]

Does the database query work if you don't use Select2?

[milanshah]

Yeah It does work

[amosbatto]

Do you see any errors when you turn on your web browser's debugger? Select2 is a pretty small piece of code, you can probably figure out where it is failing if there are errors. Also, get the latest version of Select2, since web browsers often change.
Also in the debugger, look at what is getting returned by the database query. If you don't find that it is returning anything, then you might need to increase the memory_limit and the max_execution_time in the php.ini file.

[milanshah]

There is no Error in browser's debugger.
I tried creating view for my query but still its not working.

After trying it in different ways I found that if I remove Where clause which has variable '@@USER_LOGGED' it works fine.
example If I hard code the userID in the place of @@USER_LOGGED it is working.

Is the problem with case Variable?

[amosbatto]

Oh, I see the problem. Create the following trigger:
@@currentUser = @@USER_LOGGED;
Set this trigger to fire before the Dynaform.

Then, in your Dynaform, add a hidden field whose ID and variable is "currentUser".

Then change you your query to: WHERE SOME_FIELD=@@currentUser

[shereensoliman]

i got the same error "uncaught TypeError: $(...).getControl(...).select2 is not a function
" v 3.3.6 i put css & js in public_html but i can not add external lib from local pc with port 81