Modifying view page with plugin

[Daniil B]

Hello,

I'm trying to figure out how I would go about to modify the view page in jenkins via plugins. I would like to understand how you would place for example a button under the listed jobs (beside "Icon: S M L" for example) and also invoke methods which may affect the jobs in that current view if the button is clicked.

Dashboard-view-plugin has a wide varity of options which modifies the UI but the code is way to complex for me to understand in order to create something similar. Many ListViewColumn plugins are straight forward and easy to follow but cannot be adapted to modify UI (In a way that I would like). UI_samples-plugins shows how to use different elements but not how to implement them in a view page.

Anyone who can point me in the right direction in where to look and how to write UI modifying plugins? Would "View" be a relevant extension point? If yes, why? If no, which extension should be used?

Thanks for the help!

// Bogge

[Oleg Nenashev]

It would be helpful if you provide some descriptions and sketches of UI you want to create. Jenkins has many extension points allowing to create custom UIs (up to pure HTML), so there's no universal answer.

четверг, 2 июля 2015 г., 10:13:45 UTC+3 пользователь Daniil B написал:

[Daniil B]

I'd like to add button(s) somewhere at the page where you have the list of jobs for a given view tab (servername/view/someview/). My idea was to add checkboxses for each job in a column (already done) and then be able to modify the selected jobs with one button press (the buttons I want to implement). This is to save time when for example deleting, disabling/enabling, build jobs etc. My challange is to understand how my plugin will create buttons at this page and also how the buttons can detect that the checkboxes for each job is checked or not.

[Robert Sandell]

I implemented a similar thing a while back, unfortunately not in any OSS repo.

It wasn't beautifyl and a bit hacky, but it worked.

In the column header I put a javascript function that made an AJAX callback for each checkbox click, on the backend it stored the view and item checked in the user's http session.

Then a TransientViewAction that returned an Action for each ListView that had the column configured, so a menu item would appear in the side panel and I used that instead of your "button".

But you could also do some prototype or jQuery DOM manipulation from the column header and put a button wherever you like on the page, although those kind of hacks could potentially break down the line when changes are made to the ListView layout.

/B

--
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/a1d5e10e-8a94-482f-bca1-98a14a24bc0b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Robert Sandell

Software Engineer

CloudBees Inc.

[Daniil B]

Thanks for your suggestion Robert!

I acutually thought of using an Action extension to act as button since it is easier to implement. I've gotten the item menu in the side panel and the checkboxes up but need to connect them together. Since I'm quite new to plugin development I feel very limited in what can be done but more limited in how it is done. It would be appreciated if you could elaborate more on how you made them work together, e.g. what .jelly files were used and how the functionalites communicate with eachother programmatically. I will try to follow what you've already said!

 I've read almost everything on Jenkins IC website so I'm familiar with the concepts but lack the experience..

Thanks again!

// Bogge

[Robert Sandell]

Yes it is a bit tricky indeed.

I'm not sure my solution is the best approach but it works and survives page reloads. You could probably do it by pure javascript without any callbacks to the server as well.

First in your ListViewColumn implementation add a "javascript bindable" method, something like

@JavaScriptMethod
public void mark(String fullName, boolean checked) {
    Set<String> marked = getMarkedSet();
    if (marked != null) {
        if(checked) {
            marked.add(fullName);
        } else {
            marked.remove(fullName);
        }
    }
}

getMarkedSet() would get it from the user's HttpSession by Stapler.getCurrentRequest().getSession(true) a special Set for this particular view instance.

make a columnHeader.groovy (or .jelly if you are so inclined) for your ListViewColumn

def st = namespace("jelly:stapler")
th(tooltip: _("tooltip"), _("Check"))
st.bind(var: "myItemSelector", value: my)

And in column.groovy (or .jelly) you can then call the bound java proxy set in the header.

def f = namespace(lib.FormTagLib)
td {   
    f.checkbox(checked: my.isMarked(job.fullName), onclick: "myItemSelector.mark('${job.fullName}', this.checked)")
}

/B

To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/7540b665-2e37-40ab-9247-6478237299c8%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Daniil B]

Thank you very much Robert for sending time on this post. I did as you said and got it to work! You gave me a very simple example of how to make this kind of binding work, which I really appreciate. Now I have to find a way (via ajax request or something) to disable/enable jobs from the backend, but thats for another post.

Thanks again!

// Bogge