How to create editable grid in Bonita community version 7.11

Q&A
1

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

Hello,
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.

HTH

3

Hello, 

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

https://community.bonitasoft.com/project/widget-beartable

Best,

4

Hi
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. 

 

Regards

5

Thanks Dibyajit.Roy

6

Hello Pierre-yves Monnet,

how to import this in Bonita Studio ?

7

Hello,

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.

Best,

8

Thanks Pierre-yves Monnet ,

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

9

Hello,

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 https://community.bonitasoft.com/project/pagegasoline

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 page_xxx.zip file).

 

Best

10

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

11

Hello,

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.

Best,

 

 

12

Hi,

I am still unable to create the above for months, after asking many people I still couldnt create REST API Extension to edit existing data from H2 data base displayed as ready only table from Form editor> data model.

Please help me with an example.

 

Above gasoline page cannot be imported in my Bonita version 7.11.2

Import Error

Incorrect zip structure

The artifact has not been imported

Check that zip archive contains one of the following files

["page.json","widget.json"].

13

Hello,

1/ the Gasoline page is a Custom page, and can't be imported in the UI Designer, only in the Bonita Portal as a resource. (see the PY's Tutorial https://www.youtube.com/watch?v=GDw2FVuiTqE&list=PLwAOxvfuQ6zd8ovgYej9HD8BPkBet_a5F)

2/ what you ask for is possible with Bonita, but you will not find any "ready to use" tool / widget to do that. Bonita is used to design and administrate Processes, not to display a database table and have a edit./update/delete rows. That's mean you have to build all from scratch.it's possible, but it will be a (long) road.

In the community edition, there is no tool to help you to create a REST API Extension. You have to do that manually, creating your own ZIP file.

Best,
 

 

14

Thanks Pierre-yves Monnet

I am going through the code of Gasoline page in order to build the required functions from scratch.

Thanks for your guidance.

15

Cool,

Yes developing a custom page like Gasoline are is the most simple way in your situation. You may have a look at MoonRover too. Doing that, you can use Html, Angular, and any Rest Api you need. Only limitation: you have only access to GET, which imply to URL encode your parameters, and when needed, split the JSON you want to send to multiple URL. See MoonRover, I think I do that method in that page, else have a look to Meteor.

Best