This type of node can be used to add a Kanban board to show/edit data from your application. This view is very useful to easily visualize the status of several instances of a given business process.
This view typically includes several columns defined by a classification criteria where each item is included in one column.
A common UI for this view is showing each item as a card inside the corresponding column.
In many cases the view supports drag and drop, the user may use this feature to easily change the column an item belongs to. In many cases this cannot be supported as the underlying process requires that specific actions are performed in the system to move the process forward and thus change the column where the item is shown.
 |
| Kanban view runtime example |
Each item in the kanban view can display a description, detail, trailing text, and image. These fields are defined and used following the same rules as in the Dynamic Combo Box control type.
Also, kanban view items can include pills in each item. The control supports two pill regions: primary and secondary. In the default UI, primary pills are shown on top and secondary pills at the bottom of the item.
 |
| Kanban pills |
Items can also include actions, shown in a collapsible menu on the top right corner.
The kanban view's properties are centered in how its items are loaded.
| Category |
Name |
Value |
| General |
Control Name |
The components' control name. Must be unique within the web panel. |
| Column Empty State Text |
The text that should be shown when a column is empty. |
| Datasource |
Datasource From |
Determines if the view's contents will be loaded using a data provider/procedure or directly from attributes. |
| Data source |
Contains a reference to the object used to load the view's content. The object itself can be a Data provider or a Procedure, and it must return an collection of the "K2BTools.Controls.Kanban.Column" type.
Shown when Datasource from = Dataprovider.
See more in How to load a kanban view with a data provider or procedure.
|
| Data source parameters |
Used to pass parameters to the datasource defined in the previous property from the web panel.
Shown when Datasource from = Dataprovider.
|
| Conditions |
Can be used to impose conditions on the items that will be loaded. These conditions are included alongside conditions derived from the context where the view is included (for example, from filters included in that context). |
| Item Values |
Defines the id of the kanban cards. |
| Item Descriptions |
Defines the main text shown in each card. |
| Item Images |
Defines which image is shown in each card (optional). |
| Item Details |
Defines a secondary text shown below the description in each card (optional). |
| Item Trailing Text |
Defines a secondary text shown on the right of the description in each card (optional). |
| Column Definition Attribute |
Contains a reference to an attribute used to define the columns used. This attribute is used mainly to derive a default value for the Column Definition Conditions property. The attribute referenced in this property must be enumerated. |
| Column Definition Conditions |
Establishes how items are sorted into columns. To define a column, the developer must provide the following information:
- Code: A column identifier.
- Description: The column's title.
- Condition: The condition that must be met by an item to be included in this column.
The order in which the columns are defined matters: Every item is added only to the first column where the condition is matched.
|
| Datasource \ Pills |
Primary Conditional Pills |
See Attribute Pills. The pills defined in this property are included in the primary pills section of the item. |
| Primary Pill Provider |
See Attribute Pills. The pills defined in this property are included in the primary pills section of the item. |
| Primary Pill Provider Parameters |
See Attribute Pills. The pills defined in this property are included in the primary pills section of the item. |
| Secondary Conditional Pills |
See Attribute Pills. The pills defined in this property are included in the secondary pills section of the item. |
| Secondary Conditional Pills Provider |
See Attribute Pills. The pills defined in this property are included in the secondary pills section of the item. |
| Secondary Conditional Pills Provider Paramters |
See Attribute Pills. The pills defined in this property are included in the secondary pills section of the item. |
| Drag and drop |
Allow Drag And Drop |
Enables / Disables the drag and drop feature. |
| Drag And Drop Handler |
Contains a reference to a procedure that will be called when an item is dropped in the view. This procedure can sometimes be generated automatically using the "Update drop handler procedure" action. |
In some cases K2BTools can generate a default drop handler procedure that will likely match the developer's expectations, or at least serve as a starting point.
The conditions that must be met to generate the procedure automatically are:
- A transaction must be referenced in the view's context.
- The transaction must be a business component.
- The view must be defined using attributes directly.
- The Column Definition Attribute must be set.
When these conditions are met, the Update drop handler procedure action will be available in the context menu associated with the node.
Executing this action will create/update a procedure with basic code updating the item so that the column definition attribute's value matches the column where the item was dropped.
The developer can change the generated code as desired. If the action is run again from the contextual menu, the default code will be restored.
Kanban items may include actions. When present, the component will display a menu inside each item to execute those actions.
When using patterns, actions are included automatically depending on the context.
When creating a custom web panel using Web Panel Designer, the developer can add actions using a dataprovider to load kanban items and their corresponding actions. The developer can implement how those actions should behave using the "U_OnActionClicked" subroutine associated with the view.
Aside from the events associated with the actions (shown in the previous section), the kanban view supports these events:
- Item Clicked: Raised when an item in the kanban view is clicked. The developer can check which item was clicked using the "&SelectedItem_<ControlName>" variable.
- Item Dropped: Raised when an item is dropped. If the "Drag And Drop Handler" is set it is called in this event. When using Web Panel Designer the developer can add custom logic in the U_<ControlName>_OnItemDropped subroutine.
|