In Portrait you can define how the data is shown on the users frontend and with column types you can define the style and behaviour of the data. Furthermore you can make use of Actions which lets you integrate "Call To Actions" that fits the situation and gives a more streamlined user-experience.

String

To represent a text in its original form. Use this type if you cannot determine the source definition. Try to avoid this type for numbers or dates because the sorting functionality will not work properly in such cases.

type: string

If a string contains formatting, for instance line breaks, they will be ignored. In case you need formatting features, see the column types:

- label: 'Creator'
  key: 'creator'
  type: 'string'
  showInTableHeader: true
  showInDetailList: true

Text

In case you need formatting features, you can use this type. The formatting features are based on Markdown (see: https://en.wikipedia.org/wiki/Markdown for details on how to use it). This markup language is used as well-known for its use in documentation software and content management systems like Wikimedia or Atlassian Confluence. The feature set is limited, but therefore especially useful for: Headings, Numberings, Highlighting, and so on.

Generally it is not recommended to use this data type if the column is shown in the table (showInTableHeadershould be false).

type: text

- label: 'Worklog'
  key: 'description'
  type: 'text'
  showInTableHeader: false
  showInDetailList: true

HTML

This type can be used for advanced formatting and extended functionality inside the UI. Since the Portrait Frontend in itself uses HTML for markup declaration, the risk of interference and therefore a malfunctioning Portrait-App is high. Therefore it is very important to provide clean and safe data inside this column.

Generally it is not recommended to use this data type if the column is shown in the table (showInTableHeadershould be false)..

type: html

- label: 'Article'
  key: 'content'
  type: 'html'
  showInTableHeader: false
  showInDetailList: true

Double

Use this definition to show the column values as a Floating Point- Number (e.g.: 12,34). In case of the type decimal you must provide a number of digits for the fractional parts. For Typically this would be two digits:

type: decimal,2

- label: 'Revenue'
  key: 'Umsatz'
  type: 'decimal,2'
  showInTableHeader: true
  showInDetailList: false

Number

This column type is used to declare a natural number. Useful if a number represents an amount or a count.

type: number

- label: 'Amount'
  key: 'lineAmount'
  type: 'number'
  showInTableHeader: false
  showInDetailList: true

Date

This column type is used to declare data as date. Make sure that you declare the data backend-wise in the correct format: 2018-02-28 or 2018-02-28 18:33:56.01. A date-field shown in the User-Frontend will not contain the time-part.
How a date will be presented to the user depends on his used browser language, for example given the above date will look this:

en-US: 02/28/2018
de-DE: 28.02.2018

The sorting functionality inside the table is not affected by the way how the date is shown to the user.

type: date

- label: 'Created on'
  key: 'createdon'
  type: 'date'
  showInTableHeader: true
  showInDetailList: true

Boolean

In case you want to show the boolean state of a value as either Yes or No. Make sure that you declare the data backend-wise in the correct format: True or False.

type: boolean

- label: 'Is Shipped'
  key: 'shipped'
  type: 'boolean'
  showInTableHeader: true
  showInDetailList: true

Action

Based on backend-data

With this type you can define an action for an entry based on a prediefend backend-value In terms of the frontend, this actions are also known as "Call To Action". An action could be:

open the corresponding Contact in a CRM-Webapplication for this entry
show the address for this entry in Google Maps
open the document via ELO-WebClient
open the document via elodms:// in the ELO Rich-Client.
send an e-mail via mailto://

As long as the defined action can be used inside an href-tag (see Chapter href: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) it is a valid action. The action itself is therefore declare as value-field in the backend-query: https://maps.google.at/?q=Stephansplatz%201,%20Wien or mailto://office@treskon.at.

An action will be shown as a button on the frontend. One entry can have several actions defined.

type: action

- label: 'Send Request'
  key: 'requestMailto'
  type: 'action'
  showInTableHeader: false
  showInDetailList: true

Using handlebar placeholders IN DEVELOPMENT

Alternatively the action can be defined in the configuration and use variables from the given section.

Instead of using a value from the entry.data as action-value, the action can be defined in the config-file and use variables, which will be replaced at runtime. In the following example, the following URL shall be opened via an action-button: https://maps.google.at/?q=Stephansplatz%201,%20Wien. To achieve this, the following configuration must be made in the backend:

type: action

- label: 'Send Request'
  key: 'requestMailto'
  type: 'action'
  href: 'https://maps.google.at/?q={{address}},%20{{city}}'
  showInTableHeader: false
  showInDetailList: true

Download

This type will show a download button for the linked document (next to possibly defined actions). This type is only effective if the entry is connected to a document (currently only possible for entries coming from ELO sources). For this type the configuration value key has no effect - it will therefore be ignored.

We recommend to provide a _fileSize as column well. This actual file size of the downloadable document will be shown whilst hovering over the download button (see example configuration below).

type: download

- label: 'Open Invoice'
  key: ''
  type: 'download'
  showInTableHeader: false
  showInDetailList: true
 
- label: 'Filesize'
  key: '_fileSize'
  type: 'text'
  showInTableHeader: false
  showInDetailList: false

Column Types