bound-editor

A HTML content command for displaying and editing a String or a HTML Value stored in a Screen data variable.

The primary attribute expression of this command should resolve into the String or HTML Value to be edited. The value defines the initial content of the host element, which will then become editable by the user. The various secondary attributes define the properties of the editor, such as the editing tools available to the users.

If bound-editor is evaluated in uneditable content (a composeContent command whose editable attribute is false does this), this content command's functionality becomes exactly that of the HTML content command content that will then display the resolved value of the primary attribute expression.

This command has a priority of 15 if evaluated in HTML content declared as uneditable. Otherwise its priority can be considered to be 0 compared to all other HTML content commands besides bound-repeat, which operates at a higher priority.

Secondary attributes

bound-editor-tools

Required

Value type

EL-evaluated

No

String

Yes

This attribute can be used to define additional tools that will appear in the editing toolbar. The resolved String should list the names of the tools separated by semicolons. Names of the available additional tools are:

font
Allows the user to change the font family and font size of selected contents. Use the bound-editor-availablefonts secondary attribute to define the font families available for selection.
format
Allows the user to copy or remove formatting of selected contents.
indent
Allows the user to increase and decrease the indentation of selected contents.
justify
Allows the user to define justification of selected contents.
link
Allows the user to insert a link.
pagebreak
Allows the user to insert a page break. This break won't have much visible effect on the HTML view, but will render as a proper page break if the content is exported into a PDF.
pastetext
Allows the user to paste content as plain text.
showblocks
Allows the user to activate a display mode visualizing the HTML block elements of the content.
source
Allows the user to open up a dialog displaying the content's HTML source.
table
Allows the user to insert a table.

If not defined, the toolbar will only contain the standard tools.

bound-editor-toolbarcolor

Required

Value type

EL-evaluated

No

String

Yes

Defines the color of the editing toolbar. The resolved value should be a hex RGB value prefixed with a hash mark, eg. "#88bbff".

If not defined, the toolbar will have its default color.

bound-editor-filterpaste

Required

Value type

EL-evaluated

No

Boolean

Yes

If this attribute's value resolves into true, any content pasted into the editable area will have its own style information removed. This is likely to help in making pasted content blend better with the editable area's existing content.

If not defined, the value of false is used, allowing pasted content to retain its styles.

bound-editor-nativespellcheck

Required

Value type

EL-evaluated

No

Boolean

Yes

If this attribute's value resolves into true, the native spell checking mechanism of the browser will not be disabled within the editable area.

If not defined, the value of false is used, disabling the browser's spell checking within the area.

bound-editor-availablefonts

Required

Value type

EL-evaluated

No

String

Yes

This attribute can be used to define the set of font families the editor toolbar's font family tool presents. The resolved value should be a listing the family options separated by semicolons. Each family option may contain one or more similar font families separated by commas, in a way similar to how the font-family CSS property works (eg. "Times New Roman,serif;Arial,sans-serif"). Each option may also contain a label preceded by the font families, separated by a slash (eg."Times/Times New Roman,serif").

Do note that this attribute's value has no effect if the bound-editor-tools attribute's resolved value does not contain the "font" tool.

If not defined, the value "Sans-serif/sans-serif;Serif/serif" is used, giving the user a very simple font selection.

bound-editor-defaults

Required

Value type

EL-evaluated

No

Map

Yes

This attribute allows a Map to be used to define the values of most of the other secondary attributes without actually defining them on the host element. The resolved Map should map attribute names to attribute values. If the host element has a mapped secondary attribute defined, that defined value takes precedence over the mapped value.

These are the keys for secondary attributes that can be defined through the Map:

bound-editor-tools
bound-editor-toolbarcolor
bound-editor-filterpaste
bound-editor-nativespellcheck
bound-editor-availablefonts

bound-editor-of-repeat

Required

Value type

EL-evaluated

No

String

No

This attribute can be used to link this bound-editorto a bound-repeat, allowing this command to access that bound-repeat's item values even if this command's host element is not inside bound-repeat's host element. The host element will in this case contain the defined value of the currently targeted item of the repeat, switching as the targeted item changes. The resolved value of this attribute should match the bound-repeat-name value of the bound-repeat that this command should be linked to.

If this attribute is used to form the link, the primary attribute expression of bound-editor needs to refer to bound-repeat's Collection item using the variable "targetItem" regardless of the related bound-repeat-var.

Note that this attribute has no effect if this command is evaluated in uneditable content.

Examples

The bound-editor command allows any Screen data variables with HTML Values, such as contents of a bound-repeat's items to be edited. Any HTML-formatted, ie. rich-text fields, in Salesforce query results are a common example of this. Make use of the various secondary attributes like bound-editor-tools to configure the editor.

CODE

<div dyn-bound-repeat="records" dyn-bound-repeat-var="record"><div dyn-bound-editor="record.richDescription" dyn-bound-editor-tools="'font;justify;table'"></div>

For an example on the use of the bound-editor-of-repeat attribute, please see the examples section of bound-repeat.