6. Complex Data Types

6.1. Records

Records are composite data values consisting of field slots, which are name-value pairs, such that we can access the value of a record field via its name. Record fields typically have primitive data values.

Examples of records are address records like {street: "37 Market St", city: "New York", zipCode: 10473} or phone book entries like {type:"home", areaCode:"757" number:"3765295"}.

6.1.1. Color definitions

Colors can be defined with three components on the basis of a color model such as the Red-Green-Blue (RGB) color model or the Hue-Saturation-Lightness (HSL) color model. In both models a fourth component, in the form of a decimal number from the unit interval [0,1] or a corresponding percentage, for defining the opacity (technically called alpha channel) of a color can be added.

In the RGB model, each component value is an integer between 0 and 255. In CSS, an RGB color is specified by a ternary term like rgb( 255, 255, 255) corresponding, e.g., to a JS triple record like {R:255, G:255, B:255}.

In the HSL model, the H component is an integer between 0 and 360 denoting an angle degree in the rainbow color circle with red = 0 = 360, green = 120, and blue = 240. Saturation and lightness are represented as percentages, such that S=100% is full saturation, and 0% is a shade of grey, L=100% is white, 0% lightness is black, and 50% lightness is "normal". In CSS, an HSL color is specified by a ternary term like hsl( 0, 0%, 100%) corresponding, e.g., to a JS triple record like {H:0, S:0, L:100}.

In an HTML form-based user interface, color definitions are supported by HTML5 input elements of type "color", which are supposed to be rendered in the form of a color picker widget.

6.1.2. Geo-coordinates

Geographic coordinates (or geodetic positions) can be defined in the form of records like {latitude: 40.6643, longitude: -73.9385}.

6.1.3. Rendering record fields in a user interface

A record-valued property (like geoCoordinates) should be rendered as a list of fields in a coherent region in the UI, preferably with a fieldset element with the property's label as the content of the legend element. In simple cases, like in the following example, with only a few record fields, using suitable CSS rules, it may be possible to render all fields horizontally on the same line.

<form id="form1">
 <fieldset data-bind="geoCoordinates">
  <label>Latitude: <input type="number" name="latitude"/></label>
  <label>Longitude: <input type="number" name="longitude"/></label>

Notice how the the property geoCoordinates is bound to the fieldset element with the help of the custom attribute data-bind.

6.2. Data collections

Data collections are ordered or unordered sets or bags (multi-sets), with all members being either primitive data values, records of a certain type or data collections of a certain type. Instead of "unordered set", we simply say "set", and instead of "ordered bag" we say "list".


  1. The nick names of a person may be recorded in a set-valued attribute nickNames.

  2. The favorite composers of a person may be recorded in an ordered-set-valued attribute favoriteComposers such that the order represents a ranking.

  3. A train trip route may be recorded as a list of train stop locations.

In a user interface, a collection-valued attribute may be rendered as a text field with a comma-separated list of strings if the value collections are sufficiently small. Otherwise, a special UI widget is needed for displaying collection values and allowing value assignments and changes.