Details View

Overview

Details views are typically presented when a user selects an entity from a collection list and wishes to find out more about it or access more detailed information.

Like collections and forms, details views are rendered by a set of nunjuck macros that are called with data in a predefined format, produced by transformers.

Transformers - The structures and types expected

A key value table is a relatively simple component that shows a table with labels and values. The data structure passed to a key value table is relatively simple:

{
  'Name': 'John Smith',
  'Age': 48,
  'Company': {
    id: '1234',
    name: 'Acme corp',
    url: '/companies/1234/details
  },
  'Location': {
    id: '4444',
    name: 'Freds Cafe'
  }
}

The job of a detail transformer is to produce an object, it's keys being the labels that are showin in the resulting table. The value for a detail property can either be a plain string or an object, and the value to be displayed in that case is to be stored in a property called 'name'. The reason this property is called 'name' is due to the fact that related objects returned by the API tend to contain the id of the related record alongside a name property to define it's display name.

Additional properties can be used to trigger additional behaviour when rendering.

• url: Used to define a url to link to, in this case a href is created linking to the url, using the name property for the text to display in the link. A url can be combined with a hint property with text to display after the link.
• type: This can be set to 'date' or 'currency' to format the contents of the name property into the desired format.
• actions Some table lines require one or more links to be displayed after the name. The actions property takes an array of objects containing a url and label.

If the value for an item is an array, then the array elements are treated as plain strings and displayed as 'item 1, item 2'.