Parsers

Parser
A JavaScript function which supplies, and optionally formats, data coming from a datasource to a widget

Table of Contents

Parser Types
Create a Parser
Debugging a Parser
Retrieving Current Widget Value
Setting Custom Widget Dimensions
Retrieving Current Datasource Value
Accessing Any Datasource in Portal
Accessing Any Pane in Portal
Updating Current Tab of a Pane
Setting Custom Pane Dimensions

Three parser types

Static
Raw text that is not executed by a Javascript function. Whatever is added to a static parser will show up in that widgets setting
Calculated
A JavaScript function that is not bound to a datasource. Whatever is returned by the function will be used for that widgets setting
Dynamic
A Javascript function that is executed every time its corresponding datasource changes.

Create a parser

Prerequisites

In order to create a parser, you must first have created a widget. Note that if you want to create a dynamic parser you must have already created a datasource


1. Click the wrench icon for the widget you’d like to create a parser for Edit widget
2. Change the content type to dynamic Edit widget 2

3. Open the parser window by clicking the “Edit Parser” button Incoming parser 4. Modify the parser to include some more text Edit incoming parser 5. Click the “Test” button to view your changes Test incoming parser 6. Click “Apply” to save your changes

Debugging a parser

  1. Open the JavaScript console in your browser. This can usually be accomplished by right-clicking on the page and selecting “Inspect”
  2. Click the debug button next to the parser Click debug
  3. Your browser’s JavaScript engine will now halt execution anytime this parser is executed and allow you to step through the code

Retrieving current widget value

Use the this keyword to access the current widget that uses the datasource.
The widget’s current value can be accessed with:

this.widget

Setting custom widget dimensions

Use the this keyword to set custom dimensions for the current widget based on datasource value changes.
The widget’s this.setCustomDimensions(w, h) method accepts two arguments, width and height, both measured in grid units (the number of rows or columns occupied by the widget). One height unit for a widget is 150 pixels, and each additional unit is about 160 pixels. Width units for widgets are equivalent to the width(in pixels) of the container pane divided by 4.2, with the first width unit being that amount by 10. Panes’ width units are determined by dimensions of the device’s display. See Setting Custom Pane Dimensions for information on determining pane width.

For example, in a pane with a width of 567 pixels,

this.setCustomDimensions(3, 3)

a width unit would be equal to 135px(567 / 4.2), with the first width unit equal to 125px(135 - 10), and each height unit would be 160px, with the first being 150 px. This would render a widget with size 395px(125 + (135 * 2)) x 470px(150 + (160 * 2)).

Retrieving current datasource value

Use the this keyword to access the current datasource.
The current widget’s datasource value can be accessed with:

this.datasource

Accessing any datasource in portal

Use the datasources variable to access any datasource in the portal by name.
That datasource’s latest data can be accessed with:

datasources[‘datasourceName’].latestData()

Accessing any pane in portal

Use the panes variable to access any pane in the portal by custom pane ID:

panes[‘customPaneId’]

Updating current tab of a pane

Use the updateCurrentTab(#) method to update the tab displayed within any pane accessed by the panes variable and custom pane ID.
The method’s argument is the pane number to be displayed:

panes[‘customPaneId’].updateCurrentTab(2)

Setting custom pane dimensions

Use the setCustomDimensions(w, h) method to set custom dimensions for any pane accessed using the panes variable and custom pane ID.
The method accepts two arguments, width and height, both measured in grid units (the number of rows or columns occupied by the widget) One height unit for pane is 150 pixels, and each additional height unit is about 160 pixels. Width units for panes depends on the width of the portal on the current device. For displays with a width greater than 1200 pixels, a width unit is equal to display width / 12.2, with the first width unit equal to that amount minus 10. For displays with a width greater than 996 pixels, a width unit is equal to display width / 10.2, with the first width unit equal to that amount minus 10. For devices with a display greater than 768, a width unit is equal to the display width / 6.1, with the first width unit equal to that amount minus 10. For displays greater than 480 pixels, a width unit is equal to the display width / 4.2, with the first width unit equal to that amount minus 10. For smaller displays, a width unit is equal to the display width / 3.4, with the first width unit equal to that amount minus 10.

displayWidth heightUnit firstHeightUnit widthUnit firstWidthUnit
>1200px 160 150 displayWidth / 12.2 widthUnit - 10
>996px 160 150 displayWidth / 10.2 widthUnit - 10
>768 160 150 displayWidth / 6.1 widthUnit - 10
>480 160 150 displayWidth / 4.2 widthUnit - 10
<480 160 150 displayWidth / 3.4 widthUnit - 10

For example, on a 1200px display,

panes.[‘customPaneID’].setCustomDimensions(6, 3)

a width unit would be 118px(1200 / 10.2) with the first being 108px(118 - 10) and a height unit would 160px with the first being 150px. This would render a pane of 698px(108 + (118 * 5)) x 470px(150 + (160 * 2)).