Skip to main content

IQNOX Widgets

License Info

History of Package

The IQNOX team has logged thousands of hours in ThingWorx and have built many mashups for clients. Over time the IQNOX team started exploring creating custom themable widgets to help with current project obstacles. Once prototypes were built, the IQNOX team saw an immediate impact to their workflow. Configuring each widget was simplified, overall widget load time was reduced, and all styling changes were now visible in real-time.

Reasons for Widget Creation

  • Reduction of load times
  • Workflow simplification
  • Introduction of helpful design features

Glossary of Terms

Widget

  • Data visualization tools used for constructing mashups in ThingWorx

Configurator

  • The pop-up tool found in the mashup builder where widget templates are configured, managed, and applied to any selected IQNOX widget.

Template

  • A set of visual and behavior settings, defined through the Configurator, that affect a widget.
  • Can be saved and can be reused in other widget instances

Template Store

  • The TemplateStore object is where any templates you create using the IQNOX configurator will be stored. Having multiple TemplateStores can be helpful if you have multiple projects with differing styles or if you have a single project that needs to dynamically change styles at runtime.

How to Install Package

Import the Iqnox-widgets-min.zip into ThingWorx using the import/export extension feature in ThingWorx. This will install all of the IQNOX widgets.

Image Tooltip

Image Tooltip

You can double check that the Widgets have been imported by going to the Manage menu in ThingWorx and selecting Installed Extensions. All of the widgets should be listed if they imported correctly.

Image Tooltip

Initial Setup

In order to use IQNOX widgets in a mashup you will need to set the TemplateStore property on the mashup itself. In the Explorer tab, select the mashup and search for the TemplateStore property. If you don't already have a TemplateStore you can easily create a new one by creating a new Thing and using the IQNOX_Widget_Template_Store_TT Thing Template or you can duplicate an existing TemplateStore.

Image Tooltip

All IQNOX widget styles are stored in templates. All these templates are stored in a TemplateStore thing. You can have multiple TemplateStore things for a single application, and you can change between them at runtime by binding the TemplateStore property on the mashup/master. This means that you can change all the application styles based on user preferences or actions. For example, creating a Light and Dark mode for your app.

General Features

Widget Configurator

Every IQNOX widget comes with a style configurator. Selecting an IQNOX Widget will add a button at the top of the widget properties panel.

Image Tooltip

When clicking the configurator button you will be prompted with a pop-up on top of the mashup builder. The configurator has several sections.

Configurator Sections

  1. Template Management: Here you can create, duplicate, delete, or change the current template that is being used.
  2. Live Preview: This area shows a real time update of what the widget looks like as you change the controls in the configuration tab.
  3. Template Configuration Tab: This tab holds all of the controls, broken into collapsible subsections, that can be used to change different style properties your widget.
  4. Custom CSS Tab: This tab is where custom CSS code for a specific template can be added. Note: This custom CSS code will only take effect if there is an instance of a widget with that specific template somewhere on the current mashup.
  5. Control Panel: Some IQNOX widgets have controls to toggle certain widget states (ex: disabled state on a button) to help preview some of your template changes. Each widget will have different set of controls available.
  6. Save and Cancel Changes: Whenever you are finished editing a template you can choose to save or cancel your changes.

Image Tooltip

Template Property

The template property of every IQNOX widget can be changed from the properties panel of the mashup builder or from the configurator in the Template Management section using the provided dropdown.

Image Tooltip

Image Tooltip

The template can also be changed at runtime using the Template binding. Using bindings you can dynamically drive how a widget looks based on other conditions in your application.

Bindings

Every IQNOX widget comes with a set of input and/or output bindings. All of the common bindings that you would find in a standard ThingWorx widget are available on the IQNOX widgets, however additional bindings have been added to improve the mashup design process.

Image Tooltip

Widgets

Button Widget

A lightweight re-implementation of the classic ThingWorx Button widget with improved performance, additional bindings and styling options.

Usage

Can be used as a drop-in replacement for the classic ThingWorx Button widget. It has the same properties.

Properties
PropertyTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space
TemplateLIST<Template1This will be the template used for the widget styling.
LabelSTRING(localized)<Text to be used for the button
DisabledBOOLEAN<falseDisables the button so it can't be clicked
CancelConfirmationButtonSTRINGbutton2Allows the user to cancel the confirmation either for first or second button
DefaultConfirmationButtonSTRINGbutton1Sets the confirmation on the first or the second button.
ConfirmationButton1LabelSTRING(localized)YesMessage displayed on the first button when the ConfirmationRequired boolean property is checked.
ConfirmationButton2LabelSTRING(localized)NoMessage displayed on the second button when the ConfirmationRequired boolean property is checked.
ConfirmationPromptSTRING(localized)Do Action?Message prompted when the ConfirmationRequired boolean property is checked.
ConfirmationTitleSTRING(localized)Confirm Action?Title of the Confirmation Window that gets triggered when selecting ConfirmationRequired button.
ConfirmationRequiredBOOLEANfalseEnables the button to have a confirmation popup before executing the Click event
TooltipSTRING(localized)<Optional tooltip used to describe what the widget does
TabSequenceINTEGER0Specifies the tab order of an element (when the tab button is used for navigating)
ShowLoadingBOOLEANfalseEnable to show a visual indicator that an action was triggered by this button and show when it finished
IsLoadingBOOLEAN>falseTrue if the button is currently in the loading state.
LoadingTextSTRING(localized)<Loading...Text shown on the button from when it is clicked, until the ActionDone is triggered
SuccessTextSTRING(localized)<Success!Text to show while button is in the "success" state.
FailedTextSTRING(localized)<Failed!Text to be displayed while button is in the "failed" state.
DoneTimeoutINTEGER2000Time in milliseconds from when the ActionDone was triggered and button returning to its default state
AutomaticServiceLoadingIndicatorBOOLEANfalseAutomatically update the button loading state based on the status of the service it's bound to.
IconURISTRING<URI describing the icon. Either a HTTP link or a reference to an icon in an icon font can be used.
SuccessIconURISTRING<material-outlined:check_circleSuccess state icon URI.
FailedIconURISTRING<material-outlined:errorFailed state icon URI.
Services
PropertyTypeBindingDescription
ActionSucceededSERVICE<Used to transition the button from the "loading" to the "Succeeded" state.
ActionFailedSERVICE<Used to transition the button from the "loading" to the "Failed" state.
ActionStartedSERVICE<Used to transition the button into the "loading" state.
PerformClickSERVICE<Used to trigger the button "Clicked" event externally, can be used to replicate the button behavior. This sets the button into "loading" state, and if "AutomaticServiceLoadingIndicator" is false, it will remain indefinitely until ActionSucceeded or ActionFailed is triggered.
Events
PropertyTypeBindingDescription
ClickedEVENT>Triggers an event when the button is clicked.
ActionDidSucceedEVENT>Triggers an event when action succeeds.
ActionDidFailEVENT>Triggers an event when action fails.

A lightweight but very capable dropdown/combox widget for ThingWorx with multiselect capabilities that is easy to use. Can also be uses as an autocomplete widget that does search via a ThingWorx service

Usage

Can be used as a drop-in replacement for the classic ThingWorx dropdown widget. It can also act like a combo box with mulitselect capabilities. Can also function as an autocomplete widget that can do searches via a ThingWorx service. To use the widget as an autocomplete, use the searchData, searchText properties, and the userSearched event.

Properties
PropertyTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space.
TemplateLIST<Template1The widget template to use for this widget.
LabelSTRING(localized)<The text that is displayed above the input/textarea.
SecondaryLabelSTRING(localized)<Text that is displayed after label usually to mark a mandatory field.
ShowSecondaryLabelBOOLEAN<TRUEFlag property which decides whether or not to show the Secondary Label
dataINFOTABLE<Data that is bound to the dropdown widget
searchDataINFOTABLE<Allows usage of the widget as an autocomplete that does remote searches. This should be bound to the service that returns the search results. Using the same service for both the data and searchData is not supported. If the same service is used, is has to be added twice.
searchTextSTRING>No ResultsSearch string that is sent to the service that returns the search data. This is only updated if the searchData has a binding.
autoSelectFirstRowBOOLEANFALSEAutomatically select the first row of the dropdown when it is loaded in the mashup
selectedTextSTRING<>Get or set the value of the selected item
selectedItemsINFOTABLE<>Get or set the selected items via an infotable
tabSequenceINTEGER0Specifies the tab order of an element (when the "tab" button is used for navigating)
displayFieldFormatSTRING(localized)<Format: Optional instructions on how to format the textual data. Number formatting (eg. 0.00), Date formatting and expressions (eg. [[0.0]] km)
displayFieldFIELDNAMEThe infotable field which represents the data value
valueFieldFIELDNAMEField to use for SelectedText
sectionFieldFIELDNAMESplit the options into sections. This marks the field in the infotable to be used as the section
valueHtmlFieldFIELDNAMEOptional: The column containing the HTML code that is used to display the row. The HTML is sanitized before use.
disabledFieldFIELDNAMEOptional: The column containing a boolean indicating that the row is disabled and cannot be selected
cssClassesFieldFIELDNAMEOptional: The column containing the name of the classes that are applied to this row
placeholderSTRING(localized)<Select ValueText to display if there is no selection
multiselectBOOLEAN<FALSEAllow multiple items to be selected, also changing the way the select dropdown looks, splitting the selected items in chips
maxValuesShownNUMBER<200Change from chip multiselect to only show the number of selected items
maxValuesMessageSTRING(localized)<FALSEMessage displayed when more values than the maxValuesShown property are selected. Customize your message with the "{number}" token.
limitMultipleSelectINTEGER<0When using multi select you can set a limit on the amount of selections you can have
limitMultipleSelectMinINTEGER<0When using multi select you can set the minimum number of items you can have
selectByGroupBOOLEANFALSEUsed to enable the selection of all options under a specific group by clicking that option group's label.
allowDeselectBOOLEAN<FALSEThis will allow you to deselect a value on a single select dropdown. Make sure to set the placeholder property
showSearchBOOLEANTRUEWill display a search field in the dropdown
searchTextNoResultsSTRING(localized)No ResultsText to be displayed if there are no results based on the search
searchingTextSTRING(localized)Searching...Text to be displayed while loading new autocomplete results using an external service
searchPlaceholderSTRING(localized)SearchsearchPlaceholder is a string value that will set the value of the input search placeholder text.
searchHighlightBOOLEANFALSEsearchHighlight is a boolean value that will highlight search results.
closeOnSelectBOOLEANFALSEIf a row in the dropdown is selected, the dropdown will close
allowAddCustomBOOLEANFALSEAllow to dynamically add options to the select. The list of selected options can be obtained via the selectedText or selectedItems property
disabledBOOLEAN<FALSEDisables or enables the dropdown so it can't be clicked
ShowDataLoadingBOOLEANTRUEShows a spinner icon when data is being loaded
anyRowsSelectedBOOLEAN>FALSEAre there any rows selected in the list
noRowsSelectedBOOLEAN>FALSEProperty that give a true/false if a row is selected or not
Services
PropertyTypeBindingDescription
openSERVICE<Opens the dropdown
closeSERVICE<Closes the dropdown
clearSelectedRowsSERVICE<Unselect all items
Events
PropertyTypeBindingDescription
userSearchedEVENT>Triggers when the user begins searching and the widget has a searchData binding
selectionClearedEVENT>Event that triggers when dropdown is deselected

Checkbox Widget

The IQNOX Checkbox Widget is a simple widget that shows a checkbox that can be ticked by a user.

Usage

Properties
PropertyTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space
TemplateLIST<Template1The widget template to use for this widget
StateBOOLEAN<>FALSEWhen selected, the checkbox will show as selected and output TRUE.
DisabledBOOLEAN<FALSEDisables the checkbox so it can't be clicked to change its state
LabelSTRING(localized)<LabelThe text that is displayed above the input/textarea
TabSequenceINTEGER0Specifies the tab order of an element (when the "tab" button is used for navigating)
TooltipSTRING(localized)<Optional tooltip used to display additional information. Will be set as a title="" in the widget and styling based on browser used.
Services
PropertyTypeBindingDescription
ResetValueSERVICE<Resets the State to its default value
Events
PropertyTypeBindingDescription
ValueChangedEVENT>Triggers an event when the state is changed

Button Group Widget

The IQNOX Button Group Widget allows for displaying multiple options that a user can choose from

Usage

Properties
PropertiesTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space
TemplateLIST<Template 1The widget template to use for this widget
NumberOfButtonsINTEGER3How many buttons to display.
MultiSelectBOOLEANFALSEAllows the user to select multiple buttons at a time. Buttons can be deselected by clicking again on them.
DefaultButtonSelectedSTRING0Auto select the button specified on runtime. 0 selects none of them. Separate the options by a comma if you want multiple buttons selected.(Ex: 1,2,3)
SelectedButtonNameSTRING<>Name of selected button
SelectedButtonValueSTRING<>Value of selected button
SelectedButtonValuesINFOTABLE<>Outputs an infotable of the selected values. This is helpful when MultipleSelect to get the selected buttons easier. The infotable will use GenericStringList as datashape.
The following properties are repeated for each button in NumberOfButtons
PropertiesTypeBindingDefaultDescription
Button1NameSTRING[localized]<Button1Label displayed on the button
Button1ValueSTRING<Value used to identify the button
Button1IconURISTRING<URI used to generate the button's icon
Button1VisibleBOOLEAN<TRUEToggles the visibility of the button
Button1DisabledBOOLEAN<FALSEShows the button as disabled
Services
PropertyTypeBindingDescription
SelectDefaultButtonSERVICE<A bindable service to reselect the default button
Events
PropertyTypeBindingDescription
SelectedButtonChangedEVENT>Triggers an event when the selected button changed

Label Widget

A lightweight re-implementation of the classic ThingWorx Label widget.

Usage

Properties
PropertyTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space
TemplateLIST<Template 1This will be the template used for the widget styling
TextANY(localized)<LabelText to be used
FormatSTRING(localized)<see Format instructions below
TooltipSTRING(localized)<Optional tooltip used to display additional information. Will be set as a title="" in the widget and styling based on browser used.
EllipsisBOOLEANFALSEIf ellipsis is TRUE the text doesn't fit within the label, it will truncate with ... at the end of the line and the text will be forced on one line and it will ellipsis at the end of the available space
IconURISTRING<FALSEURI describing the icon that's going to be used. Either a HTTP link or a reference to an icon in an icon font can be used.
Format instructions
  1. Number formatting, expressed in the "standard twx way":

    • 0 - (123457) show only digits, no precision
    • 0.00 - (123456.79) show only digits, 2 precision
    • 0.0000 - (123456.7890) show only digits, 4 precision
    • 0,000 - (123,457) show comma and digits, no precision
    • 0,000.00 - (123,456.79) show comma and digits, 2 precision
    • 0,0.00 - (123,456.79) shortcut method, show comma and digits, 2 precision 0.00
  2. DateTime formatting, expressed in the "standard twx way":

  3. Complex formatting: Be able to specify a more complex formatting template, for example, to use to display units. This works by specifying a format where the intended value is enclosed in [[ and ]]. Inside the brackets, you can either specify value if you don't want the value to be changed, or a format defined above if it needs to be formatted.

    • Examples:
      • prefix [[value]] suffix: Creates the displayed string by concatenating the string prefix with the bound value of the widget, and the value suffix. This can be used when the bound value is a plain string. Will result in prefix INPUT_VALUE suffix.
      • [[0.0]]% (23.4%): appends a % to a 0.0 formatting
      • $[[0]] ($23): prepends a $ to a 0 formatting
      • weight: [[0,0.00]] Kg will result in weight: 123,456.79 Kg
      • time: [[relative:]] will result in time: 5 hours ago

Input Widget

The IQNOX Input widget is a heavily optimized replacement for the Text Box, Numeric Entry and Text Area widgets.

Usage

Properties
PropertyTypeBindingDefault value
LabelSTRING(localized)<The text that is displayed above the input/textarea.
SecondaryLabelSTRING(localized)<Type of the input that will be passed to the widget.
InputType(2)SELECTTextOptions: Text, Text Area, Number, Email, Password, Search, Telephone Password.
Valuedepending on InputType<>The value that will be entered in the widget.
PlaceholderSTRING(localized)<Specifies a hint that describes the expected value of an input field.
ReadOnlyBOOLEAN<FALSEEnables/Disables the textbox, making it read only.
InvalidBOOLEAN<>FALSEShows invalid style with a warning icon at the end of the input.
InvalidTooltipMessageSTRING(localized)<Shows this message when hovering over the input while it's valid. Use this to describe why the input is invalid.
TabSequenceINTEGER0Specifies the tab order of an element (when the "tab" button is used for navigating).
TriggerValueChangedImmediatelyBOOLEANTRUEIf enabled, the ValueChanged event will be triggered after the last key was pressed based on the DebounceTime.
DebounceTime(1)INTEGER300Time in milliseconds from last key pressed to triggering the ValueChanged event.
CustomClassSTRING<>Enables you to define an HTML class to the top div of the widget. Multiple classes can be separated by a space.
Pattern(3)STRINGSpecifies a regular expression that the value should match. If the value does not match, the input will become invalid. Specify a tooltip message to describe why the input is invalid.
ShowSecondaryLabelBOOLEAN<Flag property which decides whether or not to show the Secondary Label.
TemplateLISTTemplate 1The widget template to use for this widget
TooltipMessageSTRING(localized)Shows this message when hovering over the input. The InvalidTooltipMessage property is used when the input is invalid.
MinValue(4)INTEGER<Minimum value of the number that this input can contain
MaxValue(4)INTEGER<Maximum value of the number that this input can contain
Step(4)INTEGER<Granularity of the numeric value entered in the input
Services
PropertyTypeBindingDescription
ResetValueSERVICE<Resets the Value of the widget to default
BlurSERVICE<Removes the focus from the element
FocusSERVICE<Forces the focus on the widget, allowing it to receive keyboard inputs
Events
PropertyTypeBindingDescription
ValueChangedEVENT>Triggers an event when the value of the widget is changed
EnterKeyPressedEVENT>Triggered when the user presses the enter key

(1)DebounceTime is only available if TriggerValueChanged is TRUE, else ValueChanged is trigger on defocus/enter key pressed.

(2)InputType Options :

  • Text
  • Text Area - doesn't have Type SELECT and is always Value STRING
  • Number
  • Password
  • Telephone
  • Email
  • Search

(3)Pattern is available only if the user selects from the InputType the following values: Password, Search, Email, Text, Telephone.

(4)MinValue, MaxValue properties are available only when the user selects the Number property from the InputType.


Toggle Widget

The IQNOX Toggle Widget is a simple widget, similar to the checkbox in that it can be set to two different states, but toggles are mostly used instead of checkboxes on touchscreen platforms.

Usage

Properties
PropertyTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space
TemplateLIST<Template 1The widget template to use for this widget
StateBOOLEAN<>FALSEEnables you to define the state of the Toggle widget
TabSequenceINTEGER0Specifies the tab order of an element (when the "tab" button is used for navigating).
DisabledBOOLEAN<FALSEDisables the toggle on runtime
Services
PropertyTypeBindingDescription
ResetValueSERVICE<Resets the Value of the widget to default
Events
PropertyTypeBindingDescription
StateChangedEVENT>Triggers an event when the value of the widget is changed

Tabs Widget

The IQNOX Tabs Widget is a replacement for the ThingWorx tabs widget with a massively improved user experience, simplifying bindings, and general use.

Usage

Properties
PropertiesTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space
TemplateLIST<Template 1The widget template to use for this widget
NumberOfTabsINTEGER3How many Tabs to display
DefaultSelectedTabINTEGER1Auto select the specified tab on runtime. 0 selects none of them.
SelectedTabNameSTRING(localized)<>Name of selected tab
SelectedTabValueSTRING<>Value of selected tab
HideTabsBOOLEANFALSEHides tabs and only shows content
Services
PropertyTypeBindingDescription
SelectDefaultTabSERVICE<A bindable service to reselect the default tab configured for this widget.
ResetInputsToDefaultValueSERVICE<A bindable service that resets all the widgets in the tabs content to their default values.
Events
PropertyTypeBindingDescription
SelectedTabChangedEVENT>Triggers an event when the selected tab changed

Content tab panel settings

Properties
PropertiesTypeBindingDefaultDescription
TabNameSTRING(localized)<Tab1NameLabel displayed on the tab
TabValueSTRING<Tab1ValueValue used to identify the tab
TabIconURISTRING<Shows the icon before the tab label
TabBubbleSTRING<Notification bubble displayed to the right of the tab name
TabVisibleBOOLEAN<TRUEToggles the visibility of the tab
TabDisabledBOOLEAN<FALSEShows the tab as disabled
TabBubbleSTRING<FALSEShows a notification bubble after tab
Services
PropertyTypeBindingDescription
SelectTabSERVICE<A bindable service to select that tab
Events
PropertyTypeBindingDescription
OnSelectedEVENT>Triggers an event when that specific tab was selected
OnDeselectedEVENT>Triggers an event when the selection moves to another tab

Status Message Widget

A simple widget used to dynamical display status messages.

Usage

Properties
PropertiesTypeBindingDefaultDescription
Custom ClassSTRING(localized)<>Enables you to define an html class to the top div of the [widget)(#widget). Multiple classes can be entered, separated by space
TemplateLIST<Template 1The widget template to use for this widget
IconURISTRING<URI describing the icon. Either a HTTP link or a reference to an icon in an icon font can be used.
Position(1)STRING<>Top-RightPositioning of the notification popup
TitleSTRING(localized)<An optional title to display on top of the message
MessageSTRING(localized)<Status message to be displayed
DelayNUMBER3000Time in milliseconds for the message to be shown
AutoCloseBOOLEANTRUESet if the message should hide automatically after the delay
HideProgressBarBOOLEANFALSEHides the descending progress bar that shows when the message will close
PauseDelayOnHoverBOOLEANTRUEPauses the delay countdown when hovering the mouse over the message to allow the user more time to read it
NewestMessageOnTopBOOLEANFALSEIf Enabled, the newest message will show on top of the already showing message
CloseOnClickBOOLEANFALSEThe whole message becomes clickable for closing the message
PauseDelayOnWindowDefocusBOOLEANFALSEIf Enabled, all status messages shown will have their delay time paused when window is not in focus
DataINFOTABLE<An optional data set to associate to the notification. This data will be available to use when the notification the notification is clicked
EventDataINFOTABLE>The data associated to the notification that was clicked
UseForSystemNotificationsBOOLEANFALSEUse this widget to generate Thingworx notifications instead of the standard status message
Services
PropertyTypeBindingDescription
ShowSERVICE<Shows the message
Events
PropertyTypeBindingDescription
NotificationClickedEVENT>Triggered when a notification is clicked

(1) Position Options :

  • Top-right
  • Top-center
  • Top-left
  • Bottom-right
  • Bottom-center
  • Bottom-left

Line Chart Widget

A line chart widget based on the g2plot library.

Usage

Allows displaying of timeseries data with one or more series (lines) on the y axis. The value in XAxisField must be a date (represented as either a string or a timestamp). The XAxisFormat can be used to format the way the date is displayed on the chart.

Properties
PropertyTypeBindingDefaultDescription
TemplateSTRING<Template1This will be the template used for the widget styling.
HoverGroupSTRINGCan be set to any string. All charts with the same value for HoverGroup will display their tooltips whenever the mouse pointer moves over any of the charts in the group.
RendererSTRINGcanvasSet the render way to canvas or svg
DataINFOTABLE<Chart data source.
XAxisFieldFIELDNAMEName of the column in the Data infotable containing the values of the X axis.
AnnotationsINFOTABLE<Annotations data source.
AnnotationTimestampFieldFIELDNAMEName of the column in the Annotations infotable containing the annotation's timestamp value, used for determining where to place the annotation on the X axis.
AnnotationYFieldFIELDNAMEName of the column in the Annotations infotable containing the annotation's Y value, used for determining where to place the annotation on the Y axis.
AnnotationIconFieldFIELDNAMEName of the column in the Annotations infotable containing the IQNOX icon URI, used for determining how the annotation is rendered.
AnnotationDescriptionFieldFIELDNAMEName of the column in the Annotations infotable containing annotation's description, used for displaying additional information when hovering on the icon. If it is not provided, the annotation will not show any description on hover.
AnnotationColorFieldFIELDNAMEName of the column in the Annotations infotable containing annotation's color, used for controlling which color the icon font is rendered with. If it is not provided for an annotation, the chart will fall back to displaying it in the color selected in the template configuration.
HighResolutionDataINFOTABLE<A subset of the data that represents a higher resolution data that should be displayed at the current zoom level
YAxisFieldsSTRING<A comma separated string representing the name of the data fields corresponding to the graph in the y direction, usually the fields corresponding to the vertical coordinate axis.
LabelsSTRING(localized)<A comma separated string representing the user facing names of the fields in YAxisFields. The items should be in the same order.
XAxisFormatSTRING(localized)Localisable token in order to format the values of the X axis. See Format instructions above.
XAxisType(1)STRINGtimeX axis meta option Type
YAxisFormatSTRING(localized)Localisable token in order to format the values of the Y axis label. (It will not format the values displayed in the tooltip, see YAxisFormats for that)
YAxisFormatsSTRING(localized)<Localisable tokens specified in a CSV format in order to format the values of the Y axis that are displayed on the chart's tooltip.
Interpolation(2)STRING(localized)<This property controls which interpolation is used.
StartDateDATETIME<>The timestamp representing the start date of the chart.
EndDateDATETIME<>The timestamp representing the end date of the chart.
ZoomStartDATETIME<>The timestamp representing the start of the current zoom position.
ZoomEndDATETIME<>The timestamp representing the end of the current zoom position.
ZoomLevelNUMBER>A property that indicates the percent of the dataset is currently visible.
ZoomEventDebounceIntervalNUMBER500Controls how many milliseconds to wait between zoom events before triggering the ZoomLevelDidChange event.
Events
PropertyTypeBindingDescription
ZoomLevelDidChangeEVENT>An event that is triggered when the zoom level or position changes.
Additional explanations

YAxisFields and YAxisFormats
As described above, the YAxisFields is a comma separated string representing the name of the y axis data fields and the YAxisFormats is a comma separated string representing the localization tokens to format the YAxisFields in the order they were introduced (if we have YAxisFields: a, b, c and YAxisFormats: [[f1]], [[f2]], [[f3]], [[f1]] will format field a, [[f2]] will format field b, and [[f3]] will format field c.

(1) XAxisType can have the following values:Cat, TimeCat, Linear, Time, Log, Pow, Quantize, Quantile, Identity

(2) Interpolation can have the following values:

  • Linear - Indicates that the chart is using a linear interpolation, where two adjacent data points are connected via a straight line.
  • StepBefore - Indicates that the chart is using a step-before interpolation, where the value instantly increases from one point to the value of the next point.
  • StepAfter - Indicates that the chart is using a step-after interpolation, where the value instantly increases from one point to the value of the previous point.

HoverGroup
Is a string, and charts that have the same value for this property all get a tool tip at the same time when one of them is hovered. Additionally when one of the charts is zoomed, all other charts are also zoomed.

HighResolutionData, ZoomStart, ZoomEnd, ZoomLevel and ZoomLevelDidChange
This properties are used together to enable developers to load the data set with fewer points initially but then load a higher resolution part of the data when the user zooms. They are generally used as follows:

  • ZoomLevelDidChange is invoked whenever the user zooms on the chart and can be used to trigger the service that retrieves the higher resolution data
  • ZoomLevel is used to obtain the zoom percent on the chart and can be used together with ZoomLevelDidChange and a validator or script widget to control the zoom level for which higher resolution data is displayed. The following example shows a validator that loads higher resolution data when the zoom percent is lower than 0.5 (meaning a zoom of over 200%).
    Validator Example
  • ZoomStart and ZoomEnd represent a start and end timestamp of the data that is displayed at the current zoom level and position. They can be used with a service that returns higher resolution data to determent the interval for which to return the data
  • HighResolutionData is a property on the chart that the data from the higher resolution service should be bound to. Whenever data is provided to this property the chart will replace a slice of the data with the higher resolution data bound. The slice that is replaced depends on the interval returned by that service and will be cached and reused whenever the user zooms back in. The data is used at the current zoom level and higher. When the user zooms out the chart will automatically display the lower resolution data again. The following example shows how binding could be used for this properties.
    Bindings Example

Bar Chart Widget

A Bar chart widget based on the g2plot library.

Usage

Allows displaying of category data with one or more series (bars) on the y axis. The value in XAxisField must be a unique string or number. The XAxisFormat can be used to format the way the category is displayed on the chart.

Properties
PropertyTypeBindingDefaultDescription
TemplateSTRING<Template1This will be the template used for the widget styling.
BarHoverStyle(1)STRINGnormalThis is used to set the way individual bars react on hover or select.
Orientation(2)STRINGVerticalThis will set the orientation of the Bar Chart.
DataGrouping(3)STRING<noneThis will set the way same category values will be grouped.
ReflectXAxisBOOOLEANfalseInvert Bars along X Axis.
ReflectYAxisBOOOLEANfalseInvert Bars along Y Axis.
DataINFOTABLE<Chart data source.
XAxisFieldFIELDNAMEName of the column in the Data infotable containing the values of the X axis.
YAxisFieldsSTRING<A comma separated string representing the name of the data fields corresponding to the graph in the y direction, usually the fields corresponding to the vertical coordinate axis.
XAxisFormatSTRING(localized)Localisable token in order to format the values of the X axis. See Format instructions above.
YAxisFormatSTRING(localized)Localisable token in order to format the values of the Y axis label. (It will not format the values displayed in the tooltip, see YAxisFormats for that)
TooltipFormatsSTRING(localized)<Localisable tokens specified in a CSV format in order to format the values of the Y axis that are displayed on the chart's tooltip.
CategoryLabelsSTRING(localized)<A comma separated string representing the user facing names of the fields in YAxisFields. The items should be in the same order.
XAxisTitleSTRING(localized)<Localizable token for X Axis Title.
YAxisTitleSTRING(localized)<Localizable token for y Axis Title.
Additional explanations

YAxisFields and TooltipFormats
As described above, the YAxisFields is a comma separated string representing the name of the y axis data fields and the TooltipFormats is a comma separated string representing the localization tokens to format the YAxisFields in the order they were introduced (if we have YAxisFields: a, b, c and TooltipFormats: f1, f2, f3, f1 will format field a, f2 will format field b, and [[f3]] will format field c.

(1) BarHoverStyle can have the following values:Inactive, Normal, Bar Outline Hover, Multiselect

(2) Orientation can have the following values:Horizontal, Vertical

(3) DataGrouping can have the following values:None, Grouped, Stacked


Pie Chart Widget

A Pie chart widget based on the g2plot library.

Usage

Allows displaying of category data with Value. The value in LabelField must be a unique string or number. The values can be used to formated in the configurator.

Properties
PropertyTypeBindingDefaultDescription
DataINFOTABLE<Infotable with a column for Label and a column for Value to be displayed on the chart.
LabelFieldFIELDNAME<Name of the column in the Data infotable specifying the label data.
ValueFieldFIELDNAME<Name of the column in the Data infotable specifying the value data.
DonutInnerLabelSTRING(localized)<Name of the inside label of a donut pie chart.
EnableSelectionBOOOLEANfalseAllows the user to select one of the pie/donut parts, which would represent the selected row. The user should also be able to click again to deselect.
Events
PropertyTypeBindingDescription
DoubleClickEVENT>Triggered when the widget is double clicked .
Additional explanations

Icon Widget

A simple widget used to dynamical display Icons.

Usage

Properties
PropertyTypeBindingDefault
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space
TemplateLIST<The widget template to use for this widget
IconURISTRING<URI describing the icon that's going to be used. Either a HTTP link or a reference to an icon in an icon font can be used.
TooltipSTRING(localized)<Optional tooltip used to display additional information. Will be set as a title="" in the widget and styling based on browser used.

Gauge Widget

A simple customiasable gauge widget used to dynamically display data.

Usage

Properties
PropertyTypeBindingDefaultDescription
DurationNUMBER5000Enables you to set the gauge animation time in ms.
TemplateLIST<Template1This will be the template used for the widget styling
ValueNumber<0The gauge indicator value
FormatSTRING(localized)<Format how the value will be displayed on the gauge. See Format instructions below
TitleSTRING(localized)<Title that will be displayed on the gauge.
SectionsSTRING<Allows to split gauge disk in sections. See Sections format instructions below
MinValueNUMBER<0Minimum value of the gauge
MaxValueNUMBER<100Maximum value of the gauge
Sections Format Instructions
The input value must be in CSV format:
  • "10,25,50,75" : The disk will be splitted in 5 sections -> [0-10, 10-25, 25-50, 50-75, 75-100]

Map Widget

A widget based on the LeafletJS library.

Usage

Properties
PropertiesTypeBindingDefaultDescription
Custom ClassSTRING[localized]<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space.
DataINFOTABLE<Infotable with at least one LOCATION column to be displayed on the map.
MarkerLocationFieldFIELDNAMEField from the Data property that contains location information for markers.
MarkerIdFieldFIELDNAMEField from the Data property that can optionally uniquely identify the marker.
MarkerIconFieldFIELDNAMEField from the Data property that contains IQNOX Icon links that will be used for each marker.
MarkerSelectedIconFieldFIELDNAMEField from the Data property that can optionally set the selected marker icon.
MarkerZIndexFieldFIELDNAMEField from the Data property driving the zIndex of a marker.
MarkerTooltipFieldFIELDNAMEField from the Data property containing the HTML of the tooltip, shown when the user hovers over a marker.
MarkerMultiSelectBOOLEANFALSEEnable or disable multiple marker selection.
MarkerPopupMashupMASHUPNAME<Name of the mashup that will be used to display a popup when the user click on a marker.
MarkerPopupWidthNUMBER<400Width of the mashup popup.
MarkerPopupHeightNUMBER<300Height of the mashup popup.
SelectedMarkerIdSTRING<>Currently selected marker ID on the map.
ClusterMarkersBOOLEANTRUECluster nearby markers into a single object that shows the total count of items in the area.
ClusterShowCoverageOnHoverBOOLEANTRUEWhen you mouse over a cluster it shows the bounds of its markers.
ClusterZoomToBoundsOnClickBOOLEANTRUEWhen a cluster is clicked , zoom to its bounds.
ClusterSpiderfyOnMaxZoomBOOLEANTRUEWhen a click a cluster is clicked at the bottom zoom level expand the markers it so all can be seen.
MovementWithAnimationBOOLEANTRUEEnable smooth movement animation for markers.
MarkerDefaultIconSTRING<>material-rounded:location_onDefault icon for marker.
MarkerSelectedDefaultIconSTRING<>material-rounded:location_onDefault icon for selected marker.
EnableRegionsBOOLEANFALSEEnable Regions on map.
RegionDataINFOTABLE<Infotable with Regions to be displayed on the map.
RegionColorFieldFIELDNAMEField from the RegionData property that contains a column for CSS Color.
RegionLocationFieldFIELDNAMEField from the RegionData property that contains an INFOTABLE with a column named location.
RegionToolTipFieldFIELDNAMEField from the RegionData property that contains the Region Tooltip.
RegionSelectionSTRINGNoneRegion selection options(None, Single, Multiple).
ZoomNUMBER<>5Zoom level of the map.
InitialLocationLOCATION<EuropeDefault map center at load.
EnableDroppedPinBOOLEANFALSEEnable add custom marker at click on map.
DroppedPinLocationLOCATION>The last location of the dropped pin.
DroppedPinIconSTRING<>material-rounded:pin_dropDefault icon for dropped pin.
Services
PropertyTypeBindingDescription
AutoZoomSERVICE<AutoZoom the map so all markers can be shown.
ZoomOnSelectedSERVICE<Zoom on the selected marker on the map.
ShowDroppedPinSERVICE<Shows a marker on the map at the location where the last event occurred.
ClearDroppedPinSERVICE<Hides the event marker.
Events
PropertyTypeBindingDescription
BoundsChangedEVENT>Triggers when the bounds of the maps are changed.
SelectedMarkerIdChangedEVENT>Triggers when the SelectedMarkerId property changes.
MarkerWasClickedEVENT>Triggers when a marker is clicked.
MarkerWasDoubleClickedEVENT>Triggers when a marker is double clicked.
MarkerWasRightClickedEVENT>Triggers when a marker is right clicked.
DroppedPinLocationChangedEVENT>Triggers when a dropped pin location is changed.