List

Some methods for working with Lists in Stadium.

1. Creating Lists

2. Setting List Types

3. Adding Static Data

4. Adding Connector, JSON or Javascript Data

5. Value Mapping

6. Adding Items to Lists

7. Removing Items from Lists

8. Adding Properties to Lists

9. Removing Properties from Lists

Creating Lists

Lists can be of a specific type or of type 'Any'. The type can be selected in the Item Type property of a List. 'Any' is the default

If the ListItemType property is set to Any, then the List will accept any JavaScript array. So, then you can assign an array of values or an array of objects of any complexity.

However, as the type of each item is not known in this case, Stadium will treat each list item as a value. So, when assigning an array of objects, dropdowns in the rest of Stadium will not display the properties of the object.

To access properties of a list of objects, the property can manually be appended to the list item

~.AnyList.ListItem.id;

Setting List Types

It is therefore advisable to set the ListItemType property to a known type when working with Lists of objects. It then becomes necessary to first create a type in the Types section in the ApplicationExplorer and subsequently select that type in the ListItemType property.

When a type is defined, various dropdowns in the Stadium Designer will provide an option to select specific properties of the List

Adding Static Data

Adding static data for Lists of type Any can be added opening the List Editor on the List Value property where values can then be added directly into the editor.

Object data for defined types can be added by further opening the Object Properties Editor next to items in the List Editor.

Adding Connector, JSON or Javascript Data

Connector Data is commonly provided as a JSON List of objects. The Result of a query or any other JSON or Javascript array can hence be directly assigned to a List. When the List Item Type contains all or a subset of the properties of the incoming data the properties will be auto-mapped. For this purpose

1. Create a type with properties that match those of the incoming dataset

2. Assign the type to the Item Type property of the List

3. Assign the data to the List Value property. Fields will be auto-matched where property names are the same.

Value Mapping

Incoming properties can be mapped to List properties when names of the properties of the assigned data differ from the List Item Type properties. For this purpose, select the Field Mapping option in the List Value property dropdown.

The Mapping Editor displays information in two columns, the target information on the left and the source on the right.

The target information column (left) provides the

1. Target List

2. All mappable properties of the Target

The source column (right) provides

1. A dropdown to select the source data List

2. Input fields to define the mapping for source List properties. The MapItem option in the dropdown represents a List Item. Where such an item consists of a known type, the type properties are provided for selection.

Adding Items to Lists

Adding items into a List can be accomplished by using a Javascript action.

The JavaScript push function can also add objects to a List. Properties are then mapped by name.

~.TextValueList.push({"text":"Monday","value":1});

Using this method, one List can be populated with values from another one in a ForEach loop.

~.TextValueList.push({"text":~.ForEach.LoopValue.Name,"value":~.ForEach.LoopValue.CountryCode});

Removing Items from Lists

Individual items can be removed from Lists using a variety of different Javascript functions.

Splice

Splice modifies the original List

~.AnyList.splice(1, 0); // Removes 1 element starting from index 0 (the first list item)

Pop

Removes and returns the last element of a List

let lastElement = ~.AnyList.pop();

Shift

Removes and returns the first element of a List

let firstElement = ~.AnyList.shift();

Delete

Removes an element at a specific index, but leaves an "empty slot" (the List length remains the same, and the value at that index becomes undefined)

This example works for a List of values

delete ~.AnyList[~.AnyList.indexOf("Bob")];

This example works for a List of objects where the object has a property called 'id' with a unique value

delete ~.UsersList[~.UsersList.findIndex(user => user.id === 1)];

Filter

Creates a new List containing only the elements that pass a provided test function. In this case it returns all values that are larger than 3

let newList = ~.AnyList.filter(num => num > 3);

Adding Properties to Lists

Adding a property with a distinct value to a List of a specific type (a List of objects) can be achieved by looping through the List

~.UsersList.forEach(obj => {
    obj.age = 26;
});

Adding a property with the same value can also be achieved without an explicit loop. This function returns a new List

const newList = ~.UsersList.map(obj => {
    return { ...obj, isActive: true }; // Creates a new object with existing properties and the new 'isActive' property
});

Removing Properties from Lists

Removing a property from a List of a specific type (a List of objects) can be achieved by looping through the List

~.UsersList.forEach(obj => {
    delete obj.age; 
});