How to manage tasks in MODX Revolution - creating a TODO widget for the admin panel

The idea

We are writing content — a blog article, for example. In the process, an idea comes up: to add another paragraph, insert a picture, or link to a new article. Now there is absolutely no time to do this, but the idea needs to be recorded. Programmers usually use comments marked like @TODO in the code. This allows them to find all tasks directly in the project later.

Solution

I decided to use the same approach — tasks can be set directly in the content of the resource. It is enough to write “@TODO: Do something” and wrap it in an HTML comment so that this information is not displayed to site visitors.

Then create a widget and display it on the admin panel's main page — this way, the accumulated tasks will be visible and automatically remind you of themselves.

For convenience, the resource ID and link to it are displayed directly in the widget so that you can immediately go to editing without digging through the resource tree. To remove a task, you need to delete its text from the resource content.

Implementation in MODX

First, create a resource (or use an existing one) and add a task to the resource content — <!-- @TODO: Some task -->. After go to “Settings -> Dashboards -> Widgets” and create a widget.

The name can be anything; I will call it widget_todo_list. Select the Snippet widget type and immediately enter the snippet name (just the name for now; we will create it later) in the Widget content field. You can use any name for the snippet; I will call it WidgetTodoList. You can set the Size value to Full size.

Now let's link the widget we just made to the Dashboard. Go back to “Settings -> Dashboards -> Dashboards”. By default, there'll be just one item there — “Default.”

Go to edit the Default and click the Add widget button. In the pop-up window, select the previously created widget widget_todo_list and click Save. The widget should appear in the table with other widgets.

To set the order in which they will be displayed, enter a numerical value in the “Sorting” column of the table or drag&drop table row. The lowest values will be at the top, and the highest at the bottom. I want the tasks to be at the very beginning, so I enter 0.

Now we need to create a snippet—a PHP script that will retrieve resource content from the database, process it, and generate widget content—a table with tasks and links to resources. Let's create a new snippet and name it as we did earlier in the widget content—WidgetTodoList.

Here is the snippet code (from the point of view of separating logic and presentation, it is of course better to put the HTML in chunks so as not to mix HTML and PHP, but there is not much code here, so I decided not to complicate things and combine everything in one place):

/* Snippet for creating a widget for the control panel @TODO - Select all resources from the database where the content field contains <!-- @TODO: Task text --> - Loop through the obtained resources, select all tasks into an array using a regular expression - Generate and return a table with tasks */ <?php $query = $modx->newQuery('modResource'); $query->where(array('content: LIKE ' => '%@TODO:%')); $query->select('id,content,pagetitle'); $resourses = $modx->getCollection('modResource', $query, false); $todo_array = []; $todo_regexp = "<!--[ ]{0,}@TODO:[ ]{0,}(.*?)-->"; foreach ($resourses as $resourse) { $id = $resourse->get('id'); $pagetitle = $resourse->get('pagetitle'); preg_match_all($todo_regexp, $resourse->get('content'), $out); $tasks = $out[1]; if ($tasks) { foreach ($tasks as $task) { array_push($todo_array, array('id'=>$id, 'task'=>$task, 'pagetitle'=>$pagetitle)); } } } $content = ' <style> .panel-widget-todolist { font-size: 14px; width: 100%; border-collapse: collapse; color: #444; } .panel-widget-todolist thead { background-color: #D3DCE3; font-weight: bold; color: dimgray; } .panel-widget-todolist td { padding: 0.6em 18px 0.6em 5px; border: 1px solid #ddd; } .panel-widget-todolist td:nth-child(1) { width: 40px; } </style>'; $content .= "<div>Tasks count: " . count($todo_array) . "</div>"; $content .= "<div class='table-wrapper'><table class='table' cellspacing='0' cellpadding='0'>"; $content .= "<thead><tr><th>ID</th><th>Task</th></tr></thead><tbody>"; foreach ($todo_array as $todo) { $content .= "<tr><td><a title='" . $todo['pagetitle'] . "' href='?a=resource/update&id=" . $todo['id'] . "' target='_blank'>" . $todo['id'] . "</a></td>"; $content .= "<td>" . $todo['task'] . "</td></tr>"; } $content .= "</tbody></table></div>"; return $content;

Save and go to the admin panel's main page—a widget with a task table should appear. Each task has an ID for the resource it belongs to. The ID is wrapped in a link to this resource in the admin panel, so you can go there and edit it right away. The names of the resources are written in the “title” attribute of the link, so you can see the name of the resource when you hover over it.

In case you are confused:

1. create a widget *WidgetName with the Snippet type and specify *SnippetName in its content
2. create a snippet *SnippetName with our code
3. Link our widget *WidgetName to the dashboard

* You can specify the names of the widget and snippet as you wish.

Of course, you can keep track of tasks in a separate table or task manager, but, first, this will clutter up your task list with all sorts of trivialities, and second, you will need to switch from MODX to another system, enter the task there, then remember to close it, and so on... Therefore, I prefer the option of writing tasks directly in the resource content.

I hope this solution will be useful to someone, thank you for your attention!