Introduction

In many cases, your dashboard or Kanban board needs to be able to support dropping widgets across different categories — or zones — on the board.

For example, let’s suppose that we have a Kanban board. In its simplest form, we have one list of widgets for the Backlog, another list for the Work-in-Progress, and one more for the Done tasks.

Here, using just one FlexiTarget for our Kanban board wouldn’t be enough, as we have three different Flow layouts to maintain. However, due to the board structure that Flexiboards supports (see Overview), we can have multiple FlexiTargets within the same FlexiBoard.

Using Multiple Targets

To add a second target, simply create an additional FlexiTarget component inside of your FlexiBoard. Each FlexiTarget has its own configuration, so you can adjust how the layouts behave of one another if you desire.

However, you can also use the targetDefaults property on the FlexiBoard configuration object if you want all targets to have consistent behaviour.

The below example demonstrates us creating the Kanban board that we desired earlier.

Notice how by adding additional FlexiTarget components, we can now drag and drop widgets within their current target, as well as drop them into the other two.

Advanced: Mixing Grids

We’ve seen how we can drag and drop widgets between multiple target dropzones of the same grid type, where each in our example was a Flow Grid. However, what if we wanted to drag and drop widgets between a Flow Grid and a Free-Form Grid?

Flexiboards is designed to provide common drag-and-drop logic, regardless of the grid type being used by the target dropzone. This means that dropping widgets between two different grid types is also seamless*.

Notice that when the widget switches between the two grids, its background colour changes automatically to reflect the widgetDefaults of the grid it is in. This is part of the magic of runes, and Cascading Configuration! 😎

*Please note: currently, when mixing grid types, you will lose the flow dimension (ie, it will change to 1) when dragging a widget from a free-grid into a flow-grid.

This is considered a limitation in the current Flexiboards version, and it will not behave this way in future versions.

The future intended design is for flow grids to enforce a 1 flow dimension size without actually changing the widget’s flow dimension (height, in this case). So if that widget is then dropped into the free-grid again, it will have its original height.

Examples

The open-source Notes example contains a nested FlexiBoard that creates a Kanban board, which you can use for reference. FlexiBoards can be nested inside FlexiBoards and will act independently — a FlexiWidget inside a nested FlexiBoard cannot be moved into the outer FlexiBoard.