How to create editable grid in Bonita community version 7.11


I am unable to create editable grid in task form in Bonita studio community version 7.11

I want to place edit function in the data table in task form. Now only the option of read only data to be displayed in form of table is available.

I want to update and delete data or the table linked to default H2 database.

2 answers

This one is the BEST answer!


Have a look to the Bear widget too, that's maybe what you look for?



Submitted by chhayar on Wed, 10/14/2020 - 13:16

Hello Pierre-yves Monnet,

how to import this in Bonita Studio ?

Submitted by Pierre-yves Monnet on Wed, 10/14/2020 - 22:20


Open the UI Designer

Then in the UI Designer home page, you have a button "Import" (close to Create). Click on it, and give the ZIP file.


Submitted by chhayar on Thu, 10/15/2020 - 05:13

Thanks Pierre-yves Monnet ,

I have imported custom widget successfully. Now I want to mention database table, which option should I select?

Submitted by Pierre-yves Monnet on Mon, 10/19/2020 - 22:24


what do you mean by "database table" ? the widget is used to display information that you have on your browser.

Is data are in a database table, you must first

* do a SQL Query in your database

* then load the information to your browser by a REST API

You can develop your own REST API, or use the Gasoline page.

This is a Custom page, available in the Community, here

If your data is already on your browser, on a JSON variable, you have a properties to setup. You have some example in the page (import the file).


Submitted by chhayar on Tue, 10/20/2020 - 09:33

Thank you very much Pierre-yves Monnet . I wanted to display existing database data on bonita form in a tabular format with edit and delete functions

Submitted by Pierre-yves Monnet on Tue, 10/20/2020 - 20:07


Ok, so the best combinaison is:

1/ Widget Bear Table

2/ Gasoline page to get data

To Edit, I would recomment:

Add a Button "save" where you link a POST REST API

Develop your own REST API EXTENSION to do the SQL Update

Add a button "delete" where you link a POST REST API, then a REST API EXTENSION.

If you have time, I would recommend to do the "select" in this REST API EXTENSION too; then all operations (select, update, delete) are in the same REST API EXTENSION.



You can create a custom widget for that since there is no such widget available in Bonita UI Designer (there is also an article about custom widgets here if it is the first one you need to create).
You can also have a look in the contributions if someone developed such a widget and shared it with the community.



Submitted by Dibyajit.Roy on Fri, 10/09/2020 - 15:38

I have created many editable grids in Bonita. Its very easy.
Step 1 - Drag a container. Add Text boxes in the container.

Step 2 - Set a value for the container like formInput.customValue. Set each Textbox with $item.column name

Step 3 - create a API that pulls data from Database. Bind the JSON with formInput.customValue.Now your grid will be populated with rows from Database. You can use CSS to modify the Look and feel of the Grid to match a Table.

Step 4 - Create a formOutput and map formInput.customValue with formOutput. This way you can resend values from Grid back to Database.


Submitted by chhayar on Wed, 10/14/2020 - 13:18

Thanks Dibyajit.Roy