Drag-and-drop Compilations

In this section you can find compilation examples of drag-and-drop functionality.

Example Description

Example	Description
	Drag a tree node to another widget in the compilation In this compilation, dragging a node from the Tree widget to either the Chart, Plotly or Faceplate widgets will modify the respective widget using named actions, defined at widget level. The following topics are covered in the example: Using the Tree widget as a drag-source Configuring the Chart, Plotly and Faceplate widgets as drop-targets Defining named actions at widget level Using a `modify` action with the modification operator `set` to change field values in the widget model, where the widget is referenced using the string ID `self` Using the `dataSource` property on the Plotly widget as an action pipeline containing: a `gettime` action to initialise the start and end time a `function` action to invoke an advanced endpoint a `transform` action to project the returned data, mapping the values to the axes

drag-drop-01

Drag a tree node to another widget in the compilation

In this compilation, dragging a node from the Tree widget to either the Chart, Plotly or Faceplate widgets will modify the respective widget using named actions, defined at widget level.

The following topics are covered in the example:

Using the Tree widget as a drag-source
Configuring the Chart, Plotly and Faceplate widgets as drop-targets
Defining named actions at widget level
Using a modify action with the modification operator set to change field values in the widget model, where the widget is referenced using the string ID self
Using the dataSource property on the Plotly widget as an action pipeline containing:
- a gettime action to initialise the start and end time
- a function action to invoke an advanced endpoint
- a transform action to project the returned data, mapping the values to the axes