fbpx

Announcing Bryntum TaskBoard

We are thrilled to announce our all new Kanban board component, the Bryntum TaskBoard. Even though this is the first official release, it is already jam packed with features. Read on to find out more and be sure to try it out!

To do Doing Reviewing Done .b-taskboardbase { --taskboard-background : #fff; --taskboard-body-padding : 1em; --taskboard-card-border-top : 5px solid currentColor; --taskboard-column-background : #eee; --taskboard-column-border-radius : 0 0 3px 3px; --taskboard-column-header-border-radius : 3px 3px 0 0; --taskboard-column-header-border-top : var(--taskboard-card-border-top); font-size : 12px; } .b-taskboard-column.b-inline .b-taskboard-card { min-height : 3em; } .b-micro-cards .b-taskboard-card { background : currentColor; border-top : none; } .b-taskboard-card-body .b-taskboard-text { font-weight : 300; } .b-micro-cards .b-taskboard-resource-avatar-overflow::after, .b-micro-cards .b-resource-avatar { border : 1px solid #fff; } .b-taskboard-column:not(.b-large-cards,.b-medium-cards) [data-ref=tags], .b-micro-cards [data-ref=tags] { display : none; }

Any framework

Just like the other modern components in our suite, the TaskBoard is written in pure JavaScript to work with any framework or no framework at all. It ships with wrappers for Angular, React and Vue – making it easy to use with the framework of your choice. It is also designed to work with Locker Service in Salesforce.

JavaScript

jquery supported

Columns and swimlanes

TaskBoard displays tasks in columns and optionally in swimlanes. Both columns and swimlanes are store based and can be collapsed, rearranged and filtered. Tasks are also held in a store, allowing easy sorting and filtering.

To do Doing Done Urgent Later .b-taskboardbase { --taskboard-background : #fff; --taskboard-column-gap : 0; --taskboard-column-background : #f7f8f9; --taskboard-column-header-background : #f3f4f5; --taskboard-card-border-top-radius : 0; --taskboard-card-border-bottom-radius : 0; --taskboard-card-border-left : 3px solid currentColor; font-size : 12px; } .b-taskboard-column-header { border-bottom : 1px solid #d8d9da; } .b-taskboard-column-header, .b-taskboard-column { border-left : 1px solid #d8d9da; } .b-taskboard-column-header.b-last, .b-taskboard-column.b-last { border-right : 1px solid #d8d9da; }

Dragging multiple tasks

One or more tasks can be dragged to change order within a column or to another column to change the status of each task. TaskBoard supports selecting multiple tasks using clicks and modifier keys, keyboard navigation or by marquee selecting.

To do Doing Done .b-taskboardbase { --taskboard-background : #607d8b; --taskboard-body-padding : 1em; --taskboard-gap : .75em; --taskboard-card-border-top : 5px solid var(--taskboard-background); --taskboard-column-background : #eeeeee77; --taskboard-column-border-radius : 3px; --taskboard-column-header-background : transparent; --taskboard-column-header-color : #fff; --taskboard-column-header-icon-color : #ccc; --taskboard-columntoolbars-color : #fff; font-size : 12px; }

Assigning resources

TaskBoards datalayer is based on the same datalayer used in the Scheduler, and just as Scheduler, it supports multi-assignment. Resources can be assigned using the task context menu, task editor or through inline editing.

To do Doing Done .b-taskboardbase { --taskboard-column-gap : 0; --taskboard-column-header-background : #333; --taskboard-card-body-padding : 1em; --taskboard-card-header-background : currentColor; --taskboard-card-header-color : #fff; --taskboard-card-header-padding : .5em 1em; font-size : 12px; } .b-float-root { font-size : 12px; }

Customizing tasks contents

Tasks cards are populated by task items, small components that for example display a text, an image or a progress bar on the card. Which items to use is up to the application. In addition to this, there is also a taskRenderer hook to take full control over what gets outputted in DOM.

To do Doing Done .b-taskboardbase { --taskboard-background : #fff; --taskboard-body-padding : 1em; --taskboard-card-border-top : 5px solid currentColor; --taskboard-column-background : #eee; --taskboard-column-border-radius : 0 0 3px 3px; --taskboard-column-header-border-radius : 3px 3px 0 0; --taskboard-column-header-border-top : var(--taskboard-card-border-top); font-size : 12px; } .b-taskboard-column.b-inline .b-taskboard-card { min-height : 3em; } .b-micro-cards .b-taskboard-card { background : currentColor; border-top : none; } .b-taskboard-card-body .b-taskboard-text { font-weight : 300; } .b-micro-cards .b-taskboard-resource-avatar-overflow::after, .b-micro-cards .b-resource-avatar { border : 1px solid #fff; } .b-taskboard-column:not(.b-large-cards,.b-medium-cards) [data-ref=tags], .b-micro-cards [data-ref=tags] { display : none; }

Editing tasks

TaskBoard includes two task editing features, a task editor dialog and an inline task editor. The inline task editor operates on the task items (described above), while the task editor is more similar to the event editor in Scheduler. It is easily customized and by default changes in it are reflected in real time.

To do Doing Done .b-taskboardbase { --taskboard-column-gap : 0; --taskboard-card-body-padding : 1em; --taskboard-card-header-background : currentColor; --taskboard-card-header-color : #fff; --taskboard-card-header-padding : .5em 1em; font-size : 12px; } .b-float-root { font-size : 12px; }

And much more…

Also worth mentioning:

  • Customizable context menus
  • Customizable column toolbars
  • Responsiveness on card and widget level
  • Ships with the same 5 themes as our other products
  • Easily customizable styling, using CSS variables and SCSS
  • Localizable

Learn more

To learn more about the new TaskBoard product, please refer to the following resources:

Download Free Trial

Leave a Reply

avatar
  Subscribe  
Notify of