Feature Request - Tags component

[MitchTalmadge]

I'd love to see support for a tags component like you'd find when creating a StackOverflow question, for example. Here's a demo of the ButterFaces tags component for an idea: http://www.butterfaces.org/butterfaces-showcase/tags.jsf

Currently the only way I am making tags work for me is by using the PrimeFaces autoComplete-multiple field, and it was never intended for this purpose; I had to use some hacky methods to make it work, and it doesn't even work very well.

I think this would be a really great feature :) If only ButterFaces, BootsFaces, and PrimeFaces all played together nicely

[zhedar]

I've seen this somewhere. Maybe we discussed this before, maybe I just saw it at the ButterFaces showcase and found it neat. I think I've also seen a nice library, which we could extend.

@asterd Did you suggest something like that?

But I like the idea, maybe we can make it happen.

@MitchTalmadge Also, if you're interested in trying to implement something like this yourself, feel free to ask us anything.

[MitchTalmadge]

@zhedar There is this library, maybe it's what you're thinking of: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

I'll see if I can give it a shot, but don't wait up on me. I'm great with Java, not so much with JavaScript. :P

[stephanrauh]

Looks like a nice and simple addition to BootsFaces. I've scheduled it for 1.0. I'd love to see it in 0.9 - but that would mean to implement it next week, and it would mean I'd have to implement it myself. Which is unlikely, at least if we're talking about next week.

@MitchTalmadge If you'd like to contribute this component yourself to BootsFaces, you're welcome. Don't worry about JavaScript. We're a team. Don't hesitate to ask us if you run into trouble. I'd only recommend you "claim" the task, so no other team member starts to implement the component simultaneously.

[TheCoder4eu]

Yes, it looks really nice +1 !

[Coolius70]

I was just searching for the error why data-role="tagsinput" is not working. Good to know that it is not a feature yet. I would appreciate to have tags soon. ++1

[stephanrauh]

I've implemented both tags and typeahead by adding these features to the good old <b:inputText />. Current status: minor CSS glitches with the tags, and currently it's not possible to fetch the suggestions dynamically from the server (e.g. using a REST call).

[MitchTalmadge]

Exciting! Thanks for your hard work! Sorry that I never got around to attempting this, I'm trying to meet my own deadlines :P

[stephanrauh]

Well, if you find some spare time after meeting your deadlines, you're always invited to contribute to BootsFaces :). In the meantime, we're happy you report bugs, feature requests and new ideas. That's an important feedback for us, too!

[MitchTalmadge]

I cloned the source and built the jar today to test tags, and I am using this code:

<b:inputText tags="true" value="#{TagsController.tags}" />

where tags is a String and has a getter/setter, but the field works just like any other field, no tags support it seems. data-role="tagsinput" is set, but other than that, it looks like a normal field. Am I doing something wrong?

[MitchTalmadge]

Actually it works if I don't put it inside something that is rendered with ajax. In my case, I need the tags field to only appear once the user clicks on a button, for example. Unfortunately, if it's not rendered on page load, it doesn't work at all once rendered. If it is rendered on page load, it works fine.

[MitchTalmadge]

I found that I can give the input a fake class and run

$('.tags').tagsinput('refresh');

and it will make the field look as it should. I looked at the BootsFaces code for a place that I might be able to do this automatically, but I couldn't find anywhere to do so.

Unfortunately, though, it does not seem to style well with the horizontal form: (The second tags field is the field I was using before b:inputText got the tags feature -- the PrimeFaces multiple selection field.)

In fact, neither does the regular b:inputText. I've had to make all my forms using h:inputText due to the problem seen in this example:

Here is the code for that example:

<b:inputText label="Name:" labelStyleClass="col-xs-3 control-label" styleClass="col-xs-9" value="#{AssetTypeEditController.editableAssetTypeName}" required="true" requiredMessage="This is required." maxlength="32"/>

<div class="form-group">
    <h:outputLabel value="Name: *" styleClass="col-xs-3 control-label"/>
    <b:column colXs="9">
        <h:inputText styleClass="form-control" value="#{AssetTypeEditController.editableAssetTypeName}" required="true" requiredMessage="This is required." maxlength="32"/>
    </b:column>
</div>

[stephanrauh]

Both errors surprise me. As for the AJAX bit: is there an error in the JavaScript console of your browser? BootsFaces tries to load only the JavaScript files it really needs, and that fails if a component is shown for the first time using an AJAX request. The solution is to add every component on the start page. They may be deactivated by render="false". But they have to be there to make sure every CSS and JS file is loaded.

As for the layout: Did I get you right that this is not a problem of the tag widget, but of b:inputText in general?

[MitchTalmadge]

For AJAX, no errors. I am already using the hidden component trick that you mentioned in order to load the stylesheets and javascript. The reason I figured out to do a refresh of the component with $('.tags').tagsinput('refresh'); is because I saw on the tags input plugin page:

"Just add data-role="tagsinput" to your input field to automatically change it to a tags input field."

So, I figured that the plugin searches for tags inputs on page load, then changes them if it finds them. With AJAX, it obviously can't do that, so I have to do it manually.

Right, the b:inputText just doesn't seem to layout well at all in a horizontal form.

[stephanrauh]

Oh, you're right. I almost always use JavaScript to initialize the jQuery magic, but in this case, I simply relied on the data-role attribute. Maybe I should change that. But maybe refreshing the tags on an AJAX request is the better approach. We could generate the JavaScript code conditionally, reducing the size of the initial HTML page.

[stephanrauh]

Assigning the label a certain number of columns to span is a good idea. I didn't know it's possible, so I didn't implement it yet. Let's open a new ticket and target it for 0.9.1.

[TheCoder4eu]

Code freeze has started, so I am closing this issue.