Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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

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 for numbers or dates because the sorting functionality will not work properly in such cases.

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

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

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

HTML

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

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

Double

type: decimal,2

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:

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

Number

type: number

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

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

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

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.

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

Action

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

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

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

Tables

type: table

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

- label: 'Taxes'
  key: 'TAX_AMOUNT*'
  type: 'table'
  columns:
   - Net Amount
   - VAT in %
   - VAT in €
  showInTableHeader: false
  showInDetailList: true

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. 

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

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

Copyright Treskon GmbH.