String Component

The string component supplies the form with additional information. The below screenshot shows two responsive sample strings that contain a link and a current date (e.g. 2019-12-11) in ISO 8601 date format plus 21 days.

The payment term sample for the string component

The structure view below shows the initial string component as created by drag-and-drop from the toolbar with its symbol, its label (its visual content), its properties cell, and its tooltip cell. The string type is specified in the context menu.

The overview to the string component

String

The string component of type "String" represents text with no function, but with an optional tooltip.

A sample of the string component

The string component of type "Link" represents an HTML link with an optional tooltip.

The overview to the link string component

The string component below is a link with a tooltip.

A sample for the link string component

The URL is set in the resizable properties dialog below (opened by double-clicking the properties cell).

The properties dialog of the string component

The link styling can be specified in the settings view.

Date

The string component of type "Date" represents the current date with an optional offset in days and an optional tooltip.

The overview to the date string component

The below string component specifies a current date (e.g. 2019-12-11) in ISO 8601 date format with an offset of 21 days, e.g. for a term of payment.

A sample for the date string component

A date offset (-365 ≤ days ≤ 365) can be entered in a properties dialog (opened by double-clicking the properties cell) to define a relative date in the future or past (negative number).

The properties dialog of the date string component

The date format (default is year-month-date ISO 8601) can be set in the settings view.

Container

The string component of type "Container"

  1. wraps a long string in a multi-line HTML string, or
  2. embeds substrings with different properties in a single-line or multi-line HTML string.

Its element symbol is marked with an arrow to indicate that it is a container. The arrow is grayed if the container is empty.

The overview to the string container component

Below is a sample string container with a link and date. A double-click on the string element symbol expands or collapses the container view. This approach allows to build strings of any complexity, to decompose them into manageable building blocks, and to see all properties at a glance.

A sample string container

The expanded container shows the substrings that build the sample string. The substrings can be separated by leading or trailing blanks.

The expanded sample tring container

The sample string was built starting
with an empty string container. Then a …
The initial sample string container
… string component was dragged and dropped
from the toolbar on the container symbol.
Dragging and dropping a string component on the string container symbol
Adding another three string components …
Dragging and dropping another string component on the string container symbol
… built the initial container content.
The initial string container content
The first substring was turned into a link
Turning the first substring into a link
… and supplied with content.
Changing the link label
The second substring (leading blank).
Changing the second substring.
The third substring was turned into a date.
Turning the third substring into a date
A closing paren and a period complete
the string.
Adding a closing paren and a period
A "\-" can be entered where hyphenation is
required.
Inserting a hyphen
Hyphens are indicated by grayed dashes
and turned into ­ in the HTML code.
Hyphen in the string container are displayed grayed

In the layout view, the string container can be styled and set up multi-line or single-line. A single-line string can be left-, center-, or right-aligned.

Single-line and multi-line sample strings

Multi-line string container

A string container is multi-line if its height is larger than 1 unit in the layout view (default).

The multi-line container as initially laid out
by the drawing tool in the layout view.
The initial layout of the multi-line string container
Mouse hover displays the container
and content edges.
Mouse hover
A mouse click on the container near its border
selects the container and displays …
Selecting the multi-line string container
… the resize handles. A mouse click/drag
near the border moves the container.
Moving the multi-line string container
The resized container and line-height. The black
circle is the line-height resize handle.
Resizing the multi-line string container
A mouse click on one or more (shift-key
pressed) strings selects content.
Selecting multi-line string container content
A double-click on a substring or a selection ….
Double-clicking multi-line string container content
… opens its properties dialog.
Multi-line string container content properties dialog
The container with a border (a rectangle was
dragged and dropped from the toolbar).
Multi-line string container with a border
A screenshot snippet from Safari. Rendering is a bit
smaller to more predictably fit the string in the container.
Multi-line string container as screenshot snippet from the browser

Single-line string container

A string container is single-line if its height is set equal to or smaller than 1 unit in the layout view.

A multi-line string (height is 1.1 units) is turned
in its single-line equivalent (1 unit) below.
Turning a multi-line string container into a single-line container
The resize handles allow to change the
container height and thus the font size.
Dragging the resize handles to change the single-line container height
The alignment is indicated by the horizontal
positions of the resize handles.
The single-line container's alignment indicators
A double-click on a container or a selection
near a border opens the properties dialog.
The single line string container's properties dialog