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.

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

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).

- label: 'Creator'
  key: 'creator'
  type: 'string'
  showInTableHeader: false
  showInDetailList: true
  options:
    allowMarkup: markdown

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).

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

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.

- label: 'Description'
  key: 'desc'
  type: 'string'
  showInTableHeader: false
  showInDetailList: true
  options:
    newline: preserve

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:

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

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.

- label: 'Priority'
  key: 'Priority'
  type: 'pill'
  options:
    allowMarkup: markdown
    defaultColor: "#0022dd"
    highlight:
      - value: "1 - Low"
        color: "#C6DDF0"
      - value: "2 - Medium"
        color: "#C99DA3"
      - value: "3 - High"
        color: "#996888"
  showInTableHeader: true
  showInDetailList: true

Number

type: number

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

- label: 'Amount'
  key: 'lineAmount'
  type: 'number'
  showInTableHeader: false
  showInDetailList: true
  options:
    maximumFractionDigits: 2
    currencyCode: USD

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.

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

Boolean

type: boolean

A boolean represents a true/false value.

- label: 'Is completed'
  key: 'isCompleted'
  type: 'boolean'
  showInTableHeader: true
  showInDetailList: true

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

Reference

type: reference

If you index multiple Entity you may want to display the relationship between these. When modelling your data usually there are 3 types of relation that can occur:

Currently the limitation is that Portrait can only display 1 (or 0) perreference column.

Example:

We have two Portrait sections:

- name: facilities-at
  columns:
    - label: 'Nummer'
      key: 'FAC_ID'
      type: 'string'
      showInTableHeader: false
      showInDetailList: true
    - label: 'Name'
      key: 'FAC_NAME'
      type: 'string'
      showInTableHeader: false
      showInDetailList: true

- name: incidents
  columns:
    - label: 'Facility'
      key: 'ServiceFacilityNo' #contains the key of the target entry
      type: 'reference'
      options:
        sectionID: facilities-at # section where the reference should target
        fieldKey:  FAC_NAME # label for the reference, inside the incident section

incidents has a n:1 relation to facilities-at. A incident occured in exactly one facility. While a facility can have multiple incidents.

We can’t display the relation from facilities to incidents yet. However we can display the relation from incident to facility:

• key: ‘ServiceFacilityNo' → so this is our ‘foreign key column’ inside incidents. REQUIRED

• sectionID: facilities-at → section where the reference should target REQUIRED

• fieldKey: FAC_NAME → label for the reference inside the incident section. OPTIONAL Default would be the configured default ‘name’ column in facilities-at.

References with ELO -

In combination with ELO you have two options for the foreign key a technical key and a Surrogate key. The technical key would be the GUID in ELO. e.g

https://service.demo.portrait.app/en/facilities-de/C5ABFA8D-231A-7366-129F-6F3AD4232389

the Surrogate key would be a unique string depending our your use case. e.g

e.g https://service.demo.portrait.app/en/facilities-at/5003/

Surrogate Key

Go to the source and set key String OPTIONAL attribute. see ELO sources

- id: facilities-at
  ...
  key: 'FAC_ID'

Technical Key

To use the GUID incidents must have stored the GUID of the referenced facilities-at as attribute. To achieve this in ELO you have to use the datatype ‘Relation’ in the indexed ELO mask object. This way ELO stores not the value of the referenced object. But instead the GUID of the referenced object.

For Portrait there are no additional steps as the GUID will be automatically used as the ID if not change explicitly.

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.

- label: 'New Opportunity'
  type: 'form'
  key: 'createOpportunity'
  icon: 'briefcase'
  showInTableHeader: false
  showInDetailList: true
  options:
    forwardFields:
      - COMPANY_REFERENCE
      - COMPANY_NAME
      - SOURCEID

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 https://feathericons.com/ 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).

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

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.

- label: 'Taxes'
  key: 'map_objekte_TAX_AMOUNT'
  type: 'table'
  options:
    allowMarkup: markdown
    tableWidth: auto
    columns:
      - label: Net Amount
        field: TAX_AMOUNT_POS_NET
      - label: VAT in %
        field: TAX_AMOUNT_IN_PERCENT
      - label: VAT in €
        field: TAX_AMOUNT_IN_EUR
  showInTableHeader: false
  showInDetailList: true 

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.

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

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.

- label: 'Progress'
  key: ''
  type: 'stackedBarChart'
  showInTableHeader: false
  showInDetailList: true
  options:
    defaultColor: '#0022dd',
    stackedBarChart:
      - key: 'Remaining'
        color: '#C6DDF0'
      - key: 'Spent'
        color: '#C99DA3'
      - key: 'Excess'
        color: '#996888'

If you have an entry with these data fields:

{
  "Remaining": 5,
  "Spent": 4,
  "Excess": 1,
}

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.