Customization todo list

To Do List
#1

Hello, I’m utilizing the licensing account and TODO list. However, I can’t customize the to-do list. I would like to include additional information such as Status and Priority outside of the task text, such as the due date in the ToDo list.
Is that even possible?

Customization TODO list
#2

Hello,
Unfortunately, there isn’t a built-in option for this. However, you can achieve it manually by adding these details using JavaScript.
Here’s an example solution:

const defaultPriorities = [
    { id: 1, label: 'High', color: '#ff5252', hotkey: 'Alt+1' },
    { id: 2, label: 'Medium', color: '#ffc975', hotkey: 'Alt+2' },
    { id: 3, label: 'Low', color: '#0ab169', hotkey: 'Alt+3' },
];

function updatePriorityElement(taskElement, priorityData) {
    const existingPriority = taskElement.querySelector('.wx-todo_priority');
    
    if (existingPriority) {
        existingPriority.remove();
    }

    if (priorityData) {
        const priorityDiv = document.createElement('div');
        priorityDiv.className = 'wx-todo_priority';
        priorityDiv.innerHTML = `
            <span class='wx-todo_priority-text' style='color: ${priorityData.color};'>
                ${priorityData.label}
            </span>
        `;

        const contentDiv = taskElement.querySelector('.wx-todo_list__content');

        if (contentDiv) {
            contentDiv.appendChild(priorityDiv);
        }
    }
}

document.querySelectorAll('.wx-todo_tree__row').forEach(taskElement => {
    const taskId = taskElement.querySelector('.wx-todo_list')?.getAttribute('data-list-id');
    const tasksData = tasks.find(t => t.id === taskId);

    if (tasksData) {
        const priorityData = defaultPriorities.find(p => p.id === tasksData.priority);
        updatePriorityElement(taskElement, priorityData);
    }
});

list.api.on('update-task', ({ id, task }) => {
    const taskElement = document.querySelector(`.wx-todo_list[data-list-id='${id}']`)?.closest('.wx-todo_tree__row');
    if (taskElement) {
        const priorityData = defaultPriorities.find(p => p.id === task.priority);
        updatePriorityElement(taskElement, priorityData);
    }
});

Please see: DHTMLX Snippet Tool

#3

Thanks. It is working for me.

1 Like