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 12 Next »

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

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

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

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, Numbering, Highlighting, and so on.

Generally it is not recommended using this data type if the column is shown in the table (showInTableHeader should 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 using this data type if the column is shown in the table (showInTableHeader should 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

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 hrefhttps://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 appearance property can be either:

  • primary — a button is shown below the entry data in highlight-color

  • secondary — a button is shown below the entry data in an inverted style

  • dropdown — the action is part of the (always visible) options menu (…)

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. You can use the official feather icon site to search for icons and use the icon name inside the property (e.g. phone).

- label: 'Send Request'
  key: 'requestMailto'
  type: 'action'
  appearance: 'secondary'
  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
    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 

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
  • No labels