For Dashboard Designers Functions Views
Friday, March 15, 2019 9:54 PMViews
Views are a type of Function. Besides the usual features of Functions, they have their own. To start with, Views have a visual component on the web page. When executed, this visual component shows up on the page and often can be interacted with. This also means that newly executed Views are not directly destroyed after they finish execution: they can fire new Trigger events based on user input and can be updated to show different data. The available user input Trigger events are listed on each individual View reference page.
Areas and containers
Views can be positioned in specific places on the page. Where exactly is specified by the $area
and $container
parameter.
Areas
A page can be divided into any number of areas. These are simply <div>
elements on the page with an area identifier. When executed, the View will be placed in the area that corresponds to its $area
parameter. In the Graphileon environment, there are 3 areas: content
(default), sidebar-left
and sidebar-right
. By default, Views will appear as a draggable panel in the content
area (center of the screen). If specified, they can appear as non-draggable panels in the left sidebar (sidebar-left
) or right sidebar (sidebar-right
).
Containers
Before a View is placed in an area, it is wrapped in a container. This can be a new container (by default), or an existing container. In which container the View will appear is specified in the $container
parameter. By default, its value is _new
, meaning a new container will be created for the View. Alternatively, a name can be provided in the $container
parameter. In that case, if an existing container with that name is found on the page, the View replaces the previous View in that container. If no existing container with that name is found, a new one is created. The next View targeting the same container will then replace the current one.
Context menus
Some Views enable the use of context menus, which appear when the user right-clicks some part of the View. Context menus, if enabled, are populated by Triggers of type context
. A View can have multiple context menus, each appearing with a different right-click target. For example, in a NetworkView, the context menu that appears when the user clicks a node can be different from the menu that appears when the user right-clicks a relation.
To add a context menu item, a Trigger relation should be created from the View containing the context menu, to the Function that should be executed when the menu item is clicked. The Trigger should contain at least the following properties:
Key | Value | Description |
---|---|---|
type |
context |
Specifies that this Trigger defines a context menu item. Should have the exact value context . |
menu |
string | The menu in which the item should appear. * |
action |
string | The text that should be displayed in the context menu item. |
* The context menus of different Views are predefined. Some have multiple, some have only one. The possible context menus are listed on the corresponding Views' Reference page.
The context Trigger can also map data from the View to the next Function. Besides the usual Trigger properties, the Trigger event has the following property:
Key | Description | Possible values |
---|---|---|
target |
Data from the clicked target. Can be different for each View and menu. | object |
Example: From a NetworkView, a Trigger with type:"context"
, menu:"node"
and action:"Inspect this node"
would add an item to the context menu appearing when right-clicking a node, with the text "Inspect this node". Clicking it would execute the Function on the other side of the Trigger.
Batch triggers
All Views can have so-called Batch Triggers, which show up as buttons at the top of the View. These are typically useful for performing actions on (a selection of) the data set in the View. Batch Triggers have the property type:"batch"
and a property action
set to any desired text to be displayed on the button. The Batch Trigger is connected from the View that should display the button, to the Function that should be executed when the button is clicked.
Example: From a TableView, a Trigger with type:"batch"
and action:"Inspect selection"
would display a button at the top the table with the text "Inspect selection". Clicking it would execute the Function on the other side of the Trigger.
Properties for batch triggers that allow customization of the button in the View:
Key | Value | Description |
---|---|---|
index |
number | The order of the buttons is based on this number. The lower the value, the higher on the list it is displayed. |
name |
string | The text to display on the button. If not set, the name of the target Function will be displayed instead. |
icon * |
string | The name of an icon to display on the button. Can be any of the FontAwesome icons, without the prefix. |
style * |
string, css format | CSS styling of the button. |
hoverStyle * |
string, css format | CSS styling of the button when mouse is over it. |