Palette
Introduction¶
In Common Canvas, flows can be created by the user dragging (or double-clicking) nodes out of the palette into the flow editor where they can be linked up to other nodes.
Consequently, one of the main features of Common Canvas is that the palette nodes can be specified by the application, allowing users to build flows from a palette of nodes appropriate for the application’s problem domain.
Common Canvas can display a palette which, by default, appears in the left flyout panel. The palette can display a set of palette nodes (sometimes called node templates) split into different categories which are displayed in an Accordion component. Tooltips are displayed when the mouse cursor is hovered over each category and node.
The user can drag any of the palette nodes from the palette onto the canvas to create a new instance of a node on the canvas. The user can then join nodes together by creating link lines.
Alternatively, the user can double click (or single click if enableSingleClickAddFromPalette is set to true) node templates to add, and automatically join, them to the current flow.
When a palette node is added in this way, Common Canvas will look for the node at the end of the current flow of nodes and will add the node to the canvas to the right of the end node in the flow. Common Canvas will also automatically join the nodes together by creating a new link line. The enableAutoLinkOnlyFromSelNodes canvas configuartion field can be used to customize which node is chosen for automatic linking.
Palette display options¶
The palette can be open or closed. When open it is shown in a wide left-flyout so the node and category labels are visible:
When closed, the application can configure the palette to be either narrow or not displayed at all.
| Narrow | None |
|---|---|
 |
 |
Palette Icon¶
When a palette is specified by the application, Common Canvas automatically adds a toggle-palette action button to the toolbar. The button can be used to open and close the palette:
Palette Search¶
The user can enter one or more search strings into the palette’s Search field. Common Canvas will search the labels, descriptions and categories of the nodes in the palette, and present the set of nodes that were found. The nodes are ranked in order of importance based on how often the search strings appear in the node’s text:
Palette Header¶
Additional content can be added by the application at the top of the palette between the Search area and the categories. In the example below, a button has been added which, when clicked, causes the application to display its own data asset browser.
