Grid

A working instance of the FusionUI Grid comprises three components:

1. Grid: see FusionUI_Grid
2. Data Manager: see FusionUI_DataManager_JSON
3. Columns: see FusionUI_Grid_Column, FusionUI_Grid_CommandColumn

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:

• Set an event handler on the OnFetch event of the FusionUI_DataManager_JSON block. The rest of these steps should be performed in this event handler.
• Perform any steps required to fetch your data; e.g., refreshing an OutSystems Aggregate or calling an API.
• Use a JSON Serialize action to convert the data to Text.
• Drag the DataManager_ResolveRequest client action into the flow of the event handler. Pass the serialized data into the Data input parameter, and the result of the operation into the IsSuccess input parameter.
• Note that a Request Object is also passed in to the event handler as an input parameter. Pass this on to the DataManager_ResolveRequest action via its own Request input parameter.

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.

TreeView

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:

• Headphones
  • SoundPeople
    • Black headphones
    • Red headphones
  • AudioFiends
    • Wireless headphones

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:

• Selecting a node (OnNodeSelected)
• Ticking the checkbox adjacent to a node, when Settings.ShowCheckBox is True (OnNodeChecked)
• Dragging and then dropping the node to another position in the tree, when Settings.AllowDragAndDrop is True (OnNodeDropped)

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.

MultiSelect Dropdown

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.