Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #113225
    natejacobson
    Participant

    Can I use Smart Kanban with a REST API?

    #113237
    Markov
    Keymaster

    Hi,

    This is possible, for example the following code shows how to fetch tasks from rest api and set the Kanban’s data source:

    const kanban = document.getElementById("kanban");
    
    // 1. Fetch data from REST API
    async function loadTasks() {
        const res = await fetch("/api/tasks");
        const tasks = await res.json();
    
        // Load into the Kanban board
        kanban.columns = [
            { label: "To Do", dataField: "todo" },
            { label: "In Progress", dataField: "inprogress" },
            { label: "Done", dataField: "done" }
        ];
    
        kanban.dataSource = tasks;
    }
    
    // 2. Listen for card movement and update REST API
    kanban.addEventListener("change", async (event) => {
        if (event.detail.type === "update") {
            const { id, status } = event.detail.item;
    
            await fetch(<code>/api/tasks/${id}</code>, {
                method: "PUT",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ status })
            });
        }
    });
    
    // Load tasks on startup
    loadTasks();

    Best regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.