Kanban not seeing userId

[Anonymous]

I have been testing out the kanban for use in our project. I have it set to retrieve the data from a backend server script. For the test I have set it up to return data similar to the demo scripts.
The problem is, while it is pulling everything else, it does not seem to recognize the userId like it does with the demo data from demo.js. Everything else works perfectly. It is setting the status, the text, progress, start and due date. Only the userId is not setting. Maybe I am being blind.
The data I am returning:
 

[{“id”:1,”status”:”toDo”,”text”:”Showing cover and title”,”tags”:”initial”,”progress”:71,”userId”:3,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″},{“id”:2,”status”:”inProgress”,”text”:”Visible\/hidden columns”,”tags”:”data”,”progress”:60,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″,”userId”:3},{“id”:3,”status”:”testing”,”text”:”Header”,”tags”:”visual”,”progress”:10,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″,”userId”:3},{“id”:4,”status”:”done”,”text”:”Header”,”tags”:”visual”,”progress”:18,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″,”userId”:3},{“id”:5,”status”:”inProgress”,”text”:”Property validation”,”tags”:”initial”,”progress”:86,”startDate”:”2021-05-20″,”dueDate”:”2021-06-20″,”userId”:3}]

The javascript:

let response = await fetch('/swc_test/test.php');
let kbData = await response.json();
window.Smart('#kanban', class {
    get properties() {
        return {
            addNewButton: true,
            collapsible: true,
            dataSource: kbData,
            editable: true,
            taskActions: true,
            taskDue: true,
            taskProgress: true,
            users: [
                { id: 0, name: 'Andrew', image: '/swc_test/images/people/andrew.png' },
                { id: 1, name: 'Anne', image: '/swc_test/images/people/anne.png' },
                { id: 2, name: 'Janet', image: '/swc_test/images/people/janet.png' },
                { id: 3, name: 'John', image: '/swc_test/images/people/john.png' },
                { id: 4, name: 'Laura', image: '/swc_test/images/people/laura.png' }
            ],
            columns: [
                { label: 'To do', dataField: 'toDo' },
                { label: 'In progress', dataField: 'inProgress' },
                { label: 'Testing', dataField: 'testing' },
                { label: 'Done', dataField: 'done', addNewButton: false }
            ]
        };
    }
});

[yavordashew]

Hi Clintre,
Thank you for contacting us!
The reason for your case is that when you want to assign a task to ‘userId’ you need also to set the userList property to true.
I have tested the kanban component with the same data that you have and it works as it should.
Here is the code snippet of the kanban:

window.Smart('#kanban', class {
    get properties() {
        return {
            collapsible: true,
            dataSource: data,
            addNewButton: true,
            editable: true,
            taskActions: true,
            taskDue: true,
            taskProgress: true,
            userList: true,
            users: [
                { id: 0, name: 'Andrew' },
                { id: 1, name: 'Anne' },
                { id: 2, name: 'Janet' },
                { id: 3, name: 'John' },
                { id: 4, name: 'Laura'}
            ],
            columns: [
                { label: 'To do', dataField: 'toDo' },
                { label: 'In progress', dataField: 'inProgress' },
                { label: 'Testing', dataField: 'testing' },
                { label: 'Done', dataField: 'done' }
            ]
        };
    }
});

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Anonymous]

The problem is not assigning the user. Essentially I took the “Editable” example and I created a PHP script to generate the data. In the Editable example the window.getKanbanData() is setting the assignment of the user to the task and the Kanban shows that. When I do that same thing sending it via json remotely, it is not setting it properly.
 
So if I set my javascript as…

async function fetchData() {
    let response = await fetch('/she_test/test2.php');
    console.log(response.status);
    if (response.status === 200) {
        let kbData = await response.json();
        window.Smart('#kanban', class {
            get properties() {
                return {
                    addNewButton: true,
                    collapsible: true,
                    dataSource: kbData.tasks,
                    editable: true,
                    taskActions: true,
                    taskDue: true,
                    taskProgress: true,
                    userList: true,
                    users: kbData.users,
                    columns: [
                        { label: 'To do', dataField: 'toDo' },
                        { label: 'In progress', dataField: 'inProgress' },
                        { label: 'Testing', dataField: 'testing' },
                        { label: 'Done', dataField: 'done', addNewButton: false }
                    ]
                };
            }
        });
        return kbData
    }
}
fetchData();
and it is calling a the following php script...

<?php
$out = array('tasks'=>array(),'users'=>array());
$out['tasks'][] = array(
    'id' => 0,
    'status' => 'done',
    'text' => 'Task 1',
    'tags' => getTags(0),
    'progress' => 100,
    'userId' => 2
);
$out['tasks'][] = array(
    'id' => 1,
    'status' => 'done',
    'text' => 'Task 2',
    'tags' => getTags(1),
    'priority' => 'high',
    'progress' => 100,
    'userId' => 3
);
$out['tasks'][] = array(
    'id' => 2,
    'status' => 'done',
    'text' => 'Task 4',
    'tags' => getTags(2) .', '. getTags(3),
    'priority' => 'high',
    'progress' => 100,
    'userId' => 2
);
$out['tasks'][] = array(
    'id' => 3,
    'status' => 'done',
    'text' => 'Task 5',
    'tags' => getTags(3),
    'userId' => 1
);
$out['tasks'][] = array(
    'id' => 4,
    'status' => 'done',
    'text' => 'Task 6',
    'tags' => getTags(1) .', '. getTags(3),
    'progress' => 100,
    'userId' => 0
);
$out['tasks'][] = array(
    'id' => 5,
    'status' => 'testing',
    'text' => 'Task 7',
    'tags' => getTags(2),
    'progress' => 90,
    'userId' => 3
);
$out['tasks'][] = array(
    'id' => 7,
    'status' => 'Task 8',
    'tags' => getTags(1) .', '. getTags(3),
    'progress' => 100,
    'userId' => 3
);
$out['tasks'][] = array(
    'id' => 6,
    'status' => 'testing',
    'text' => 'Task 9',
    'tags' => getTags(4),
    'color' => '#9966CC',
    'userId' => 3
);
$out['tasks'][] = array(
    'id' => 8,
    'status' => 'inProgress',
    'text' => 'Task 21',
    'tags' => getTags(4) .', '. getTags(1),
    'progress' => 25,
    'userId' => 0
);
$out['tasks'][] = array(
    'id' => 9,
    'status' => 'inProgress',
    'text' => 'Task 22',
    'tags' => getTags(2),
    'priority' => 'high',
    'progress' => 85,
    'color' => 'red',
    'userId' => 1
);
$out['tasks'][] = array(
    'id' => 10,
    'status' => 'inProgress',
    'text' => 'Task 23',
    'tags' => getTags(5),
    'userId' => 2
);
$out['tasks'][] = array(
    'id' => 11,
    'status' => 'toDo',
    'text' => 'Task 24',
    'tags' => getTags(5),
    'priority' => 'high',
    'progress' => 0
);
$out['tasks'][] = array(
    'id' => 12,
    'status' => 'toDo',
    'text' => 'Task 25',
    'tags' => getTags(2)
);
$out['tasks'][] = array(
    'id' => 13,
    'status' => 'toDo',
    'text' => 'Task 26',
    'tags' => getTags(2) .', '. getTags(5) .', '. getTags(1),
    'priority' => 'low',
    'userId' => 4
);
$out['tasks'][] = array(
    'id' => 14,
    'status' => 'toDo',
    'text' => 'Task 27',
    'userId' => 1
);
$out['tasks'][] = array(
    'id' => 15,
    'status' => 'toDo',
    'text' => 'Task 28',
    'tags' => getTags(1)
);
$out['users'][] = array('id'=> 0, 'name'=> 'Andrew', 'image'=> '/she_test/images/people/andrew.png');
$out['users'][] = array('id'=> 1, 'name'=> 'Anne', 'image'=> '/she_test/images/people/anne.png');
$out['users'][] = array('id'=> 2, 'name'=> 'Janet', 'image'=> '/she_test/images/people/janet.png');
$out['users'][] = array('id'=> 3, 'name'=> 'John', 'image'=> '/she_test/images/people/john.png');
$out['users'][] = array('id'=> 4, 'name'=> 'Laura', 'image'=> '/she_test/images/people/laura.png');
echo json_encode($out);
exit();
function getTags($tag=0){
    $tags = array(
        0 => 'initial', 1 => 'data', 2=>'visual', 3=>'property', 4=>'scrolling', 5=>'method');
    return $tags[$tag];
}
It should set the assignment of the tasks be setting the userId in the json data. It is not doing that. I have tried many different ways, just nothing seems to work.

[yavordashew]

Hi Clintre,
Thank you for the detailed information and code snippet!
This way I was able to further test your case and come to a solution for it.
In order for your use case to work properly you need to bind for DOMContentLoaded event of the ‘document’ like so:

document.addEventListener('DOMContentLoaded', () => {
  async function fetchData() {
    let response = await fetch('/server.php');
    if (response.status === 200) {
        let kbData = await response.json();
        window.Smart('#kanban', class {
            get properties() {
                return {
                    addNewButton: true,
                    collapsible: true,
                    dataSource: kbData.tasks,
                    editable: true,
                    taskActions: true,
                    taskDue: true,
                    taskProgress: true,
                    userList: true,
                    users: kbData.users,
                    columns: [
                        { label: 'To do', dataField: 'toDo' },
                        { label: 'In progress', dataField: 'inProgress' },
                        { label: 'Testing', dataField: 'testing' },
                        { label: 'Done', dataField: 'done', addNewButton: false }
                    ]
                };
            }
        });
        return kbData
    }
}
fetchData();
})

Also the same result can be achieved if you move all your scripts in the <head> tag.
And I strongly recommend you to add the following code in your php script when encoding the data into json like so:

header('Content-Type: application/json');
echo json_encode($out);

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Anonymous]

Thanks got it figured out

[Author]

Posts