HOME COMMUNITY BLOG
Skip to end of metadata
Go to start of metadata

Notification boxes allow you to dynamically display information in different parts of the application. 

Currently supported places are:

  • Logo Box

Tooltips allow you to show additional data when a user moves a mouse cursor over a drop-down input field.

MODEL STRUCTURE

Notification Boxes
 Notification Box
  Data Service Tooltip

In This Chapter

Examples

In this example the user can see a company logo and a phone line he is currently assigned to.

The user sees a stop-watch after starting a sequential workflow. He can pause/resume the stop-watch by pressing the action buttons for the current screen.

In this case the notification box is being refreshed every second so we could calculate how many seconds passed since starting the workflow (this information is written in a database so every time the logo refreshes we load the data, calculate the time and display it).

This tooltip will appear when the user moves over a lookup field in the UI:

Creating a Notification Box

In order to define content for the notification box you need two simple things:

  • a Data Structure for data for the box
  • a Transformation that will generate the content

1. Model–Notification Box

First you need to create a Notification Box element in User Interface > Notification Boxes:

You can specify the following attributes:

Type

Type of the notification box. The only option is Logo. Future releases may support other notification box placements.

RefreshIntervalThe Number of seconds to wait before refreshing the box. When in the ORIGAM GUI, it will refresh the content after this interval.

2. Model–Tooltip

Now you can specify a tooltip element under the notification box by right-clicking on the notification box element and selecting New > Data Service Tooltip.

You can specify the following attributes:

Features

The Name of the feature (or more, semicolon separated). When the feature is on, this tooltip be displayed. Otherwise the system will try another tooltip.

Roles

The Name of the application role (or more, semicolon separated). When the user is assigned to the role, this tooltip will be evaluated to be displayed. Otherwise the system will try another tooltip.

LevelA sort order in which the system will evaluate possible lookup (beginning from the smallest).
TooltipDataStructureA data structure for that will be a data source for the transformation.
TooltipLoadMethodA method (typically a filter set) that will limit the data.
TooltipTransformationA transformation that will generate data for the tooltip.

Tooltip Transformation

The transformation for a tooltip needs to return a special structure for rendering rich formatted data.

Tooltip Transformation Example

<tooltip>

Tooltip is the root element of the tooltip information.

<Tooltip> Example

Attributes

titleIf you want the tooltip to be docked in a sidebar (for record level tooltips) you can specify a title that will be displayed in the header of the section.

Possible subelements:

  • <cell>

<cell>

Cell defines a section inside the tooltip. A tooltip can contain one or more cells. Cells are of different types.

<Cell> Example

Attributes

type

Type of the cell. Possible values are:

  • grid
  • text
  • image
xColumn number
yRow number
heightNumber of rows
widthNumber of columns
verticalGapGap between columns
colorBackground color of the cell
srcUrl pointing to the image location in case that type="image".

Possible subelements:

  • <cell>
  • <row>
  • HTML markup if type="text"

<row>

In case you need to put data into tabular format, you can create <row> elements. The cell type needs to be grid.

Possible subelements:

  • <col>

<col>

Each grid row can be split into cells defined by the <col> element.

Attributes

width

Width of the column in pixels.

percentWidthWidth of the column in percents.

Possible subelements:

  • HTML markup

HTML markup

ORIGAM supports a small subset of HTML. The following HTML tags are supported:

Anchor tagThe <a> tag creates a hypertext link and supports the following attributes:
  • target: Specifies the name of the target window where you load the page. Options include _self_blank_parent, and _top. The _self option specifies the current frame in the current window, _blank specifies a new window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current window. 
  • href: Specifies a URL or a link event.The URL can be either absolute or relative to the location of the SWF file that is loading the page. An example of an absolute reference to a URL is http://www.origam.com; an example of a relative reference is /index.html. Absolute URLs must be prefixed with http://; otherwise, ORIGAM treats them as relative URLs. You can use the link event to cause the link to execute an ORIGAM function instead of opening a URL. To specify a link event, use the event scheme instead of the http scheme in your href attribute. An example is href="event:myText" instead of href="http://myURL"; when the user clicks a hypertext link that contains the event scheme, the text field dispatches a link TextEvent with its text property set to "myText". See below for the list of link functions.
Bold tagThe <b> tag renders text as bold. A bold typeface must be available for the font used.
Break tagThe <br> tag creates a line break in the text field. Set the text field to be a multiline text field to use this tag.
Font tagThe <font> tag specifies a font or list of fonts to display the text.The font tag supports the following attributes:
  • color: Only hexadecimal color (#FFFFFF) values are supported. 
  • face: Specifies the name of the font to use. As shown in the following example, you can specify a list of comma-delimited font names, in which case ORIGAM selects the first available font. If the specified font is not installed on the local computer system or isn't embedded ORIGAM selects a substitute font. 
  • size: Specifies the size of the font. You can use absolute pixel sizes, such as 16 or 18, or relative point sizes, such as +2 or -4. 
Image tagThe <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. You must set the text field to be multiline to wrap text around an image. 

The <img> tag supports the following attributes: 

  • src: Specifies the URL to an image or SWF file, or the linkage identifier for a movie clip symbol in the library. This attribute is required; all other attributes are optional. External files (JPEG, GIF, PNG, and SWF files) do not show until they are downloaded completely. 
  • width: The width of the image, SWF file, or movie clip being inserted, in pixels. 
  • height: The height of the image, SWF file, or movie clip being inserted, in pixels. 
  • align: Specifies the horizontal alignment of the embedded image within the text field. Valid values are left and right. The default value is left
  • hspace: Specifies the amount of horizontal space that surrounds the image where no text appears. The default value is 8. 
  • vspace: Specifies the amount of vertical space that surrounds the image where no text appears. The default value is 8.

ORIGAM displays media embedded in a text field at full size. To specify the dimensions of the media you are embedding, use the <img> tag height and width attributes. 

In general, an image embedded in a text field appears on the line following the <img> tag. However, when the <img> tag is the first character in the text field, the image appears on the first line of the text field. 

Italic tagThe <i> tag displays the tagged text in italics. An italic typeface must be available for the font used.
List item tagThe <li> tag places a bullet in front of the text that it encloses. Note: Because ORIGAM dos not recognize ordered and unordered list tags (<ol> and <ul>, it does not modify how your list is rendered. All lists are unordered and all list items use bullets.
Paragraph tagThe <p> tag creates a new paragraph. The text field must be set to be a multiline text field to use this tag. The <p> tag supports the following attributes:
  • align: Specifies alignment of text within the paragraph; valid values are leftrightjustify, and center.
Text format tag

The <textformat> tag lets you use a subset of paragraph formatting properties within text fields, including line leading, indentation, margins, and tab stops. You can combine <textformat> tags with the built-in HTML tags. 

The <textformat> tag has the following attributes: 

  • blockindent: Specifies the block indentation in points.
  • indent: Specifies the indentation from the left margin to the first character in the paragraph. Both positive and negative numbers are acceptable. 
  • leading: Specifies the amount of leading (vertical space) between lines. Both positive and negative numbers are acceptable. 
  • leftmargin: Specifies the left margin of the paragraph, in points. 
  • rightmargin: Specifies the right margin of the paragraph, in points.
  • tabstops: Specifies custom tab stops as an array of non-negative integers.
Underline tagThe <u> tag underlines the tagged text.

ORIGAM supports the following HTML entities:

&lt; < (less than)
&gt; > (greater than)
&amp; & (ampersand)
&quot; " (double quotes)
&apos; ' (apostrophe, single quote)

Links To Menu

You can create a link to execute your ORIGAM application menu items more easily. To do this you haver to make use of lookups which have existing menu bindings already. All you need to know is a lookup id and the value. The system will automatically launch the correct menu item when user clicks on the link.

Syntax

In reality you would craft the following part of your transformation:

Example
  • No labels