14 votes
363 downloads
Published on 15 April 2014 by Miguel "Kelter" Antunes

[Chosen] Discussion

thumbs_up_ico0thumbs_down_ico0
Hi Miguel,

Could you share an espace compatible with version 5.1 of Outsystems?

Cheers,
Carlos
thumbs_up_ico0thumbs_down_ico0
Hi Carlos,

I can confirm that a 5.1 version is under development and will be made available soon. Please keep an eye on the Component page (or this thread) for updates!

Cheers,


Miguel
thumbs_up_ico0thumbs_down_ico0
Hi Miguel,

I have uploaded the Chosen espace and added it to my application's references.

Now I can see it in chosenWebBlock under the Screen Flows list.

Now how will I make use of it? (As you can understand I am a newbie. :) )

Regards,

Armagan
thumbs_up_ico1thumbs_down_ico0
Hello Rifat,

now you can drag & drop the chosenWebBlock to your screen where you have the combo box or the select box, after doing that just make your combo/select box class = "chzn-select". You can do that by going to the Style property of the box and write there chzn-select.

regards,
Miguel
thumbs_up_ico1thumbs_down_ico0
Ok guys, version 5.1 of the Chosen is here!


Cheers!
Miguel
thumbs_up_ico0thumbs_down_ico0
Many thanks. This can do wonders in our web applications =)
thumbs_up_ico0thumbs_down_ico0
Thank you.

Cheers,

Armagan
thumbs_up_ico0thumbs_down_ico0
Using ajax refresh on an element previously affected by the plugin will make it revert to it's original shape.

- Added public refreshChosen action.

To avoid reverting elements to their original form, use the action after an ajax refresh (that will revert the element) and pass it the Id of the element.
Like so:

thumbs_up_ico0thumbs_down_ico0
António,

Kudos for that, i've updated the eSpace with that fix!

regards,
Miguel
thumbs_up_ico2thumbs_down_ico0
No problem.

Tip: To anyone wondering how to setup the "default message" (when nothing is selected), just add an extended property named data-placeholder with the message value  to the extended properties of the control.
thumbs_up_ico0thumbs_down_ico0
Can you add it to the 5.1 version as well?
thumbs_up_ico0thumbs_down_ico0
Hi Rebecca,
 
Miguel already added the eSpace in 5.1 version, check the post number 5, on 2011-08-02 11:25:18. In attachment is the eSpace in 5.1 version.
 
Regards,
Nelson Baptista
thumbs_up_ico0thumbs_down_ico0
The new refresh action isn't in the espace though.  Just GetDemoList.
thumbs_up_ico0thumbs_down_ico0
Hi Rebecca.

you're right, here it is Version 5.1 updated.

regards,
Miguel
thumbs_up_ico0thumbs_down_ico0
And what about listbox with option group??
thumbs_up_ico0thumbs_down_ico0
Hello Luis,

yes chosen supports < optgroup >< /optgroup >  tags as you can see here http://harvesthq.github.com/chosen/ and I think the best way to create a listbox with this tag is using Hugo Pinheiro's Category Dropdown component.

regards,
Miguel Antunes
thumbs_up_ico0thumbs_down_ico0
That component is a combo ,not a listbox and besides uses a list that is prepared with field by field.

Any way to create a widget that receives a general recordlist and source paramenters or i have to use always outsystems widgets and modify with jquery?
thumbs_up_ico0thumbs_down_ico0
Hi,

ok sorry i assumed listbox = combo... my bad!

from what i know theres is no such widget in service studio to do that, you have always to do by your own.

but i'm sure you can take a look to Hugo's component and adapt to a listbox,

the code for it:

<select multiple="multiple">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select> 

i've created an example for you here.

Oh! if you will create your own generic widget for this, don't forget to share with us! ;)

regards,
Miguel
thumbs_up_ico0thumbs_down_ico0
Ok.Thanks
thumbs_up_ico0thumbs_down_ico0
I just got an error when using firefox, in ie and chrome works well
 
$ is not a function
$(document).ready(function () { 

any suggestions to solve the problem?
thumbs_up_ico1thumbs_down_ico0
Hi Pedro,
attached is a modified version of the component I used at some point in time.

The main difference is it uses the platform's inner jQuery instead of another instance.
It also has one extra parameter for the "No results found" text and another extra parameter to support elements by Id (instead of just class).
I just modified the demo accordingly with these changes.

I didn't share this before in this thread because I'm not fully aware of the consequences regarding this practise (using the internal jQuery functions).
(Use at your own risk, or wait for someone from Outsystems to shed some light on the subject).
So far I didn't have any problems with this version.

Your error seems related to jQuery ($), so feel free to check if the attached version solves your issue (since it doesn't use a $ instance of jQuery).
If it doesn't or someone says it's dangerous to implement the way this one is, I'll be glad to provide another possible solution. :)
Best regards,
thumbs_up_ico0thumbs_down_ico0
Thanks Chinita, solved my problem.
thumbs_up_ico0thumbs_down_ico0
Anytime :)
thumbs_up_ico0thumbs_down_ico0
Hi Community!


Version 1.0.2 now have the changes suggested by António Chinita, thanks!

And its 5.1 based, 6.0+ guys just need to upgrade and use it.


Thanks all for using it it, and for your feedback!

regards,
Miguel
thumbs_up_ico0thumbs_down_ico0
Np. Surely one of the most useful UI components around. Can't live without it anymore :-)
thumbs_up_ico1thumbs_down_ico0
Great component!

This should be integrated in Rich Widgets :)
thumbs_up_ico0thumbs_down_ico0
Anyone noticed that with platform 5.1, after ajax refresh,the mandatory symbol disappears on the element where the 'chosen' it's applied?

Thanks in advance.

thumbs_up_ico0thumbs_down_ico0
How do we access the stylesheet chosen.css?
thumbs_up_ico0thumbs_down_ico0
Hello Joey,

you can see it in the resources folder of the eSpace.


regards,
Miguel
thumbs_up_ico0thumbs_down_ico0
Thanks for pointing me in the right direction.  But I don't understand something (sorry, i'm new at this).
I see the file in the Resources section of the Chosen sample espace, but I am using the file in another espace. 
Is there a way to move the chosen files into my espace?  And how is my espace accessing it?  Just on the server, I guess?
thumbs_up_ico0thumbs_down_ico0
Hi everyone,

thanks Miguel, the widget is great. I'd been using it and works great.

A couple of days ago i use it inside a Filter section (one that has the Container_ExpandCollapse widget) and the combo layout gets messy. See the picture below:


I find out that this only happens when the expandable container isn't displayed in the page load (Display = False).

Anyone has any idea how to fix this?



Regards
Eduardo Luís
thumbs_up_ico0thumbs_down_ico0
Ok,

in 7.0 the styling (the cross) in the example does not look very well, might be my browser(?)

furthermore, is it possible in the multiple-select box when you type in a word that is not available in the list it gets added instead of "no result for..." ???
thumbs_up_ico1thumbs_down_ico0
Eduardo Luís wrote:
 
 Ok, after lots of google search i was able to find out the solution (at least one!).

It begins by adding the following function to the jquery library:

//Optional parameter includeMargin is used when calculating outer dimensions
(function($) {
$.fn.getHiddenDimensions = function(includeMargin) {
    var $item = this,
        props = { position: 'absolute', visibility: 'hidden', display: 'block' },
        dim = { width:0, height:0, innerWidth: 0, innerHeight: 0,outerWidth: 0,outerHeight: 0 },
        $hiddenParents = $item.parents().andSelf().not(':visible'),
        includeMargin = (includeMargin == null)? false : includeMargin;
 
    var oldProps = [];
    $hiddenParents.each(function() {
        var old = {};
 
        for ( var name in props ) {
            old[ name ] = this.style[ name ];
            this.style[ name ] = props[ name ];
        }
 
        oldProps.push(old);
    });
 
    dim.width = $item.width();
    dim.outerWidth = $item.outerWidth(includeMargin);
    dim.innerWidth = $item.innerWidth();
    dim.height = $item.height();
    dim.innerHeight = $item.innerHeight();
    dim.outerHeight = $item.outerHeight(includeMargin);
 
    $hiddenParents.each(function(i) {
        var old = oldProps[i];
        for ( var name in props ) {
            this.style[ name ] = old[ name ];
        }
    });
 
    return dim;
}
}(jQuery));

It can be done by creating a webblock with the previous code in the javascript section.


Then you must locate the function get_side_border_padding = function(elmt) in then Chosen javascript and make some changes. After that it will look like this:

get_side_border_padding = function(elmt) {
     var side_border_padding;
     var elmt_dim = elmt.getHiddenDimensions();
     return side_border_padding = elmt_dim.outerWidth - elmt_dim.width;
};


And its done. 

Best regards
Eduardo Luís
 


 
thumbs_up_ico0thumbs_down_ico0
Hi,

I have succesfully used a branch of chosen in thise component, so I have the option to add items on the fly.

see https://github.com/harvesthq/chosen/pull/166

The issue is, how do I get those newly items to my espace?
When I hit a button with ajax I can "view" the widget and it's list, but it's still the orginal list.

effectively when adding the new 'option' I do:

function(term){
        var chosen = this;
        chosen.append_option({
          value: term,
          text: term
        });

How can I achieve this?
Or do I have to keep a hidden-input box for the changes?


thumbs_up_ico0thumbs_down_ico0
António Chinita wrote:
Tip: To anyone wondering how to setup the "default message" (when nothing is selected), just add an extended property named data-placeholder with the message value  to the extended properties of the control.
 
 Changing Chosen to use the platform's built-in jQuery seems to have broken this, since the data-* properties were not supported on jQuery 1.4.2, which Agile Platform 6.0 uses.

I changed Chosen's code a bit, to fix this issue (based on the code found on http://binarykitten.com/js/288-html5-data-attributes-and-jquerys-data-pairing-made-in-heaven.html ) and to fix another issue where comboboxes would end up having a width of 0px, if they were hidden when the script loaded. I also applied Eduardo Luís' fix (thanks!).

Btw, the attached eSpace is for OS version 6.0.
thumbs_up_ico0thumbs_down_ico0
I forgot to remove the IPP protection of the Chosen eSpace attached to the previous post. Here's a new version.
thumbs_up_ico0thumbs_down_ico0
Great fixes. Updated today, working like a charm :)
thumbs_up_ico0thumbs_down_ico0
Here is my stripped  version (without the latest fixes from Joao) where you can create items on the "fly".
If someone know a more simple way with Outsystems that can handle newly items on a select-box please let me know :)

oh, I made this in V7 btw!
thumbs_up_ico0thumbs_down_ico0
Guys, I'm sorry to say my fixes caused some problems on IE versions 8 and older! I tried to fix them, but due to time constrainst I just ended up rolling them back, so please beware of using that version.
thumbs_up_ico0thumbs_down_ico0
Hello Joost,

There is a small bug in your javascript.

On the expression <chosen init> in "chosen web block" the line:
	+ "',persistent_create_option: " + If(inpuParameters.inputChosen.IsPersistent, "true","false") + "});"
Should read:

	+ ",persistent_create_option: " + If(inpuParameters.inputChosen.IsPersistent, "true","false") + "});"
 
The extra quote causes non editable combos not to function properly, breaking the beauty of your code. ;)

Best Regards,
Grazina


wrote:
Here is my stripped  version (without the latest fixes from Joao) where you can create items on the "fly".
If someone know a more simple way with Outsystems that can handle newly items on a select-box please let me know :)

oh, I made this in V7 btw!
 
 
thumbs_up_ico0thumbs_down_ico0
I use the new version of Chosen Component (http://ivaynberg.github.com/select2/) although there is a "small" issue: I would like to have the same behaviour in this component as I have in all others that come with the platform - the red star when the field is mandatory.

Does anyone ever solved this little problem or didn't even t
hought about this?

Thanks
thumbs_up_ico0thumbs_down_ico0
Hi Guys,

This script does not work, if list is very big. In my case there are 12000+ records

Is there any solution for this?


Thanks
thumbs_up_ico0thumbs_down_ico0
Does anyone know how to change the text below the input field when no results are found?



There is a no_results_text parameter in the widget's weblock, but changing it like this doesn't seem to work.




Thanks in advance.
thumbs_up_ico0thumbs_down_ico0
Mário Pereira wrote:
I use the new version of Chosen Component (http://ivaynberg.github.com/select2/) although there is a "small" issue: I would like to have the same behaviour in this component as I have in all others that come with the platform - the red star when the field is mandatory.

Does anyone ever solved this little problem or didn't even t
hought about this?

Thanks
 
 Hi Mario, 

I'd like to see the same. For now, for all these fields I create my own validation in these fields with an onchange action that enables/disables the save / submit button(s) if a mandatory field is changed.

thumbs_up_ico0thumbs_down_ico0
Greate component, a must have :)

Some suggestions:
1. Upgrade to Chosen v0.9.11
2. Make the web block parameters mandatory, or at least the ElementId.
3. Maybe ComboBoxId would be a better name than ElementId.
thumbs_up_ico0thumbs_down_ico0
Carlos Henriques wrote:
Greate component, a must have :)

Some suggestions:
1. Upgrade to Chosen v0.9.11
2. Make the web block parameters mandatory, or at least the ElementId.
3. Maybe ComboBoxId would be a better name than ElementId.
 
 Hi Carlos,

I have already a new version with the last chosen code, I'm just tweaking out some things that came out from feedback on this thread. 
I'm just lacking a bit of time to spare on this, things are busy here! Stay tune!

Cheers,
Miguel
thumbs_up_ico0thumbs_down_ico0
the client validation when the select is mandatory doesnt work
thumbs_up_ico0thumbs_down_ico0
Hi guys,

Well, i'm having a problem with Chosen. It works fine in Firefox, Chrome, IE 7... but not on IE9. Anyone with the same problem?

Cheers,
Diogo Pacheco
thumbs_up_ico0thumbs_down_ico0
Are you sure it's being rendered as IE9 in IE9?

(hit F12 -> what is browser mode and document mode telling you? )

thumbs_up_ico0thumbs_down_ico0
wow... sorry guys... it was the browser mode: IE9 compatibility view. Thanks for the replying.
thumbs_up_ico0thumbs_down_ico0
Hello all,

i am using this component and it's working for me to select multiple elements. Actually i am saving the selection options in a session variable spliting by ",", however, how can i load that selection options in the same ListBox?

Thanks everyone.
thumbs_up_ico1thumbs_down_ico0
This problem appears to be solved.

I called an function in Source Record List of the ListBox which returns a record with the select = true for the options in session.

Cheers

thumbs_up_ico0thumbs_down_ico0
we could have some love again with this one :)

thumbs_up_ico2thumbs_down_ico0
Statler & Waldorf and the amazing flappy tweedles! wrote:
we could have some love again with this one :)
 
Hi there!

and the love came to this one! :) 
Version 1.0.3 is out, with the core of it updated to match the last version of Chosen, together with other small improvements.
See more.

Cheers,
Miguel