Applying JavaScript and CSS on f:select

[Daniel Akua]

Hi all,

In my plugin I have a <f:select> element with the multiple attribute (multi-select) that is changing according to another field.

My problem is that I want to apply JavaScript and CSS to it to make it look better than the standard multi-select element.

it currently looks like this:

and I want it to look something like this:

I have the required JS and CSS files and it is working on a normal <select> element but not on <f:select>.

How do I apply JavaScript and CSS on <f:select>?

Is there some guide on how to do it?

Tips or links will be appreciated.

[Ullrich Hafner]

Where do you want to use the element? In one of your views? Or in a job configuration page?

It is not required to use a f:select. Can’t you directly use the select or what is missing in that case (data binding?)?

Am 10.05.2021 um 11:37 schrieb Daniel Akua <danie...@experitest.com>:

Hi all,

In my plugin I have a <f:select> element with the multiple attribute (multi-select) that is changing according to another field.

My problem is that I want to apply JavaScript and CSS to it to make it look better than the standard multi-select element.

it currently looks like this:

<before.png>

and I want it to look something like this:

<after.PNG>

I have the required JS and CSS files and it is working on a normal <select> element but not on <f:select>.

How do I apply JavaScript and CSS on <f:select>?

Is there some guide on how to do it?

Tips or links will be appreciated.

--
You received this message because you are subscribed to the Google Groups "Jenkins Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jenkinsci-de...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/5c068520-dace-47bf-beff-5fbdc7392038n%40googlegroups.com.
<before.png><after.PNG>

[Daniel Akua]

I am using this element in a "build environment" step in the configuration page.

And I must use the f:select because i need the binding.

[Ullrich Hafner]

They only way I see is to copy the select.jelly (https://github.com/jenkinsci/jenkins/tree/master/core/src/main/resources/lib/form) 

into your plugin and try to rewrite it so that it works with your JS and CSS.

To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/29e9b8b5-8ae2-4059-b40e-26053dfe58c7n%40googlegroups.com.

[Tim Jacomb]

Why can't you apply CSS to it?

Are you missing attributes? Do you need to change the markup?

Better to avoid forking core widgets if you can as then plugins get out of sync when we make changes in core, and it was a real pain when we did the form modernisation work,

and any plugins that fork the widgets will look inconsistent if/when there's follow up work

To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/E2CAF2E0-D4E5-4EA6-8A8E-E126AA9581AD%40gmail.com.

[Daniel Akua]

It's not just CSS, it's JavaScript as well. the element ignores it.

If i add id to f:select, it is removed in the html. if i use the auto generated name (_.XYZ) i can find the element and apply the changes but then i lose the binding.

I need to find a way to have both the binding and the pretty look

[Gavin Mogan]

I think you need to give concrete examples (I've gotten in the habit of saying vague questions give vague answers)

Can you list the things you've tried. What did happen? and what you wanted to happen instead?

Gavin

To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/a7ef2e84-861e-4937-b5e3-62ebc21765b2n%40googlegroups.com.

[Björn Pedersen]

From his examples I guess he wants somethig like  a choosen.js multiselect for a mulit-choice lists like  in extend-choice plugin.

Maybe take a look at 
https://plugins.jenkins.io/chosen/ (although rather antique...)

Björn

[Ullrich Hafner]

A more modern widget is available as 

https://github.com/jenkinsci/select2-api-plugin

It is currently only available on the client side but it shouldn’t be hard to add support for the Jenkins form concept so that it can be used in server side UI code. 

Better to avoid forking core widgets if you can as then plugins get out of sync when we make changes in core, and it was a real pain when we did the form modernisation work,

and any plugins that fork the widgets will look inconsistent if/when there's follow up work

Yes, this is something you need to keep in mind. If you use your own widgets you will not get support if something changes in core. 

To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/7be24a71-0b13-418e-9010-645bbb392725n%40googlegroups.com.

[Daniel Akua]

i'll check if select2 and chosen have the pretty multi-select and the data binding that i need and update this thread