I’d like to share with you the latest changes I’ve made to the Select2 APEX plugin. In case you wonder what I am talking about, have a read through my introductory article on the plugin here. I first of all updated the Select2 library files to version 3.4.3 to keep up with the latest features and bug fixes. Then I also fixed a bug in my own code that caused special characters to be escaped incorrectly. I simply dropped the Has Escape Special Characters attribute and let Select2 itself take care of special characters.
Now, the main reason I wrote this article is to highlight two new features you should know of. The first one is all about events. All kinds of events are getting fired while interacting with a Select2 page item. For example, the select2-highlight event is fired whenever you hover over an option in the dropdown. Before version 2.1, it was impossible for dynamic actions to capture these events, as they weren’t registered in the plugin. I eliminated this shortcoming by adding the below list of events to the plugin.
- change – fired when the selection is changed
- opening – fired before the dropdown is shown
- open – fired after the dropdown is shown
- highlight – fired when a choice is highlighted in the dropdown
- selecting – fired when a choice is being selected in the dropdown
- clearing – fired when a choice is being cleared in the dropdown
- removed – fired when a choice is removed or cleared
- focus – fired when the control is focussed
- blur – fired when the control is blurred
So it’s now possible to create a dynamic action based on one of these events. That means you can execute any action you want as a result of a Select2 event getting triggered on a particular page item. Some events contain additional data parameters that are accessible via the this.data object. The highlight event for example comes along with val and choice. So this.data.val would give you the ID value of the option you’re hovering over and this.data.choice is an object that contains detailed information on the option being hovered. More information and a live example can be found on the documentation page.
The other new feature was introduced by Martin Giffy D’Souza and makes it possible to determine whether the display or return column of the LOV is used as the return value of a Select2 item in tagging mode. Before version 2.2, the return value was always based on the display column. That makes sense since tagging mode allows new values to be entered and it’s obvious that these new values don’t have an ID assigned. That’s why we revert to the display values as the source for the return value.
However, it’s now possible to change this behaviour by selecting the Return Column in the newly added setting Return Value Based on. This time, the ID’s of selected pre-existing options will be used in the return value. Newly added values will still rely on their display value to be part of the return value.
Here’s a little example in case my explanation was a bit confusing. Imagine you’d have a Select2 item of type tagging support with the following LOV definition:
SELECT ename, empno FROM emp ORDER by 1;
I select the pre-existing values KING and ALLEN, and I also add Nick, a newly added value, to the list. This is how the return value looks like when the Return Value Based on setting is set to Display Column:
KING:ALLEN:Nick
And the return value when the setting is set to Return Column:
7839:7499:Nick
You can clearly see the difference between both return values. The first one is composed of display values, while the second one is a mix of both ID and display values.
Reblogged this on Sutoprise Avenue, A SutoCom Source.
LikeLike
Reblogged this on Sutoprise Avenue, A SutoCom Source.
LikeLike
Hi, great plugin.
I’m facing a bug on it for tagging mode.
If I set its “Return Value Based on” property equal to “RETURN COLUMN”, it works fine only if the return value of the associated LOV is numeric, otherwise the controls does not get correctly rendered.
Do you already have a fix for this? Where could I dowload it from?
LikeLike
Hey marcocalia,
You’ve spotted a bug indeed. I fixed it and updated the plugin: https://apex.oracle.com/pls/apex/f?p=64237:20
Download and re-import the plugin to update to the latest version.
Thanks for the bug notification.
Nick
LikeLike
Hi Nick,
I don’t see the live-search feature, that is as an autocomplete. Another thing, just try cascading LOV, I think it will not work, I haven’t try your plugin, but I tried Select2 in my app with live search, but it broke the Cascading LOV.
LikeLike
Hello,
What exactly do you mean with ”live-search” feature? Are you referring to the search box that immediately filters the options? I don’t see anything wrong with that. Take a look at the Select2 APEX plugin demo page: https://apex.oracle.com/pls/apex/f?p=64237:20
The cascading LOV feature should also work out of the box in APEX 4.2. It’s not supported in APEX 4.1 though.
Kind regards,
Nick
LikeLike
I am really sorry, I am not sure what happened, it is there the live-search and also the Cascading LOV support.
Great job, keep working on it.
LikeLike
Hi Nick,
is there an option to submit page after select2 change ?
LikeLike
There is no such out-of-the-box option available. The “Page Action when Value Changed” setting can not be used in plugins. However, it is not difficult to achieve the desired behaviour.
– Create a dynamic action that triggers on the “Change [Select2]” event.
– Add a true action and select the “Submit Page” action.
That should do it.
LikeLike
Hi, I am trying to set the value of Select2 by using the dynamic quick pick functionality mentioned here – http://anthonyrayner.blogspot.com/2008/02/dynamic-quick-picks-apex-style.html. But it is not populating. I am able to populate a text field, native select list but not the select2. please advice.
LikeLike
Hello,
The htp.anchor procedure includes the setValue JavaScript method to set the value of an item. You can’t set the value of a Select2 page item that way. Use the following method instead:
Nick
LikeLiked by 1 person
This method don’t work on apex 5, I try to use on dynamic action to set value with javascript action, don’t work!
LikeLike
Hi Erick,
Use the following JavaScript code to set the value of a Select2 item if you’re using version 2.6.4 or higher of the APEX plugin.
In older versions of the plugin, you should use the following to set an item’s value.
LikeLike
Hi, How can I set the multiple values?
LikeLike
Hello,
You can do something like this:
7839:7900 are two LOV return values separated by a colon.
Hope that helps,
Nick
LikeLike
HI
How can I translate the message that select2 return in case no data was found in another language. I am using Apex -oracle 4.2
Thanks
LikeLike
Hello,
Go to Shared Components > Component Settings > Select “Select2 [Plug-in]” > Enter a value for the “No Matches Message” item.
The standard XLIFF translate functionality of APEX allows you to further translate the messages under Component Settings.
Nick
LikeLike
its did not fetch data which has new line feed
LikeLike
Can you be a little more specific please? What characters cause this problem? chr(10), chr(13), \n, \r?
LikeLike
Hi Nicki,
I’m having trouble getting an effect using the select2…
I have 3 items, where the second query depends on the first and third of the consultation depends on the second amendment.
I wonder how do I to change the value of the first item (LOV Popup) automatically the two items select2, have their updated values without the need I have to select them.
It’s possible?
Thank you!
LikeLike
Hello, your question is a bit unclear for me. Are you asking me how to refresh the second and third select list when the first one changes? In that case you should use cascading LOV’s. The “Cascading LOV Parent Item(s)” for the second item would be the name of the first page item. The “Cascading LOV Parent Item(s)” for the third item should then be the name of the second page item. This technique will cause the Select2 items to automatically refresh when the value of the first or second item changes.
LikeLike