Skip to main content

Working with server

The Gantt library allows working both with the client and server data. The widget doesn't impose any special requirements on the backend. It can be easily connected with any backend platform.

You are free to create your custom server script or if you want to use the ready-made built-in backend, you can find the needed script in the following repository: Go backend

RestDataProvider​

To automate the process of working with the server, you can use the ready-made helper which is the RestDataProvider service.

The RestDataProvider service:

  • listens to the following actions and sends REST requests (via its send() method) to perform the corresponding data operations on the backend:

  • "add-task"

  • "update-task"

  • "delete-task"

  • "add-link"

  • "update-link"

  • "delete-link"

  • "move-task"

  • "copy-task"

  • provides a special method for loading data: getData() gets a promise with tasks and links data

  • offers the debounce functionality to avoid excessive server requests

Connecting RestDataProvider to the backend​

To connect RestDataProvider to the backend, you need to import the RestDataProvider component from @wx/gantt-data-provider, and then create an instance by providing the path to your server in the constructor. You should also include RestDataProvider into the Event Bus order via the api.setNext() method to send the corresponding requests to the server. To load data, apply the getData method.

<script>
    import { Gantt } from "@wx/svelte-gantt";
    import { RestDataProvider } from "@wx/gantt-data-provider";

    const url = "https://some_backend_url";

    const server = new RestDataProvider(url);

    let tasks = [];
    let links = [];
    server.getData().then(data => {
        tasks = data.tasks;
        links = data.links;
    });

    let api;
    $: if (api) api.intercept("update-task", data => {
        data.custom = "custom event";
    });
    $: if (api) api.setNext(server);

</script>

<Gantt
    {tasks}
    {links}
    bind:api />

Related articles: