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

String

type: string

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

Markup

In case you need formatting features, you can activate the allowMarkup option.

Markdown

The formatting can be based on Markdown (see: https://en.wikipedia.org/wiki/Markdown for details on how to use it). This markup language is 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, Numbering, Highlighting, and so on.

Generally it is not recommended using this option if the column is shown in the table (showInTableHeader should be false).

HTML

This option 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 using this data type if the column is shown in the table (showInTableHeader should be false).

Preserve Line Breaks

If your text has longer text including line breaks, and you want to preserve them, you can activate the option newline. In combination with the allowMarkup option, the rendering of content is very flexible.

Hide fields if they are empty

You can define, if a field should be hidden in the detail view, if the value is empty.

In this example, the Creator field is hidden, if it is empty:

By default, the field is shown even though, the value is empty.

Pill

type: pill

The pill lets you color highlight specific values (e.g. “To-Do” is blue, “In Progress” is yellow, “Done” is green). The pill can be either used inside the list and inside the detail view.

Number

type: number

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

The two options are not mandatory:

• maximumFractionDigits determines the maximum amount of digits after the decimal point.

• currencyCode accepts a 3-Letter ISO code, like EUR. If set, all other options are ignored and the number will be formatted with the given currency. For Euro, it would be 314,14 €

Date

type: 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.

Boolean

type: boolean

A boolean represents a true/false value.

The following values, and their string representations, are considered as false: false, 0, null, '', undefined.

Form

type: form

Allow opening forms directly from a given entry. The form can be opened with given data of the entry when the property forwardFields is configured.

In this example, the form 'createOpportunity' can be opened via the button 'New Opportunity' inside the detail-view of an entry. The values COMPANY_REFERENCE, COMPANY_REFERENCE or SOURCEID are passed into the form. The button has the icon 'briefcase'.

Action

type: action

Based on backend-data

With this type you can define an action for an entry based on a predefined backend-value In terms of the frontend, these 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 a 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.

The icon property defines what glyph is shown in the button. The list of possible icons is based on the Feather – Simply beautiful open source icons library and are open source. The feather icon site lets you search for icons and use the icon name inside the property (e.g. phone).

Tables

type: table

This type can be used to show a list of objects as a table. In conjunction with the ELO maps this can represent tables with columns and a given list of lines.

Options:

• tableWidth either ‘fixed’ or 'auto'

Download

type: 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.

Stacked bar chart

type: stackedBarChart

This type will show a horizontal bar chart to use for visualizing progress or similar data. You can pass a configuration object where you can specify which keys from the entries the chart should use, and their color in the chart.

Open

If you have an entry with these data fields:

A stacked bar chart type with the above configuration will create a diagram that shows 50% “Remaining” in color #C6DDF0, 40% “Spent” in color #C99DA3 and 10% “Excess” in color #996888.