Working with outport schemas

This tutorial shows what UI improvements you can get when defining outport schemas for the data coming out from your components. First imagine we have a NewPerson component with the following outport definition:

"outPorts": [
    {
        "name": "person",
        "schema": {
            "type": "object",
            "properties": {
                "name": {
                    "type": "object",
                    "title": "Name",
                    "properties": {
                        "firstName": { "type": "string", "title": "First Name" },
                        "lastName": { "type": "string" }
                    }
                },
                "addresses": {
                    "type": "array",
                    "title": "Addresses",
                    "items": {
                        "type": "object",
                        "properties": {
                            "street": {
                                "type": "string",
                                "title": "Street"
                            },
                            "city": {
                                "type": "string",
                                "title": "City"
                            },
                            "country": {
                                "type": "string",
                                "title": "Country"
                            },
                            "number": {
                                "type": "number",
                                "title": "Number"
                            }
                        }
                    }
                }
            }
        }
    }
]

As you can see, the data coming out from the component is an object with two properties: name, which is an object with two string properties, and addresses which is an array of objects, and each object has (properties go here). This two cover the most common cases where schemas are useful to make easier for the user to work with the data.

Selecting nested properties directly

One of the use cases is to be able to access nested properties in a variable, if that variable has its type as object and has its schema defined. In our example, the name variable has two nested properties: firstname and lastname. So when we connect a component to the output of our NewPerson component, we will be able to select the nested properties directly:

Nested properties available directly in Inspector

Selecting element properties when modifying an array variable

Another use case is when using array data, like the addresses property in our example, we can access directly to the properties of each item when using a modifier that iterates over an array (Each, Map, Filter...):

Modify a variable of type array

Array item properties available on iteration modifiers

Property array item property names

You can also get additional information from array items in non-iterator modifiers. When using a non-iterator modifier, you get the name of the properties in the variables list. This is useful when you get only one element of the input array variable and want to access some property. Take this alternative modifier arrangement for the Addresses variable as an example:

Property names for array items

As you can see, we take the first item of the array, and now we want to access a property from this item, so we use the JSON Path modifier. In the variables list we can see that the property names are there. It is very important to note that this are just the property names, not the actual values inside the item. So for example the variable street will be evaluated to the string "street", and this will work fine in our example because we are using the JSON Path modifier.