Our flexible Kanban board for managing tasks with drag drop


Post by suhas.kachare »

Hi Team ,

I am using the Bryntum taskboard in React. I am trying to add an image in the task body item by referring to one of the examples. But I am not able to understand how it is accessing a URL.
In my case, below is my code

 
 bodyItems: {
      image: { type: "image", baseUrl: "resources/" },
    },

And from backend I am sending image:drawing.png

In my code, I have the resources folder, in which I have the drawing.png file.

I have also inspected the img element in debugger and found that it is getting src='resources/drawing.png' . But still its not working.

Please find the attached screenshot below for your reference.

Attachments
Screenshot 2023-03-14 at 9.41.38 PM.png
Screenshot 2023-03-14 at 9.41.38 PM.png (93.62 KiB) Viewed 336 times

Post by marcio »

Hey suhas.kachare,

I'm sharing a snippet based on our React demo that displays the image correctly:

import {TaskModel} from '@bryntum/taskboard';

class CustomTask extends TaskModel {
    static fields = [
        'team',
        'progress',
        'image',
        'rating'
    ];
}

/**
 * Application configuration
 */
const taskBoardConfig = {

    // Url for resource avatar images
    resourceImagePath : 'users/',
    
// Columns to display columns : [ 'todo', 'doing', 'done' ], // Field used to pair a task to a column columnField : 'status', // Project using inline data project : { taskModelClass : CustomTask, tasksData : [ { id : 1, name : 'Book flight', status : 'done', prio : 'medium', image : 'drawing.png' }, { id : 2, name : 'Book hotel', status : 'done', prio : 'medium', image : 'drawing.png' }, { id : 3, name : 'Pack bags', status : 'doing', prio : 'low', image : 'drawing.png' }, { id : 4, name : 'Get visa', status : 'doing', prio : 'high' }, { id : 5, name : 'Book train', status : 'done', prio : 'medium' }, { id : 6, name : 'Go to airport', status : 'todo', prio : 'low' }, { id : 7, name : 'Renew passport', status : 'todo', prio : 'high' }, { id : 8, name : 'Swim in pool', status : 'todo', prio : 'medium' }, { id : 9, name : 'Scuba diving', status : 'todo', prio : 'medium' }, { id : 10, name : 'Canyoning', status : 'todo', prio : 'low' }, { id : 11, name : 'Snorkeling', status : 'doing', prio : 'medium' }, { id : 12, name : 'Diving license', status : 'todo', prio : 'medium' }, { id : 13, name : 'Book cab', status : 'done', prio : 'low' }, { id : 14, name : 'Write postcards', status : 'todo', prio : 'medium' }, { id : 15, name : 'Take pictures', status : 'todo', prio : 'low' }, { id : 16, name : 'Take selfies', status : 'todo', prio : 'high' }, { id : 17, name : 'Post on instagram', status : 'todo', prio : 'medium' }, { id : 18, name : 'Call grandma', status : 'todo', prio : 'medium' }, { id : 19, name : 'Buy swimming ring', status : 'done', prio : 'high' }, { id : 20, name : 'Get in shape', status : 'doing', prio : 'medium' }, { id : 21, name : 'Iron shirts', status : 'done', prio : 'low' } ], resourcesData : [ { id : 1, name : 'Angelo', image : 'angelo.jpg' }, { id : 2, name : 'Celia', image : 'celia.jpg' }, { id : 3, name : 'Dave', image : 'dave.jpg' }, { id : 4, name : 'Emilia', image : 'emilia.jpg' }, { id : 5, name : 'Gloria', image : 'gloria.jpg' }, { id : 6, name : 'Henrik', image : 'henrik.jpg' }, { id : 7, name : 'Kate', image : 'kate.jpg' }, { id : 8, name : 'Lee', image : 'lee.jpg' }, { id : 9, name : 'Lisa', image : 'lisa.jpg' }, { id : 10, name : 'Mark', image : 'mark.jpg' }, { id : 11, name : 'Steve', image : 'steve.jpg' } ], assignmentsData : [ { id : 1, event : 7, resource : 1 }, { id : 2, event : 7, resource : 2 }, { id : 3, event : 8, resource : 2 }, { id : 4, event : 4, resource : 3 }, { id : 5, event : 7, resource : 3 }, { id : 6, event : 7, resource : 4 }, { id : 7, event : 7, resource : 5 }, { id : 8, event : 7, resource : 6 }, { id : 9, event : 7, resource : 7 }, { id : 10, event : 7, resource : 8 }, { id : 11, event : 7, resource : 9 }, { id : 12, event : 7, resource : 10 }, { id : 13, event : 7, resource : 11 }, { id : 14, event : 16, resource : 7 }, { id : 15, event : 16, resource : 8 }, { id : 16, event : 16, resource : 9 }, { id : 17, event : 16, resource : 10 }, { id : 18, event : 16, resource : 11 }, { id : 19, event : 19, resource : 10 }, { id : 20, event : 9, resource : 7 }, { id : 21, event : 12, resource : 8 }, { id : 22, event : 14, resource : 9 }, { id : 23, event : 17, resource : 10 }, { id : 24, event : 18, resource : 10 }, { id : 25, event : 11, resource : 9 }, { id : 26, event : 20, resource : 8 }, { id : 27, event : 1, resource : 7 }, { id : 28, event : 2, resource : 6 }, { id : 29, event : 5, resource : 5 }, { id : 30, event : 6, resource : 4 }, { id : 31, event : 10, resource : 3 }, { id : 32, event : 15, resource : 2 }, { id : 33, event : 3, resource : 1 }, { id : 34, event : 13, resource : 2 }, { id : 35, event : 21, resource : 3 }, { id : 36, event : 8, resource : 3 }, { id : 37, event : 17, resource : 9 }, { id : 38, event : 17, resource : 8 }, { id : 39, event : 17, resource : 7 }, { id : 40, event : 17, resource : 6 } ] }, bodyItems : { // Image image : { type : 'image', baseUrl : 'images/' }, } }; export { taskBoardConfig };

Also, I added a screenshot about how the folders should be organized and the demo with the images being loaded.

Special attention to the CustomTask configuration and the folder structure, I believe you should be good to go from there. :)

Attachments
Screenshot 2023-03-14 at 15.10.16.png
Screenshot 2023-03-14 at 15.10.16.png (237.07 KiB) Viewed 330 times
Screenshot 2023-03-14 at 15.09.42.png
Screenshot 2023-03-14 at 15.09.42.png (22.85 KiB) Viewed 330 times

Best regards,
Márcio


Post Reply