The fglrichtext web component

The fglrichtext built-in web component uses the gICAPI web component framework.

Figure: fglrichtext web component

Using images in rich text content

The fglrichtext web component allows insertion of image resources into the text. This can be done with the image option of the toolbar, by copy/paste, or drag&drop operations.

When inserting an image resource from a copy/paste from a web resource (like an HTML page), only the URL of the image resource is inserted in the text. If this URL is no longer available, the image will disappear from the text.

Defining the fglrichtext web component in the form file

In your .per form definition file, define the HTML text editor as a WEBCOMPONENT form item with the COMPONENTTYPE attribute set to the "fglrichtext" value.

The fglrichtext web component provides its own built-in scrollbars. Therefore, the SCROLLBARS attribute can be set to NONE.

Use SIZEPOLICY=FIXED and STRETCH=BOTH, to get a text editor that is resized with the parent window.

For example:

LAYOUT
GRID
{
[rt                     ]
[                       ]
[                       ]
...
ATTRIBUTES
WEBCOMPONENT rt = FORMONLY.richtext,
  COMPONENTTYPE = "fglrichtext",
  PROPERTIES = (
    toolbar = "bold|italic|underline|undo|redo"
  ),
  SCROLLBARS = NONE,
  SIZEPOLICY = FIXED,
  STRETCH = BOTH;
...

Properties of the fglrichtext

Configuring the toolbar

Define the controls to be used in the editor toolbar with the toolbar property in the PROPERTIES attribute.

WEBCOMPONENT rt = FORMONLY.richtext,
  ...
  PROPERTIES = (
    toolbar = "bold|italic|underline|undo|redo|emoji"
  ),
  ...

The fglrichtext web component supports the following toolbar items:

Using the spell checker

WEBCOMPONENT rt = FORMONLY.richtext,
  ...
  PROPERTIES = (
    spellcheck = "browser"
  ),
  ...

Auto-flushing the rich text content

By default, the text value of an fglrichtext field is only flushed to the runtime system, when focus leaves the field or when firing an action.

WEBCOMPONENT rt = FORMONLY.richtext,
  ...
  PROPERTIES = (
    autoflush = "save_text",
    autoflush_interval = 5  -- Flush every 5 seconds
  ),
  ...

In the program code, implement an ON ACTION handler using the action name that matches the autoflush property of the WEBCOMPONENT field. When the action is fired, the rich text will be available in the WEBCOMPONENT field value. Use the UNBUFFERED dialog mode to have the text automatically copied into the program variable bound to the form field:

INPUT BY NAME rec.richtext, -- Variable bound to the WEBCOMPONENT form field
              ...
      ATTRIBUTES(UNBUFFERED) -- To get the input buffer copied into the variable
   ...
   ON ACTION save_text ATTRIBUTES(DEFAULTVIEW = NO)
      UPDATE ord_info SET oi_comment = rec.richtext
             WHERE oi_pkey = curr_pkey
   ...

Auto-flush can for example be used to implement automatic backup of the text content.

Defining the rich text field as read-only

WEBCOMPONENT rt = FORMONLY.richtext,
  ...
  PROPERTIES = (
    noteditable = true
  ),
  ...

Specifying the default font

WEBCOMPONENT rt = FORMONLY.richtext,
  ...
  PROPERTIES = (
   font_family = "Monospace",
   font_size = "25px"
  ),
  ...

The font_size defines the px unit, otherwise, the property will be ignored.

If the toolbar items fontselect / fontsizeselect are used, they will display the font family and font size defined by the properties, when the fglrichtext initializes.

If the user moves the edit cursor to a text element that uses a different font to the one specified with these attributes, the richtext will reset the current font settings to match that text element.

Localizing rich text component strings

The toolbar button tooltips, combobox items, and popup dialog labels of the fglrichtext web component can be localized with dedicated properties.

label-localization-property = '{ "item-name" : "item-label" [,...] }'

For example (not using localized strings):

WEBCOMPONENT rt = FORMONLY.richtext,
  ...
  PROPERTIES = (
   labels_toolbar_tooltips = '{ "aligncenter":"Centré", "alignjustify":"Justifié",  ... }'
   labels_toolbar_link = '{"save":"OK","label":"Entrez un lien:"}'
   labels_toolbar_linespacing = '{"small":"Petit","normal":"Normal","large":"Grand", ... }'
   labels_toolbar_formatselect = '{"heading":"Titre","normal":"Normal"}'
  ),
  ...

labels_toolbar_tooltips = %"rtlabels.toolbar.tooltips"

rtlabels.toolbar.tooltips = '{ "aligncenter":"Centré", "alignjustify":"Justifié", ... }'