Highlight: TV-integrated drag & drop KANBAN board

AppGini / Highlights of the day / Webdevelopment

Description

An integrated drag & drop KANBAN board for table views which changes status and modified by/on columns of records just by dropping into a different slot.

Showcase

Example

Table calculations contains a column named state_id which is a lookup, referencing states-table. There are four different states in states-table. Every state has been rendered as slot and therefore is available as drop-target. Additional states can be added, of course.

When dropping an item into a different slot, there is an AJAX call from client (browser) to server. The serverside PHP script validates the passed data and checks for edit-permission on calculations-table. Then the script updates status_id, modified_by and modified_on fields. If this was successful, the serverside PHP script returns some JSON back to the client and the client updates the table view at the top of the page. So you can immediately see the change in the table view.

Implementation

Once again I have encapsulated all functionality into a simple to use code fragment for my hooks-file:

function calculations_footer($contentType, $memberInfo, &$args)
{
	$footer = '';

	switch ($contentType) {
		case 'tableview':
			$kanban = AppGiniHelperKanbanBoard::create("calculations", "name", "status_id", "calculation_states", "name");
			$kanban->title = "Integrated KANBAN Board";
			$kanban->setModifiedByColumn("modified_by");
			$kanban->setModifiedOnColumn("modified_on");
			$footer .= $kanban;
			break;

//  [...]

Next Steps

There are a few ideas now:

  • Integration of before_update and after_update hooks (if any)
  • Show icon or color inside the slot-headers
  • Show additional data inside the items
  • Standalone custom page instead of integrated into TV
  • Highlightig item while dragging
  • Highlighting slot when item enters panel while dragging
  • Disabled (hidden) slots
  • ✔️ Different sort order of slots
  • Rules for transitions:
    • conditionally allow/deny drag of records
    • conditionally allow/deny drop into slots
  • Actions
    • before_drag
    • before_drop
    • after_drop
  • Optimize flickering which is a result of reloading the table view above, not caused by the board

Summary

For the moment I'm quite happy with this implementation. There is a tasks table in this project and I'm pretty sure I am going to enable I did the same drag & drop feature for tasks and task_states, too.

I have added max-height and scroll-bar option and also the slots can be sorted by any column. There is a position-column in task_states table which I am using here. So, this is quite flexible for my purposes.

Do you like it?