Attributes

Attributes are displayed in the Attributes slide-out panel. All attributes are configured in the attributes.json file located in the uiconfigs folder. This is best illustrated with an example:

{
    "self::div": {
        "class": {
            "localName": "class",
            "label":
            "Class",
            "display": "input",
            "properties": {
                "type": "text"
            }
        }
    }
}

The first level in the json should be an XPath Test  to select an element. The second level is the name of the attribute which is being configured.

The following properties need to be configured for each attribute:

• localName: The name of the attribute as defined in the schema.

• namespaceURI: The namespace uri of this attribute. This may be omitted for attributes in the null namespace.

• label: The label which will be displayed for the attribute.

• display: The type of input which will be provided for input.

• properties: The properties of the input.

The different display options are:

• readonly: When an attribute should not be edited, but should be shown in the attributes editor, it can be configured to display as readonly:

  {
  	"self::div": {
  		"id": {
  			"localName": "id",
  			"label": "Identifier",
  			"display": "readonly"
  		}
  	}
  }

• input with properties.type is:

  • text: A normal text input, the value should be a string.

  • number: A numeric stepper input, the value should be a number. Extra properties that can be used are numberOfDecimals(default is 2) and step(default is 1)

  {
  	"self::age": {
  		"mean": {
  			"localName": "mean",
  			"label": "Mean",
  			"display": "input",
  			"properties": {
  				"type": "number",
  				"numberOfDecimals": 0
  			}
  		}
  	}
  }

• select: A single select with drop down menu. Use when the attribute should have a value out of a clearly defined list. The possible values should be provided with properties.options. This should be an array of items, with a label and value. This should be a string.

  {
  	"self::div": {
  		"class": {
  			"localName": "class",
  			"label": "Class",
  			"display": "select",
  			"properties": {
  				"options": [
  					{
  						"label": "Aligned left",
  						"value": "left"
  					},
  					{
  						"label": "Aligned center",
  						"value": "center"
  					},
  					{
  						"label": "Aligned right",
  						"value": "right"
  					}
  				]
  			}
  		}
  	}
  }

  Alternatively, properties.options can be set to a list name. This list name corresponds to the ListDefinition defined in the Editor Configurations. In this example, the attributes value list will come from the languages list.

  {
  	"xml:lang": {
  		"localName": "xml:lang",
  		"label": "Language",
  		"display": "select",
  		"properties": {
  			"options": "languages"
  		}
  	}
  }

• autocomplete: A single autocomple with drop down menu. Use when the attribute should have a value out of a clearly defined (and long) list. The possible values should be provided with properties.options. This should be an array of items, with a label and value. This should be a string. properties.options can also be a list name similar to select.

  {
  	"self::div": {
  		"color": {
  			"localName": "color",
  			"label": "Color",
  			"display": "autocomplete",
  			"properties": {
  				"options": [
  					{
  						"label": "Blue",
  						"value": "blue"
  					},
  					{
  						"label": "Red",
  						"value": "red"
  					},
  					⋮
  					{
  						"label": "Yellow",
  						"value": "yellow"
  					},
  					{
  						"label": "Violet",
  						"value": "violet"
  					}
  				]
  			}
  		}
  	}
  }

• button-with-value-from-modal: A button that opens a custom modal which should provide a value (this should be a string) that is displayed after the button. The modalComponentName and buttonLabel should at least be added to the properties. The properties buttonLabel, icon and iconAfter are optional.

  {
  	"self::div": {
  		"date": {
  			"localName": "date",
  			"label": "Date",
  			"display": "button-with-value-from-modal",
  			"properties": {
  				"modalComponentName": "CustomDateSelectModal",
  				"icon": "calendar"
  			}
  		}
  	}
  }