onChange
onChange property tells attribute how to react to another attribute value change. It is defined as an object inside an attribute options property and must hold rules and actions properties.
Rules property is an object holding properties that are also objects corresponding to attribute names. Each Rules object has a rule property that holds rule type and an options property that holds value(s) for the rule. Options property is optional.
Actions property is an array that holds objects each with its own action, an object can also have an options property.
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"titleType": {
"rule": "value",
"options": {
"value": "custom"
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"titleType": {
"type": "dropdown",
"access": "public",
"value": "default",
"options": {
"label": "Title type",
"values": [
{
"label": "Default title",
"value": "default"
},
{
"label": "Custom title",
"value": "custom"
}
]
}
},
...
}
Rules
true
Description: Reacts to any change of attribute.
Options: none
Note: The example below will always hide the title attribute, as the rule will always return true. This particular rule is meant for sending requests.
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"toggleTitle": {
"rule": "true"
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"description": {
"type": "string",
"access": "public",
"value": "",
"options": {
"label": "Description"
}
},
...
}
toggle
Description: Reacts to toggle type attribute value change. Rule value can also be !toggle – which is reverse to toggle.
Options: none
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"toggleTitle": {
"rule": "toggle"
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"toggleTitle": {
"type": "toggle",
"access": "public",
"value": true,
"options": {
"label": "Show title"
}
},
...
}
minlength
Description: Reacts to value change, checks for a min number of character in a string or min number of items in an array
Options: an object with value property (string on an array)
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"accessKey": {
"rule": "minlength",
"options" {
"value": "1234admin"
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"accessKey": {
"type": "string",
"access": "public",
"value": "",
"options": {
"label": "Access key"
}
},
...
}
maxlength
Description: Reacts to value change, checks for a max number of character in a string or max number of items in an array
Options: an object with value property (string on an array)
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"accessKey": {
"rule": "maxlength",
"options" {
"value": "1234admin"
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"accessKey": {
"type": "string",
"access": "public",
"value": "",
"options": {
"label": "Access key"
}
},
...
}
range
Description: Reacts to value change, checks for a value in the range of min and max character numbers
Options: an object with min and max properties (number)
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"itemName": {
"rule": "range",
"options" {
"min": "5",
"max": "15"
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"itemName": {
"type": "string",
"access": "public",
"value": "Basic item",
"options": {
"label": "Item name"
}
},
...
}
minvalue
Description: Reacts to value change, checks for min value (number)
Options: object with min property (number)
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"titleHeight": {
"rule": "minvalue",
"options" {
"min": "10"
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"titleHeight": {
"type": "number",
"access": "public",
"value": "11",
"options": {
"label": "Title height"
}
},
...
}
maxvalue
Description: Reacts to value change, checks for a value in the range of min and max character numbers
Options: an object with max property (number)
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"titleHeight": {
"rule": "maxvalue",
"options" {
"max": "10"
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"titleHeight": {
"type": "number",
"access": "public",
"value": "9",
"options": {
"label": "Title height"
}
},
...
}
between
Description: Reacts to value change, checks for a value between min and max number values
Options: object with min and max properties (number)
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"titleHeight": {
"rule": "between",
"options" {
"min": 8,
"max": 15
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"titleHeight": {
"type": "number",
"access": "public",
"value": "10",
"options": {
"label": "Title height"
}
},
...
}
value
Description: Reacts to value change, checks for the defined value. This rule can also be defined with not operator (e.g. “rule”: “!value”)
Options: object with a value property (string)
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"titleType": {
"rule": "value",
"options": {
"value": "custom"
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"titleType": {
"type": "dropdown",
"access": "public",
"value": "default",
"options": {
"label": "Title type",
"values": [
{
"label": "Default title",
"value": "default"
},
{
"label": "Custom title",
"value": "custom"
}
]
}
},
...
}
valueIn
Description: Reacts to value change, checks for a value in the defined values array
Options: object with a values property (array)
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"titleType": {
"rule": "valueIn",
"options": {
"values": [
"default",
"custom"
]
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"titleType": {
"type": "dropdown",
"access": "public",
"value": "default",
"options": {
"label": "Title type",
"values": [
{
"label": "None",
"value": "none"
},
{
"label": "Default title",
"value": "default"
},
{
"label": "Custom title",
"value": "custom"
}
]
}
},
...
}
valueContains
Description: Reacts to value change, checks for a value in the defined value string
Options: object with a value property (string)
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"titleType": {
"rule": "valueContains",
"options": {
"value": "custom"
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"titleType": {
"type": "string",
"access": "public",
"value": "",
"options": {
"label": "Title type"
}
},
...
}
required
Description: Reacts to value change, checks for an empty value
Options: none
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"titleType": {
"rule": "required"
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"titleType": {
"type": "string",
"access": "public",
"value": "",
"options": {
"label": "Title type"
}
},
...
}
Actions
toggleVisibility
Description: Toggles visibility of the attribute
Options: none
Example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"toggleTitle": {
"rule": "toggle"
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"toggleTitle": {
"type": "toggle",
"access": "public",
"value": true,
"options": {
"label": "Show title"
}
},
...
}
toggleSectionVisibility
Description: Toggles visibility of the section in Edit Form (e.g. Button element section)
Options: none
Example:
{
...
"button": {
"type": "element",
"access": "public",
"value": {
"tag": "basicButton"
},
"options": {
"category": "Button",
"tabLabel": "Button",
"onChange": {
"rules": {
"addButton": {
"rule": "toggle"
}
},
"actions": [
{
"action": "toggleSectionVisibility"
}
]
}
}
},
"addButton": {
"type": "toggle",
"access": "public",
"value": true,
"options": {
"label": "Add button"
}
},
"metaEditFormTabs": {
"type": "group",
"access": "protected",
"value": [
"editFormTab1",
"button",
"designOptions"
]
},
...
}
attachImageUrls
Description: Toggles visibility of Link Selector for attachimage attribute
Options: none
Example:
{
...
"image": {
"type": "attachimage",
"access": "public",
"value": "single-image.jpg",
"options": {
"label": "Image",
"multiple": false,
"defaultValue": "single-image.jpg",
"onChange": {
"rules": {
"clickableOptions": {
"rule": "value",
"options": {
"value": "url"
}
}
},
"actions": [
{
"action": "attachImageUrls"
}
]
},
"url": false,
"imageFilter": true
}
},
"clickableOptions": {
"type": "dropdown",
"access": "public",
"value": "",
"options": {
"label": "OnClick action",
"values": [
{
"label": "Open Image in New Tab",
"value": "imageNewTab"
},
{
"label": "Link selector",
"value": "url"
}
]
}
},
...
}
fieldMethod
Description: Executes the method of the attribute. Specify which method to execute in the options property.
Options: Currently available requestToServer method.
Example:
{
...
"widget": {
"type": "ajaxForm",
"access": "public",
"value": {
"key": "",
"value": ""
},
"options": {
"label": "",
"action": "vcv:wpWidgets:form",
"onChange": {
"rules": {
"widgetKey": {
"rule": "true"
}
},
"actions": [
{
"action": "fieldMethod",
"options": {
"method": "requestToServer"
}
}
]
}
}
},
...
}