Many configuration properties in the component configuration include sub-properties. A sub-property is a property contained within another property, and is often only relevant for certain configurations of the parent property. Sometimes a sub-property is optional, and sometimes a sub-property is required.

Here’s an example: The Item List component can contain a search box; to enable the search box, the configuration property enableSearch is set to true. When the search box is enabled, you can include a hint text inside the search box. To set the hint text, there is a sub-property searchHintText available for enableSearch which takes a string input. In this case, the sub-property searchHintText is only relevant when enableSearch is set to true. This sub-property is optional; if it is not set, no hint text will be shown in the search box.

For reference, here’s a sample code for the enableSearch property:

On the other hand, some sub-properties are relevant regardless of the configuration of the parent property. For example, to set the default field by which to filter an Item List, you can use the defaultSortFields configuration property. Regardless of how that property is configured, it can contain the sub-property defaultSortDirection, which allows you to set the default sort direction to ascending or descending order.

Sometimes sub-properties are more complex. They can be more than two layers deep, or can change for different configurations of the property.

Here’s a more complex example: The Attributes component can be configured to display attributes vertically or horizontally by setting the layout property to either horizontal or vertical.

When layout is set to horizontal, it includes two required sub-properties, maxHeight and maxWidth. Each of these sub-properties takes an integer input, and they determine the height and width of the component in pixels.

When layout is set to vertical, it includes the required sub-property isMultiLine, which determines whether the attributes in the user interface wrap. (Note that when layout is set to horizontal, the attributes automatically wrap.) When isMultiLine is set to true, it has the required sub-property maxHeight, and when isMultiLine is set to false, it has the required sub-property maxWidth. In this case, the sub-properties change depending on what configurations are set. The sub-properties also go two layers deep.

For reference, here are sample codes for the layout property:

For layout set to horizontal:

For layout set to vertical and isMultiLine set to true:

For layout set to vertical and isMultiLine set to false:

In the JSON configuration file, any property with at least one sub-property contains the additionalData key. Within the additionalData key is another key known as a container key, and it holds the sub-property.

As an example, let’s look at the enableSearch property again:

The top level property is enableSearch, and it contains additionalData. Within additionalData is the container key itemListSearchDefinition, which contains the sub-property searchHintText.

A property generally only has one container key, and all sub-properties are contained within it. However, there are exceptions when a single property contains multiple container keys, which each hold one or more sub-properties.