A working instance of the FusionUI Grid comprises three components:
To use the Grid, begin by dragging the FusionUI_Grid block into the interface builder.
Data Manager
Drag the FusionUI_DataManager_JSON block into the DataManager placeholder of the FusionUI_Grid instance.
To fetch data:
Handling creating (OnCreate), updating (OnUpdate) and deleting (OnDelete) data follows similarly. See the description of each event for further details
Columns
Define columns by dragging FusionUI_Grid_Column blocks into the Columns placeholder of the associated FusionUI_Grid instance. Specify the data mapping via the Field input parameter of each FusionUI_Grid_Column block. For example, for a Field value “Foo” and the following data:
[{ "Foo": 1, "Bar": 2 }, { "Foo": 3, "Bar": 4 }]
Then the column will render as:
See the description of the FusionUI_Grid_Column block for further details.
Drag the FusionUI_TreeView block into the interface builder.
Populate the TreeView with Data
The Data input parameter is used to populate the TreeView, using pre-fetched relational data such as the output of an OutSystems Screen Aggregate. Consider the following tree:
And imagine that our data is given by the following relation:
The Data input parameter expects a list, where each element consists of a unique identifier Id, a textual representation Text, and a Path (Text List) to the node being specified. For example, we could map the above table into the following:
FusionUI_TreeView can then use data of this form to build the tree.
Handle user interactions
TreeView triggers events for the following interactions:
For example, to handle the interaction where a user selects a node, add an event handler for the OnNodeSelected event. The SelectedNodes input parameter provides a Text List comprising the Id values corresponding to each node currently selected. This list will only have multiple items when Settings.AllowMultiSelection is True.
FusionUI_MultiSelect can be used as a drop-in replacement for the built-in Dropdown Tags block from Outsystems UI.
Further configuration beyond what is offered by Dropdown Tags is available in the FullSettings input parameter. See the descriptions of the fields comprising FullSettings for further details on the function and usage of each parameter.