Component description

The codetable-label component assigns values from code tables to objects. Visually, it allows the selection of code table values and the creation of object relations using the value.

Example

Minimal JSON

{
    "type": "codetable-label",
    "values": [
        {
            "objectTypeKey": "",
            "relationTypeKey": ""
        }
    ]
}
{
    "type": "codetable-label",
    "values": [
        {
            "objectTypeKey": "label",
            "relationTypeKey": "has_label"
        }
    ]
}

Example taken from the Writing an Application Package tutorial.

Nested properties

PropertyDescriptionValuesMandatory
typecodetable-labelstringYes
valuesArray of values defining what objects are selectable in the codetable label.arrayYes
componentIdUnique ID of a component. If left empty, a random string will be generated. Primarily used in patch packages to define the component’s position within the layout (template).booleanNo
titleTranslation key of the title. Define the key in translations to specify how the text is displayed in the UI. Unlike the name property, if you use a specific string of text for the title, this text will appear with the package key. For example, Comment Section will be displayed as package_key_comment section.stringNo

Nested properties in values

PropertyDescriptionValuesMandatory
objectTypeKeyObject type displayed in the list of values.stringYes
relationTypeKeyRelation type defining the displayed object types. By default, you can select multiple values in your codetable lable. To enforce a single value selection, set the is_single_value feature of the relation type to true.stringYes
applicationIdsApplication(s) in which to search for code table values. To refer to the current application, use @appId.integer or “@appId”No
applicationKeysKeys of all relevant applications (including the current one) in which to search for code table values.stringNo
basedOnFirstLevelRelationTypeKeysKeys of the relation type between the edited object and an already-selected value. It’s used to filter which values this codetable label offers. The filter always anchors on the edited object, not on the value itself. Used with basedOnSecondLevelRelationTypeKeys to filter through an intermediate value. See examples.stringNo
basedOnSecondLevelRelationTypeKeysKeys of the relation type between two code table values — not between the edited object and a value. Used with basedOnFirstLevelRelationTypeKeys to offer values related to those selected at the first level. See examples. Once a relation based on the second level is created, it’s kept even if the first-level relation is later deleted.stringNo
isConditionalDetermines whether the selection of a codetable label is dependent on specific conditions. This property works together with basedOnFirstLevelRelationTypeKeys and basedOnSecondLevelRelationTypeKeys to define those conditions.booleanNo
spaceIdSpace(s) in which to search for code table values. To refer to the current space, use @spaceId.integer or “@spaceId”No
titleTranslation key of the title. Define the key in translations to specify how the text is displayed in the UI. Unlike the name property, if you use a specific string of text for the title, this text will appear with the package key. For example, Comment Section will be displayed as package_key_comment section.stringNo
Warning

A second-level filter without a first-level filter fails validation. This means that basedOnSecondLevelRelationTypeKeys must always be configured together with basedOnFirstLevelRelationTypeKeys.

Examples

Country-city selection

Goal: City selection depends on the selected country.

To build this, the first dropdown offers a list of countries.

The second dropdown with cities is dependent on the first one. It must have isConditional: true and two relation keys:

  • basedOnFirstLevelRelationTypeKeys: The relation from the edited object to the country already selected (matches the first dropdown).
  • basedOnSecondLevelRelationTypeKeys: The relation between the country and city values themselves, in the direction country (from) to city (to). Make sure this relation exists in your data.

With both levels set, selecting a country in the first component narrows the second component’s list to only the cities related to that country.

{
    "components": [
        {
            "type": "codetable-label",
            "title": "template.country.label",
            "values": [
                {
                    "objectTypeKey": "country",
                    "relationTypeKey": "has_country"
                }
            ]
        },
        {
            "type": "codetable-label",
            "title": "template.city.label",
            "values": [
                {
                    "objectTypeKey": "city",
                    "relationTypeKey": "has_city",
                    "isConditional": true,
                    "basedOnFirstLevelRelationTypeKeys": ["has_country"],
                    "basedOnSecondLevelRelationTypeKeys": ["country_has_city"]
                }
            ]
        }
    ]
}

Manufacturer and model selection

Goal: Model selection depends on the selected manufacturer.

The first dropdown offers a list of manufacturers, for example Toyota or Ford.

The second dropdown with models depends on the first one. It has isConditional: true and two relation keys:

  • basedOnFirstLevelRelationTypeKeys: The relation from the edited object to the manufacturer already selected (matches the first dropdown).
  • basedOnSecondLevelRelationTypeKeys: The relation between the manufacturer and model values themselves, in the direction manufacturer (from) to model (to) — for example, Toyota to Corolla and Camry. Make sure this relation exists in your data.

Selecting a manufacturer in the first dropdown narrows the second dropdown to only the models made by that manufacturer.

{
    "components": [
        {
            "type": "codetable-label",
            "title": "template.manufacturer.label",
            "values": [
                {
                    "objectTypeKey": "manufacturer",
                    "relationTypeKey": "has_manufacturer"
                }
            ]
        },
        {
            "type": "codetable-label",
            "title": "template.model.label",
            "values": [
                {
                    "objectTypeKey": "model",
                    "relationTypeKey": "has_model",
                    "isConditional": true,
                    "basedOnFirstLevelRelationTypeKeys": ["has_manufacturer"],
                    "basedOnSecondLevelRelationTypeKeys": [
                        "manufacturer_has_model"
                    ]
                }
            ]
        }
    ]
}