UI Key Values

Key values are used throughout Verne to store arbitrary data and provide configuration hints. Most key values are not related to UI display and are not sent to the browser in the Render State. Only key values on a white list or those prefixed with "ui-" are sent to the front end.

Whitelisted Key Values

Whitelisted values are key values used by both the UI and the server. To prevent duplication they are allowed to be added to the Render State.

Key	Type	Default	Usage
repeaterNoAdd	boolean	false	Used on a repeater node will prevent the add function being available.
repeaterNoEdit	boolean	false	Used on a repeater or a repeater’s child record to prevent editing of either all or particular records.
repeaterNoDelete	boolean	false	Used on a repeater or children record to prevent deletion of the child.
selectedIndex	Number		Used in tab style components to identify the active tab by index.
selectedTab	String		Used in tab style components to identify the active tab by ID.
submitNodeId	String		Used on the root View Node of the form to identify a button to treat as a submit button.
allowedDocumentTypes	CSV		Used on Document repeater nodes to specify allowed mime types for upload.
allowedFileTypes	CSV
allowedFileExtensions	CSV		Used on Document repeater nodes to specify allowed extensions for upload.
maxSize	Number		Maximum document upload size.
summary	String		See documentation for repeater.
detail	String		See documentation for repeater.
tab-visited	boolean	false	Stored against tabs to indicate that the tab has been visited.
validate_success	boolean	false	Stored against a tab to indicate it has been successfully validated.
valueNode	String		Used in lookup component to identify the node in which to store the value (code or id) of the selection from a search.
textNode	String		Used in lookup component to identify the node in which to store the text of the selection from a search.
min
max
valueAttr	String		Used on a repeater with widget of “pillbox” identifies which attribute of the repeater child to store the value of the lookup against.
textAttr	String		Used on a repeater with widget of “pillbox” identifies which attribute of the repeater child to store the text of the lookup against.
lengthMin	Number		Minimum string length for an attribute’s value.
lengthMax	Number		Maximum string length for an attribute’s value.
location-name	String		Used to identify the CMS location for a piece of content. Update cms component so this doesn’t need to be here.

Common UI Key Values

Key	Type	Default	Usage
ui-readOnly	boolean	false	Set to make the UI display as read only without changing the readonly attribute of the ViewNode.
ui-ro-widget	String		Set to the name of a widget to have this widget used for display when the View Node is readonly.

Widget Secific Key Values

Glue components can use any key values to help the components maintain their state on the server or to provide configuration for the components behaviour. Key values prefixed with "ui-" are always sent to the browser as part of the render state.

An example of using key values to maintain state on the server is the glue-attribute-date component. As dates are constructed by assembling together key values are used to keep the current state of the day, month and year using key values.

In the RenderState example below the month and day values of the date have been selected but no year has yet been entered.

{
  "root": "ed36020131d573f5",
  "ed36020131d573f5": {
    "id": "ed36020131d573f5",
    "nodetype": "attribute",
    "attribute": "DateOfBirth",
    "text": {
      "label": "Date of Birth"
    },
    "kv": {
      "ui-month": "02",
      "ui-day": "04",
      "ui-year": null
    },
    "dc": "dateOnly",
    "m": true,
    "gs": false,
    "ro": false
  }
}

Setting a Key Value from the Verne API

A key value can be set on a node using the Verne API convenience method setKeyValue.

Catalyst.setKeyValue(nodeid, key, value)

This method returns a promise that will be resovled when the response has returned from the server. Not that while only whitelisted or ui-prefixed key names will be returned to the RenderState any key name can be set on the server.

The convenience method is just a wrapper for the processUpdate method and view-node-set-key-value api command.

The structure of the set key value command is:

{
    "type":"view-node-set-key-value", 
    "id":"nodeId", 
    "key":"key name", 
    "value":"value to set"
}

Whitelisted Key Values

Common UI Key Values

Widget Secific Key Values

Setting a Key Value from the Verne API

Jump to Section