Allows to visualize source code of various types with syntax highlighting, line numbers in editable and read only mode. Use this control in scenarios where the user should be able to inspect and edit source code. The control currently uses the third-party code editor Ace.
Constructor for a new CodeEditor.
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.codeeditor.CodeEditor(sId?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sId? | string | id for the new control, generated automatically if no id is given |
|
mSettings? | object | initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
colorTheme | string | default | Sets the editor color theme. Possible values are: default, hcb, hcb_bright, hcb_blue, theme-ambiance, chaos, chrome, clouds, clouds_midnight, cobalt, crimson_editor, dawn, dreamweaver, eclipse, github, gob, gruvbox, idle_fingers, iplastic, katzenmilch, kr_theme, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, solarized_dark, solarized_light, sqlserver, terminal, textmate, tomorrow, tomorrow_night, tomorrow_night_blue, tomorrow_night_bright, tomorrow_night_eighties, twilight, dracula vibrant_ink, xcode Visibility: public |
editable | boolean | true | Sets whether the code in the editor can be changed by the user. Visibility: public |
height | sap.ui.core.CSSSize | 100% | The height of the code editor. A minimal height of 3rem will be applied in case the height is less than 20px. Visibility: public |
lineNumbers | boolean | true | Sets whether line numbers should be shown. Visibility: public |
maxLines | int | 0 | Sets whether the editor height should auto expand to a maximum number of lines. After reaching the maximum number of lines specified, the content of the Note: Keep in mind that the auto expand |
syntaxHints | boolean | true | Sets whether to show syntax hints in the editor. This flag is only available if line numbers are shown. Visibility: public |
type | string | javascript | The type of the code in the editor used for syntax highlighting. Possible types are: abap, abc, actionscript, ada, apache_conf, applescript, asciidoc, assembly_x86, autohotkey, batchfile, bro, c9search, c_cpp, cirru, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, django, dockerfile, dot, drools, eiffel, ejs, elixir, elm, erlang, forth, fortran, ftl, gcode, gherkin, gitignore, glsl, gobstones, golang, groovy, haml, handlebars, haskell, haskell_cabal, haxe, hjson, html, html_elixir, html_ruby, ini, io, jack, jade, java, javascript, json, jsoniq, jsp, jsx, julia, kotlin, latex, lean, less, liquid, lisp, live_script, livescript, logiql, lsl, lua, luapage, lucene, makefile, markdown, mask, matlab, mavens_mate_log, maze, mel, mips_assembler, mipsassembler, mushcode, mysql, nix, nsis, objectivec, ocaml, pascal, perl, pgsql, php, plain_text, powershell, praat, prolog, properties, protobuf, python, r, razor, rdoc, rhtml, rst, ruby, rust, sass, scad, scala, scheme, scss, sh, sjs, smarty, snippets, soy_template, space, sql, sqlserver, stylus, svg, swift, swig, tcl, tex, text, textile, toml, tsx, twig, typescript, vala, vbscript, velocity, verilog, vhdl, wollok, xml, xquery, yaml, terraform, slim, redshift, red, puppet, php_laravel_blade, mixal, jssm, fsharp, edifact, csp, cssound_score, cssound_orchestra, cssound_document Visibility: public |
value | string | empty string | The value displayed in the code editor. Visibility: public |
valueSelection | boolean | false | Sets whether the code is automatically selected if a value is set. Visibility: public |
width | sap.ui.core.CSSSize | 100% | The width of the code editor. Visibility: public |
Event | Description |
---|---|
change |
Fired when the value has changed and the focus leaves the code editor. |
liveChange |
Fired when the value is changed by user interaction - each keystroke, delete, paste, etc. |
Fired when the value has changed and the focus leaves the code editor.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
value | string |
The current value of the code editor. |
oldValue | string |
The old value of the code editor. |
Fired when the value is changed by user interaction - each keystroke, delete, paste, etc.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
value | string |
The current value of the code editor. |
editorEvent | object |
The underlying change event of the third-party code editor. |
Method | Description |
---|---|
addCustomCompleter |
Defines custom completer - object implementing a getCompletions method. The method has two parameters - fnCallback method and context object. Context object provides details about oPos and sPrefix as provided by the third-party code editor. |
attachChange |
Attaches event handler When called, the context of the event handler (its Fired when the value has changed and the focus leaves the code editor. |
attachLiveChange |
Attaches event handler When called, the context of the event handler (its Fired when the value is changed by user interaction - each keystroke, delete, paste, etc. |
detachChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachLiveChange |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
sap.ui.codeeditor.CodeEditor.extend |
Creates a new subclass of class sap.ui.codeeditor.CodeEditor with name
|
fireChange |
Fires event change to attached listeners. |
fireLiveChange |
Fires event liveChange to attached listeners. |
focus |
Sets the focus to the code editor |
getColorTheme |
Gets current value of property colorTheme. Sets the editor color theme. Possible values are: default, hcb, hcb_bright, hcb_blue, theme-ambiance, chaos, chrome, clouds, clouds_midnight, cobalt, crimson_editor, dawn, dreamweaver, eclipse, github, gob, gruvbox, idle_fingers, iplastic, katzenmilch, kr_theme, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, solarized_dark, solarized_light, sqlserver, terminal, textmate, tomorrow, tomorrow_night, tomorrow_night_blue, tomorrow_night_bright, tomorrow_night_eighties, twilight, dracula vibrant_ink, xcode Default value is |
getCurrentValue |
Returns the current value of the code editor |
getEditable |
Gets current value of property editable. Sets whether the code in the editor can be changed by the user. Default value is |
getHeight |
Gets current value of property height. The height of the code editor. A minimal height of 3rem will be applied in case the height is less than 20px. Default value is |
getInternalEditorInstance |
Returns the third-party code editor instance Caution: Using the third-party code editor instance introduces a dependency to that internal editor. Future changes in the internal editor might lead to undefined behavior, so it should only be used in justified cases. |
getLineNumbers |
Gets current value of property lineNumbers. Sets whether line numbers should be shown. Default value is |
getMaxLines |
Gets current value of property maxLines. Sets whether the editor height should auto expand to a maximum number of lines. After reaching the maximum number of lines specified, the content of the Note: Keep in mind that the auto expand Default value is |
sap.ui.codeeditor.CodeEditor.getMetadata |
Returns a metadata object for class sap.ui.codeeditor.CodeEditor. |
getSyntaxHints |
Gets current value of property syntaxHints. Sets whether to show syntax hints in the editor. This flag is only available if line numbers are shown. Default value is |
getType |
Gets current value of property type. The type of the code in the editor used for syntax highlighting. Possible types are: abap, abc, actionscript, ada, apache_conf, applescript, asciidoc, assembly_x86, autohotkey, batchfile, bro, c9search, c_cpp, cirru, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, django, dockerfile, dot, drools, eiffel, ejs, elixir, elm, erlang, forth, fortran, ftl, gcode, gherkin, gitignore, glsl, gobstones, golang, groovy, haml, handlebars, haskell, haskell_cabal, haxe, hjson, html, html_elixir, html_ruby, ini, io, jack, jade, java, javascript, json, jsoniq, jsp, jsx, julia, kotlin, latex, lean, less, liquid, lisp, live_script, livescript, logiql, lsl, lua, luapage, lucene, makefile, markdown, mask, matlab, mavens_mate_log, maze, mel, mips_assembler, mipsassembler, mushcode, mysql, nix, nsis, objectivec, ocaml, pascal, perl, pgsql, php, plain_text, powershell, praat, prolog, properties, protobuf, python, r, razor, rdoc, rhtml, rst, ruby, rust, sass, scad, scala, scheme, scss, sh, sjs, smarty, snippets, soy_template, space, sql, sqlserver, stylus, svg, swift, swig, tcl, tex, text, textile, toml, tsx, twig, typescript, vala, vbscript, velocity, verilog, vhdl, wollok, xml, xquery, yaml, terraform, slim, redshift, red, puppet, php_laravel_blade, mixal, jssm, fsharp, edifact, csp, cssound_score, cssound_orchestra, cssound_document Default value is |
getValue |
Gets current value of property value. The value displayed in the code editor. Default value is |
getValueSelection |
Gets current value of property valueSelection. Sets whether the code is automatically selected if a value is set. Default value is |
getWidth |
Gets current value of property width. The width of the code editor. Default value is |
prettyPrint |
Pretty-prints the content of the editor |
setColorTheme |
Sets the color theme of the code editor |
setEditable |
Sets a new value for property editable. Sets whether the code in the editor can be changed by the user. When called with a value of Default value is |
setHeight |
Sets a new value for property height. The height of the code editor. A minimal height of 3rem will be applied in case the height is less than 20px. When called with a value of Default value is |
setLineNumbers |
Sets a new value for property lineNumbers. Sets whether line numbers should be shown. When called with a value of Default value is |
setMaxLines |
Sets a new value for property maxLines. Sets whether the editor height should auto expand to a maximum number of lines. After reaching the maximum number of lines specified, the content of the Note: Keep in mind that the auto expand When called with a value of Default value is |
setSyntaxHints |
Sets a new value for property syntaxHints. Sets whether to show syntax hints in the editor. This flag is only available if line numbers are shown. When called with a value of Default value is |
setType |
Sets a new value for property type. The type of the code in the editor used for syntax highlighting. Possible types are: abap, abc, actionscript, ada, apache_conf, applescript, asciidoc, assembly_x86, autohotkey, batchfile, bro, c9search, c_cpp, cirru, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, django, dockerfile, dot, drools, eiffel, ejs, elixir, elm, erlang, forth, fortran, ftl, gcode, gherkin, gitignore, glsl, gobstones, golang, groovy, haml, handlebars, haskell, haskell_cabal, haxe, hjson, html, html_elixir, html_ruby, ini, io, jack, jade, java, javascript, json, jsoniq, jsp, jsx, julia, kotlin, latex, lean, less, liquid, lisp, live_script, livescript, logiql, lsl, lua, luapage, lucene, makefile, markdown, mask, matlab, mavens_mate_log, maze, mel, mips_assembler, mipsassembler, mushcode, mysql, nix, nsis, objectivec, ocaml, pascal, perl, pgsql, php, plain_text, powershell, praat, prolog, properties, protobuf, python, r, razor, rdoc, rhtml, rst, ruby, rust, sass, scad, scala, scheme, scss, sh, sjs, smarty, snippets, soy_template, space, sql, sqlserver, stylus, svg, swift, swig, tcl, tex, text, textile, toml, tsx, twig, typescript, vala, vbscript, velocity, verilog, vhdl, wollok, xml, xquery, yaml, terraform, slim, redshift, red, puppet, php_laravel_blade, mixal, jssm, fsharp, edifact, csp, cssound_score, cssound_orchestra, cssound_document When called with a value of Default value is |
setValue |
Sets a new value for property value. The value displayed in the code editor. When called with a value of Default value is |
setValueSelection |
Sets a new value for property valueSelection. Sets whether the code is automatically selected if a value is set. When called with a value of Default value is |
setWidth |
Sets a new value for property width. The width of the code editor. When called with a value of Default value is |
Defines custom completer - object implementing a getCompletions method. The method has two parameters - fnCallback method and context object. Context object provides details about oPos and sPrefix as provided by the third-party code editor.
Param | Type | DefaultValue | Description |
---|---|---|---|
oCustomCompleter | object |
Object with getCompletions method |
Attaches event handler fnFunction
to the change event of this sap.ui.codeeditor.CodeEditor
.
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.codeeditor.CodeEditor
itself.
Fired when the value has changed and the focus leaves the code editor.
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 liveChange event of this sap.ui.codeeditor.CodeEditor
.
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.codeeditor.CodeEditor
itself.
Fired when the value is changed by user interaction - each keystroke, delete, paste, etc.
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 change event of this sap.ui.codeeditor.CodeEditor
.
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 liveChange event of this sap.ui.codeeditor.CodeEditor
.
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.codeeditor.CodeEditor 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 change to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
value | string |
The current value of the code editor. |
|
oldValue | string |
The old value of the code editor. |
Fires event liveChange to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
value | string |
The current value of the code editor. |
|
editorEvent | object |
The underlying change event of the third-party code editor. |
Gets current value of property colorTheme.
Sets the editor color theme. Possible values are: default, hcb, hcb_bright, hcb_blue, theme-ambiance, chaos, chrome, clouds, clouds_midnight, cobalt, crimson_editor, dawn, dreamweaver, eclipse, github, gob, gruvbox, idle_fingers, iplastic, katzenmilch, kr_theme, kuroir, merbivore, merbivore_soft, mono_industrial, monokai, pastel_on_dark, solarized_dark, solarized_light, sqlserver, terminal, textmate, tomorrow, tomorrow_night, tomorrow_night_blue, tomorrow_night_bright, tomorrow_night_eighties, twilight, dracula vibrant_ink, xcode
Default value is "default"
.
Gets current value of property editable.
Sets whether the code in the editor can be changed by the user.
Default value is true
.
Gets current value of property height.
The height of the code editor. A minimal height of 3rem will be applied in case the height is less than 20px.
Default value is "100%"
.
Returns the third-party code editor instance Caution: Using the third-party code editor instance introduces a dependency to that internal editor. Future changes in the internal editor might lead to undefined behavior, so it should only be used in justified cases.
Gets current value of property lineNumbers.
Sets whether line numbers should be shown.
Default value is true
.
Gets current value of property maxLines.
Sets whether the editor height should auto expand to a maximum number of lines. After reaching the maximum number of lines specified, the content of the CodeEditor
will become scrollable.
Note: Keep in mind that the auto expand CodeEditor
behavior requires the height
property to be set to auto
.
Default value is 0
.
Returns a metadata object for class sap.ui.codeeditor.CodeEditor.
Gets current value of property syntaxHints.
Sets whether to show syntax hints in the editor. This flag is only available if line numbers are shown.
Default value is true
.
Gets current value of property type.
The type of the code in the editor used for syntax highlighting. Possible types are: abap, abc, actionscript, ada, apache_conf, applescript, asciidoc, assembly_x86, autohotkey, batchfile, bro, c9search, c_cpp, cirru, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, django, dockerfile, dot, drools, eiffel, ejs, elixir, elm, erlang, forth, fortran, ftl, gcode, gherkin, gitignore, glsl, gobstones, golang, groovy, haml, handlebars, haskell, haskell_cabal, haxe, hjson, html, html_elixir, html_ruby, ini, io, jack, jade, java, javascript, json, jsoniq, jsp, jsx, julia, kotlin, latex, lean, less, liquid, lisp, live_script, livescript, logiql, lsl, lua, luapage, lucene, makefile, markdown, mask, matlab, mavens_mate_log, maze, mel, mips_assembler, mipsassembler, mushcode, mysql, nix, nsis, objectivec, ocaml, pascal, perl, pgsql, php, plain_text, powershell, praat, prolog, properties, protobuf, python, r, razor, rdoc, rhtml, rst, ruby, rust, sass, scad, scala, scheme, scss, sh, sjs, smarty, snippets, soy_template, space, sql, sqlserver, stylus, svg, swift, swig, tcl, tex, text, textile, toml, tsx, twig, typescript, vala, vbscript, velocity, verilog, vhdl, wollok, xml, xquery, yaml, terraform, slim, redshift, red, puppet, php_laravel_blade, mixal, jssm, fsharp, edifact, csp, cssound_score, cssound_orchestra, cssound_document
Default value is "javascript"
.
Gets current value of property value.
The value displayed in the code editor.
Default value is empty string
.
Gets current value of property valueSelection.
Sets whether the code is automatically selected if a value is set.
Default value is false
.
Sets the color theme of the code editor
Param | Type | DefaultValue | Description |
---|---|---|---|
sTheme | string |
See property documentation for accepted values |
Sets a new value for property editable.
Sets whether the code in the editor can be changed by the user.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bEditable | boolean | true |
New value for property |
Sets a new value for property height.
The height of the code editor. A minimal height of 3rem will be applied in case the height is less than 20px.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "100%"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sHeight | sap.ui.core.CSSSize | "100%" |
New value for property |
Sets a new value for property lineNumbers.
Sets whether line numbers should be shown.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bLineNumbers | boolean | true |
New value for property |
Sets a new value for property maxLines.
Sets whether the editor height should auto expand to a maximum number of lines. After reaching the maximum number of lines specified, the content of the CodeEditor
will become scrollable.
Note: Keep in mind that the auto expand CodeEditor
behavior requires the height
property to be set to auto
.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is 0
.
Param | Type | DefaultValue | Description |
---|---|---|---|
iMaxLines | int | 0 |
New value for property |
Sets a new value for property syntaxHints.
Sets whether to show syntax hints in the editor. This flag is only available if line numbers are shown.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bSyntaxHints | boolean | true |
New value for property |
Sets a new value for property type.
The type of the code in the editor used for syntax highlighting. Possible types are: abap, abc, actionscript, ada, apache_conf, applescript, asciidoc, assembly_x86, autohotkey, batchfile, bro, c9search, c_cpp, cirru, clojure, cobol, coffee, coldfusion, csharp, css, curly, d, dart, diff, django, dockerfile, dot, drools, eiffel, ejs, elixir, elm, erlang, forth, fortran, ftl, gcode, gherkin, gitignore, glsl, gobstones, golang, groovy, haml, handlebars, haskell, haskell_cabal, haxe, hjson, html, html_elixir, html_ruby, ini, io, jack, jade, java, javascript, json, jsoniq, jsp, jsx, julia, kotlin, latex, lean, less, liquid, lisp, live_script, livescript, logiql, lsl, lua, luapage, lucene, makefile, markdown, mask, matlab, mavens_mate_log, maze, mel, mips_assembler, mipsassembler, mushcode, mysql, nix, nsis, objectivec, ocaml, pascal, perl, pgsql, php, plain_text, powershell, praat, prolog, properties, protobuf, python, r, razor, rdoc, rhtml, rst, ruby, rust, sass, scad, scala, scheme, scss, sh, sjs, smarty, snippets, soy_template, space, sql, sqlserver, stylus, svg, swift, swig, tcl, tex, text, textile, toml, tsx, twig, typescript, vala, vbscript, velocity, verilog, vhdl, wollok, xml, xquery, yaml, terraform, slim, redshift, red, puppet, php_laravel_blade, mixal, jssm, fsharp, edifact, csp, cssound_score, cssound_orchestra, cssound_document
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "javascript"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sType | string | "javascript" |
New value for property |
Sets a new value for property value.
The value displayed in the code editor.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is empty string
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sValue | string | "" |
New value for property |
Sets a new value for property valueSelection.
Sets whether the code is automatically selected if a value is set.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bValueSelection | boolean | false |
New value for property |
Sets a new value for property width.
The width of the code editor.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is "100%"
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sWidth | sap.ui.core.CSSSize | "100%" |
New value for property |