Datasource to JSON

Hi,
I am trying to implement a custom js component (https://frappe.github.io/gantt/) on cuba, I have managed to make it show, however am stuck on how i can attach it to a collection datasource.
this is basically the bare implemenation:

var tasks = [
{
id: ‘Task 1’,
name: ‘Redesign website’,
start: ‘2016-12-28’,
end: ‘2016-12-31’,
progress: 20,
dependencies: ‘Task 2, Task 3’
},

]
var gantt = new Gantt(element, tasks);

Is there a way i can get the tasks json through the state as a json?

Thanks in advance.

I am sorry but I don’t know what the Gantt class is, are you asking how to turn your json in a list of maps?

Hi,

First of all, I would recommend reading Using a JavaScript library to get an idea how to integrate a JavaScript component.

Then, I would recommend using Google Gson to serialize a datasource. You can do serialization every time the shared state and RPC invocations are sent to the client (in this case you need to use the beforeClientResponse method of the AbstractJavaScriptComponent implementation). For example:

public class Gannt extends AbstractJavaScriptComponent {

    ...

    @Override
    public void beforeClientResponse(boolean initial) {
        super.beforeClientResponse(initial);

        String dataJsonSting = serailizeDataSource();
        getState().data = dataJsonSting;
    }
    
    ...
}