How to create and use gui elements (e.g. button) with XWiki API

Help / Discuss
, ,
#1

Hello everyone,

My question is about accessing an API for GUI elements from Velocity. Or maybe simple HTML elements?

I have the following scenario: In my wiki there are lots of pages which all have the same XObject. What I’ve already done is a hierarchical overview of all the pages with this object in the wiki by filtering them out (sorting them) and displaying them with in table as well as their properties with $myobj.get("myprop").
When switching to inline edit mode, I can edit the textfields etc., but can’t save them. But this is exactly what I need, one way or the other.
My idea was to have some kind of “Save” button after each row, when it gets klicked, it saves the properties of the document in this row.
Already found this, but it’s a submit button which reloads the whole page.

So it comes down to these questions:

  1. How can I create a button and define a simple event if it gets klicked (no complete reload as in the linked example)?
  2. How to store a property back into the document it comes from in velocity?

Thanks in advance for your help.

EDIT: It doesn’t have to be Velocity, using HTML inputs and JQuery seems to be more promising, though I don’t understand yet how to use the APIs and transfer data.

Kind regards

#2

I now solved it, thanks to the help of @vmassol.

TL;DR
This is how I did it:

  • build a form with HMTL+Javascript
  • make a HTTP request to a wiki page, URL can be built in JS
  • create a wiki page which parses the URL, retrieves
    document reference & values
  • store the values in the XObject of the referenced document.

Long explanation:
You can simply use a HTML macro to build a HTML form, as you would do it anywhere.
Then you either add a Javascript Extension (JSX) to the page, or you write your code directly in <script>...</script> tags. Then you can invoke JS code from HTML, e.g. when a button is klicked.
This JS code then retrieves the values from the HTML form fields and puts together an URL with parameters.
Then you create a XmlHttpRequest (or whatever) and send the HTTP request. It is going to a wiki page which parses it and retrieves the reference of the target document as well as the field names and values for the XObject you want to set.

Of course, I tried to make things as generic as possible, to make it extendable, but sometimes you still have to handle each field specifically, e.g. in a special HTML input.

The XWiki software doesn’t show very many things on the surface, but when you dig deeper you find out that it’s quite consistent and well thought-through even at details.

Thanks for such a great open source project!

Cheers

3 Likes
#3

Thanks @Valentin for posting back and summarizing what you did! I’m sure this can help others in the future.

Also thanks for the kind words. I’ve taken the liberty to put it on our testimonial page at https://www.xwiki.org/xwiki/bin/view/Main/Feedback/Testimonials

:slight_smile:

1 Like