Images and colors

Named Colors

To ensure consistency of color use in your pages, and ease of maintenance, you can use named colors instead of hard-coding colors in your pages.

A Named color is declared with the Color keyword as follows:

<name> = Color <colorspec>



okColor = Color RGB(128, 255, 128)  //Green
warningColor = Color #FF6A22  //Yellow  
criticalColor = Color #FF0000
titleColor = Color Theme.foreground1

The value of a named color can be any valid color value :



RGB( r, g ,b)

RGB(128, 25, 255)

HEX long


HEX ( #FF8080)

HEX short



RGB with transparency

RGBA ( r, g, b, a)

RGBA( 128, 25, 255, 0.5 )

standard color

red, green, blue, yellow, etc.

eg. red

Theme color



another named color


titleColor. Note that a named color should not reference itself

The named color must be declared outside of a Page container, much like NLS, Constants, etc. usually in a resources.pages file. It can then be used anywhere as follows:

  • import the page file that include the color definition in your page
  • reference the color by its name wherever a color can be used (ie mainly in styles)



import ""

okStyle = Style{
  font: "Arial"
  size: 12px
  foreground: okColor;
  background: Color white;

Page {
    Text {
      value: "OK"
      style: okStyle

Theme colors

Theme page colors, as defined in the configuration, can be referenced in pages using Theme.colorname syntax. This is useful to ensure consistent color usage across pages and add-ons.

The table below list the theme colors



text and icon color of general un-styled buttons in pages. This color can also be used in pages using Theme.foreground1


background color of general , un-styled buttons in pages This color can also be used in pages using Theme.background1


intended for text and icons of primary buttons in pages. This color can be used in pages using Theme.foreground2


intended for background color of primary buttons in pages. This color can also be used in pages using Theme.background2


intended for text and icons of secondary buttons in pages. This color can be used in pages using Theme.foreground3


intended for background color of secondary buttons in pages. This color can also be used in pages using Theme.background3


this color can be used in pages using Theme.foreground4


this color can be used in pages using Theme.background4


color of selected items in common widgets in pages (eg. table selected rows, tab folder selected tab, combo box selection, etc...). This color can be used in pages using Theme.selection for example in custom html widgets


color of highlighted area when a wiget is in focus (eg. button, check-box, table, tab-folder, text edit, etc...)

Custom#1 through Custom#5

these colors can be freely used in customer projects pages using Theme.user1 through Theme.user5

Theme configuration

SVG images

It's now possible to use SVG images in portal pages, wherever bitmap images are accepted. Since SVG images are vector graphics, they can be rendered at any size, without loss of precision. You can specify an optional size when using an svg image in Pages. For example, you could use the same account svg image file to display as a list of small icons in a table , and a larger image in accounts detail panel.

Moreover, monochromatic SVG images can be dynamically colored to a given color, and the same svg image can be displayed at different places with different colors. This is especially useful in tow use cases:

  • matching the graphical chart colors of a company
  • displaying images with dynamically computed colors ( eg. red / green / blue)

Modifying images using Style

Style statement has been extended to support image sizing and coloring for SVG. Sizing and coloring applies to widgets for which the style is assigned using styling: statement. You can combine image styling with other styling attributes ( text size and color, background color ) .



optional, allows to colorize SVG image with the specified color.

image-color: #FF0000


optional, allows to scale an SVG image to the specified width in pixels. If only width is specified but not height, assumes the icon is square and sets image height accordingly

image-width: 32px


optional, allows to scale an SVG image to the specified height in pixels

image-height: 20px

If no fill statement is present in the SVG file, coloring will have no effect. Moreover, any stroke (lines coloring) attribute present in the SVG file will not be affected by coloring.

Example 1: big colored button

blueColor = Color #0C71C3

bigBlueButton = Style {
  size: 24px
  background: Color white
  foreground: blueColor
  image-color: blueColor
  image-width: 32px
  image-height: 32px

myPage = Page {
  Button {
    text: "Big Blue Button!"
    image: "svg/orga.svg"
    styling: bigBlueButton
    actions: Flash "action"

Button example

Example 2: table with status icons

 /* colors and styles */

okColor = Color #51cb3a
warningColor =Color #FEA31B
criticalColor = Color #FF3535

 risk_baseStyle = Style {
    image-width: 12px

 risk_criticalStyle = Style( risk_baseStyle) {
   image-color: criticalColor

 risk_warningStyle = Style( risk_baseStyle) {
   image-color: warningColor

 risk_okStyle = Style( risk_baseStyle) {
   image-color: okColor

 riskStyleTemplate = IntStylingTemplate {
  when > 40 then risk_criticalStyle
  when > 20 then risk_warningStyle
  otherwise risk_okStyle

/* page content */
myPage = Page {
    Table {
      data: counts
     Column {
        column: noownercode
        header: "Type"
      Column {
        column: count
        header: "Count Level"
        image:  "svg/fav.svg"
        text: ""
        styling: StylingTemplateSelection ( Current count) using riskStyleTemplate

Status table

Image Maps

An Image map is a named set of images, similar to NLS for text strings. Each image in the image map is referenced using a unique logical name. The main benefit of image maps is to simplify maintenance of numerous images across different projects and add-ons. For example, if you modify an image file name or location, you only need to change its reference in the image map and the change will be reflected in all occurrences.

To define an image map, use the following syntax:

<imageMapName> = ImageMap {
   (<entryName> [ "<path_to_image" ] )*

Here is a basic example of an ImageMap than references default small entities icons ( grey / 16 px)


conceptsSmall = ImageMap {
  account [ "16/audit/grey/account_16.png" ]
  identity [ "16/audit/grey/identity_16.png" ]
  application [ "16/audit/grey/application_16.png" ]
  organisation [ "16/audit/grey/orga_16.png" ]
  permission [ "16/audit/grey/perm_16.png" ]

You can then reference an image map entry in pages anywhere an image is accepted using the following syntax:


As usual, you also need to import the page file that declares the image map.

For example, referencing the identity icon as small icon of identity search page:

import "webportal/"

identitySearchPage = Page {
  title: $search.identity.title
  icon: %conceptsSmall.identity

In the case of SVG images, it's also possible to size or colorize the image directly in the image map entry using the following syntax:

<entryName> [ "<path_to_svg>" [ width: <number>px]  [ height: <number>px]  [ color: <color_value> ] ]

where <color_value> is any acceptable color constant expression.

For example, it could be possible to define different images maps for different colors and or sizes, using the same reduced set of SVG images.

Considering again the concepts image maps, let's define two images maps for large and small concepts:

conceptsSmall = ImageMap {
   account [ "svg/account.svg" width: 16px ]
   identity [ "svg/identity.svg" width: 16px ]
   application [ "svg/app.svg" width: 16px ]
   organisation [ "svg/org.svg" width: 16px ]
   permission [ "svg/perm.svg" width: 16px ]

conceptsLarge = ImageMap {
   account [ "svg/account.svg" width: 48px ]
   identity [ "svg/identity.svg" width: 48px ]
   application [ "svg/app.svg" width: 48px ]
   organisation [ "svg/org.svg" width: 48px ]
   permission [ "svg/perm.svg" width: 48px ]


import "webportal/"

identitySearchPage = Page {
  title: $search.identity.title
  icon: %conceptsSmall.identity
  large-icon: %conceptsLarge.identity

You can freely combine size and color modifications using both ImageMap and Styling.

The example below defines a default button style that uses the configuration default button color for text and icons.

defaultButtonStyle = Styling {
  icon-color: Theme.foreground1
  foreground: Theme.foreground1

Button {
   text: "Default Identity Button"
   image: %conceptsSmall.identity
   styling: defaultButtonStyle

When maximum flexibility is needed, it's advised to not set colors and sizes in ImageMaps, but rather using styles.