Configurable JSON editor
sap.ui.require(["sap/ui/integration/designtime/baseEditor/BaseEditor"], function (Editor) { var oJson = { root: { context: { id: "404", name: "Kate", role: "End User" }, foo: { bar: true } } }; var oEditor = new Editor(); oEditor.setJson(oJson); oEditor.setConfig({ "context": "root/context", "properties" : { "name": { "label": "Name", "path": "name", "type": "string" }, "role": { "label": "Role", "path": "role", "type": "enum", "enum": ["Developer", "Key User", "End User"] }, "department": { "label": "Department", "path": "department", "type": "enum", "enum": ["Sales", "HR", "Development"], "visible": "{= ${context>/role} === 'Key User'}" } }, "propertyEditors": { "enum" : "sap/ui/integration/designtime/baseEditor/propertyEditors/enumStringEditor/EnumStringEditor", "string" : "sap/ui/integration/designtime/baseEditor/propertyEditors/stringEditor/StringEditor" } }); oEditor.attachJsonChange(function(oEvent) { var oJson = oEvent.getParameter("json"); // live change }) oEditor.placeAt("content"); })
Accepts an object literal mSettings
that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.
new sap.ui.integration.designtime.baseEditor.BaseEditor()
Name | Type | Default Value | Description |
---|---|---|---|
config | object | ...see text or source | Configuration Map config.context {string} Path in the JSON that will be edited e.g. |
designtimeMetadata | object | Designtime-specific metadata to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. |
|
json | object | JSON to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. |
|
layout | string | list | Layout name. Standard layout types: list | form Visibility: public |
Default Aggregation: content
Name | Cardinality | Type | Description |
---|---|---|---|
content (default) | 0..n | sap.ui.core.Control |
Event | Description |
---|---|
configChange |
Fired when config has been changed. |
designtimeMetadataChange |
Fired when designtime metadata has been changed by a |
jsonChange |
Fired when any property has been changed by the |
propertyEditorsReady |
Fired when all property editors for the given JSON and configuration are created. TODO: remove this public event. |
validationErrorChange |
Fires when the error state of one of the nested property editors changes |
Fired when config has been changed.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
config | object |
Fired when designtime metadata has been changed by a propertyEditor
.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
designtimeMetadata | object |
Fired when any property has been changed by the propertyEditor
.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
json | object |
Method | Description |
---|---|
addContent |
Adds some content to the aggregation content. |
attachConfigChange |
Attaches event handler When called, the context of the event handler (its Fired when config has been changed. |
attachDesigntimeMetadataChange |
Attaches event handler When called, the context of the event handler (its Fired when designtime metadata has been changed by a |
attachJsonChange |
Attaches event handler When called, the context of the event handler (its Fired when any property has been changed by the |
attachPropertyEditorsReady |
Attaches event handler When called, the context of the event handler (its Fired when all property editors for the given JSON and configuration are created. TODO: remove this public event. |
attachValidationErrorChange |
Attaches event handler When called, the context of the event handler (its Fires when the error state of one of the nested property editors changes |
destroyContent |
Destroys all the content in the aggregation content. |
detachConfigChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachDesigntimeMetadataChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachJsonChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachPropertyEditorsReady |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachValidationErrorChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
sap.ui.integration.designtime.baseEditor.BaseEditor.extend |
Creates a new subclass of class sap.ui.integration.designtime.baseEditor.BaseEditor with name
|
fireConfigChange |
Fires event configChange to attached listeners. |
fireDesigntimeMetadataChange |
Fires event designtimeMetadataChange to attached listeners. |
fireJsonChange |
Fires event jsonChange to attached listeners. |
firePropertyEditorsReady |
Fires event propertyEditorsReady to attached listeners. |
fireValidationErrorChange |
Fires event validationErrorChange to attached listeners. |
getConfig |
Gets current value of property config. Configuration Map config.context {string} Path in the JSON that will be edited e.g. Default value is |
getContent |
Gets content of aggregation content. |
getDesigntimeMetadata |
Gets current value of property designtimeMetadata. Designtime-specific metadata to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. |
getJson |
Gets current value of property json. JSON to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. |
getLayout |
Gets current value of property layout. Layout name. Standard layout types: list | form Default value is |
sap.ui.integration.designtime.baseEditor.BaseEditor.getMetadata |
Returns a metadata object for class sap.ui.integration.designtime.baseEditor.BaseEditor. |
indexOfContent |
Checks for the provided |
insertContent |
Inserts a content into the aggregation content. |
removeAllContent |
Removes all the controls from the aggregation content. Additionally, it unregisters them from the hosting UIArea. |
removeContent |
Removes a content from the aggregation content. |
setConfig |
Sets a new value for property config. Configuration Map config.context {string} Path in the JSON that will be edited e.g. When called with a value of Default value is |
setDesigntimeMetadata |
Sets a new value for property designtimeMetadata. Designtime-specific metadata to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. When called with a value of |
setJson |
Sets a new value for property json. JSON to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. When called with a value of |
setLayout |
Sets a new value for property layout. Layout name. Standard layout types: list | form When called with a value of Default value is |
Adds some content to the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to add; if empty, nothing is inserted |
Attaches event handler fnFunction
to the configChange event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.ui.integration.designtime.baseEditor.BaseEditor
itself.
Fired when config has been changed.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the designtimeMetadataChange event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.ui.integration.designtime.baseEditor.BaseEditor
itself.
Fired when designtime metadata has been changed by a propertyEditor
.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the jsonChange event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.ui.integration.designtime.baseEditor.BaseEditor
itself.
Fired when any property has been changed by the propertyEditor
.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the propertyEditorsReady event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.ui.integration.designtime.baseEditor.BaseEditor
itself.
Fired when all property editors for the given JSON and configuration are created. TODO: remove this public event.
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Attaches event handler fnFunction
to the validationErrorChange event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
When called, the context of the event handler (its this
) will be bound to oListener
if specified, otherwise it will be bound to this sap.ui.integration.designtime.baseEditor.BaseEditor
itself.
Fires when the error state of one of the nested property editors changes
Param | Type | DefaultValue | Description |
---|---|---|---|
oData | object |
An application-specific payload object that will be passed to the event handler along with the event object when firing the event |
|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called when the event occurs |
|
oListener | object |
Context object to call the event handler with. Defaults to this |
Detaches event handler fnFunction
from the configChange event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the designtimeMetadataChange event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the jsonChange event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the propertyEditorsReady event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Detaches event handler fnFunction
from the validationErrorChange event of this sap.ui.integration.designtime.baseEditor.BaseEditor
.
The passed function and listener object must match the ones used for event registration.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnFunction | function(sap.ui.base.Event) : void |
The function to be called, when the event occurs |
|
oListener | object |
Context object on which the given function had to be called |
Creates a new subclass of class sap.ui.integration.designtime.baseEditor.BaseEditor with name sClassName
and enriches it with the information contained in oClassInfo
.
oClassInfo
might contain the same kind of information as described in sap.ui.core.Control.extend.
Param | Type | DefaultValue | Description |
---|---|---|---|
sClassName | string |
Name of the class being created |
|
oClassInfo | object |
Object literal with information about the class |
|
FNMetaImpl | function |
Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class |
Fires event configChange to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
config | object |
Fires event designtimeMetadataChange to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
designtimeMetadata | object |
Fires event jsonChange to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
json | object |
Fires event propertyEditorsReady to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
propertyEditors | array |
Fires event validationErrorChange to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
hasError | boolean |
Whether there is an error in one of the nested editors |
Gets current value of property config.
Configuration Map config.context {string} Path in the JSON that will be edited e.g. "path/subpath"
for json.path.subpath
config.properties {Objectroot
and the path is header/name
, the json.root.header.name
field is to be changed config.properties.{context>header/name}
will create a binding json.root.header.name
config.properties.{= ${context>anotherProperty} === 'someValue'}
. Invisible editors won't receive value updates until they are activated again. config.properties.{= ${context>someProperty} + ${context>anotherProperty}}
config.propertyEditors {ObjectpropertyEditors: {"string": "sap/ui/integration/designtime/controls/propertyEditors/StringEditor"}
defines the module responsible for all properties with the type string
config.i18n {string|array} Module path or array of paths for i18n property files. i18n binding, for example, {i18n>key}
is available in the /properties
section, e.g. for
label
Default value is ...see text or source
.
Gets current value of property designtimeMetadata.
Designtime-specific metadata to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. .getDesigntimeMetadata()
or .attachDesigntimeMetadataChange()
should be used instead to get the changed object.
Gets current value of property json.
JSON to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. .getJson()
or .attachJsonChange()
should be used instead to get the changed object.
Gets current value of property layout.
Layout name. Standard layout types: list | form
Default value is "list"
.
Returns a metadata object for class sap.ui.integration.designtime.baseEditor.BaseEditor.
Checks for the provided sap.ui.core.Control
in the aggregation content. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content whose index is looked for |
Inserts a content into the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Removes all the controls from the aggregation content.
Additionally, it unregisters them from the hosting UIArea.
Removes a content from the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
vContent | int string sap.ui.core.Control |
The content to remove or its index or id |
Sets a new value for property config.
Configuration Map config.context {string} Path in the JSON that will be edited e.g. "path/subpath"
for json.path.subpath
config.properties {Objectroot
and the path is header/name
, the json.root.header.name
field is to be changed config.properties.{context>header/name}
will create a binding json.root.header.name
config.properties.{= ${context>anotherProperty} === 'someValue'}
. Invisible editors won't receive value updates until they are activated again. config.properties.{= ${context>someProperty} + ${context>anotherProperty}}
config.propertyEditors {ObjectpropertyEditors: {"string": "sap/ui/integration/designtime/controls/propertyEditors/StringEditor"}
defines the module responsible for all properties with the type string
config.i18n {string|array} Module path or array of paths for i18n property files. i18n binding, for example, {i18n>key}
is available in the /properties
section, e.g. for
label
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is ...see text or source
.
Param | Type | DefaultValue | Description |
---|---|---|---|
oConfig | object | ...see text or source |
New value for property |
Sets a new value for property designtimeMetadata.
Designtime-specific metadata to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. .getDesigntimeMetadata()
or .attachDesigntimeMetadataChange()
should be used instead to get the changed object.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
oDesigntimeMetadata | object |
New value for property |
Sets a new value for property json.
JSON to be changed in the editor. Note: If an object is passed as a parameter, it won't be mutated. .getJson()
or .attachJsonChange()
should be used instead to get the changed object.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
oJson | object |
New value for property |
Sets a new value for property layout.
Layout name. Standard layout types: list | form
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "list"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sLayout | string | "list" |
New value for property |