class sap.ui.codeeditor.CodeEditor

Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/ui/codeeditor/CodeEditor
Application Component:

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

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


Properties

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 CodeEditor will become scrollable.

Note: Keep in mind that the auto expand CodeEditor behavior requires the height property to be set to auto.

Since: 1.48.1.

Visibility: public
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

Events Overview

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.

change

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.

liveChange

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.


Methods Overview

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 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.

attachLiveChange

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.

detachChange

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.

detachLiveChange

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.

sap.ui.codeeditor.CodeEditor.extend

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.

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 "default".

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 true.

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 "100%".

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 true.

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 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.

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 true.

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 "javascript".

getValue

Gets current value of property value.

The value displayed in the code editor.

Default value is empty string.

getValueSelection

Gets current value of property valueSelection.

Sets whether the code is automatically selected if a value is set.

Default value is false.

getWidth

Gets current value of property width.

The width of the code editor.

Default value is "100%".

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 null or undefined, the default value of the property will be restored.

Default value is true.

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 null or undefined, the default value of the property will be restored.

Default value is "100%".

setLineNumbers

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.

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 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.

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 null or undefined, the default value of the property will be restored.

Default value is true.

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 null or undefined, the default value of the property will be restored.

Default value is "javascript".

setValue

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.

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 null or undefined, the default value of the property will be restored.

Default value is false.

setWidth

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%".

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.

Param Type DefaultValue Description
oCustomCompleter object

Object with getCompletions method

attachChange

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 sap.ui.codeeditor.CodeEditor itself

attachLiveChange

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 sap.ui.codeeditor.CodeEditor itself

detachChange

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

detachLiveChange

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

sap.ui.codeeditor.CodeEditor.extend

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

fireChange

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.

fireLiveChange

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.

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 "default".

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 true.

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 "100%".

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 true.

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 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.

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 true.

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 "javascript".

getValue

Gets current value of property value.

The value displayed in the code editor.

Default value is empty string.

getValueSelection

Gets current value of property valueSelection.

Sets whether the code is automatically selected if a value is set.

Default value is false.

getWidth

Gets current value of property width.

The width of the code editor.

Default value is "100%".

prettyPrint

Pretty-prints the content of the editor

setColorTheme

Sets the color theme of the code editor

Param Type DefaultValue Description
sTheme string

See property documentation for accepted values

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 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 editable

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 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 height

setLineNumbers

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 lineNumbers

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 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 maxLines

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 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 syntaxHints

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 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 type

setValue

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 value

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 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 valueSelection

setWidth

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 width