AppUtils

  • 3 minute(s) read
Prev Next

To retrieve information from the navigation context or interact with the navigated page, you can leverage the AppUtils, which is available in the JavaScript context under the appUtils variable.
It provides methods to access the navigation context elements and interact with specific page parts.

// access the thing object within a thing context.
appUtils.getThing()

// access the loggd-in user object.
appUtils.getUser();

Context Methods

getAlert()

Returns the object describing the current context alert.
Available only when entering into an alert details page.

getCustomer()

Returns the object describing the current context customer.
Available only when entering into a customer, location, or thing details page.

getCustomerServiceLevel()

Returns the object describing the service level associated with the current customer.

getCustomerTags()

Gets the list of tag definitions associated with the current context customer.

getEvent()

Returns the object describing the current context event.
Available only when entering into an event details page.

getLocale()

Returns the user’s current locale.

getLocation()

Returns the object describing the current context location.
Available only when entering into a location or thing details page.

getLocationTags()

Gets the list of tag definitions associated with the current context location.

getOrganizationTags()

Gets the list of tag definitions associated with the current context organization.

getPartner()

Gets the partner associated with the context thing or customer.

getPartnerTags()

Gets the list of tag definitions associated with the current context partner.

getServiceLevel()

Returns the object describing the service level associated with the current context thing.

getTags()

Gets the tag names associated with the current context thing.

getTimezone()

Gets the timezone for the current navigation context, else the user’s preferred one.

getTenant()

Gets the parent tenant object.

getThing()

Returns the object describing the current context thing.
Available only when entering into a thing's details pages.

getWorkSession()

Returns the object describing the current context work-session.
Available only when entering into a work-session details page.

getUser()

Returns the object describing the logged-in user.

For more details about the properties available within each object, refer to the REST API Reference page.

Navigation Support Methods

isMobile()

Returns true in the case of mobile App navigation.

isTablet()

Returns true in the case of mobile App navigation from a tablet.

navigateTo(path)

Change the current navigated page according to the given path.


For instance: appUtils.navigateTo("dashboard/actions")

localize(text)

Localizes the given text.

If no translations are available, the text is printed as is.

Widget Support Methods

createFilter(filter)

Creates a new filter instance for the given filter.

The result object is a filter instance you can apply to values by calling the transform method.

let filter = appUtils.createFilter(“millisToHours“);
let hours = filter.transform(452657);

You can also pass a filter chain with parameters:
millisToHours|filterAbc{'opt1': true, 'opt2': false}

createPeriodPicker(container, options, context)

Creates a Period Piker and attaches it to the given container element.


The options parameter is an object with these properties:

  • preserveSelection: if true, the selected period is also preserved on page refresh.

  • defaultPeriodValue: the PERIOD_CODE value to preselect the picker when entering the page.

  • periods: the array of enabled PERIOD_CODES.

  • maxDaysBack: the maximum number of days the user can go in the past with the selection.

  • futureDatesSelectable: if true, avoid selecting date/times in the future.

  • onChange: the callback function invoked when the period changes.
    The callback receives the selected Period object, which includes:

    • start: the period starting timestamp.

    • end: the period end timestamp.

    • label: the selected PERIOD_CODE.

PERIOD_CODES: TODAY, YESTERDAY, LAST_1_HOUR, LAST_6_HOURS, LAST_12_HOURS, LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, THIS_MONTH, LAST_MONTH, LAST_6_MONTHS, LAST_12_MONTHS, THIS_WEEK, LAST_WEEK, LAST_FULL_7_DAYS, LAST_FULL_30_DAYS, LAST_FULL_12_MONTHS, THIS_YEAR, LAST_YEAR, CUSTOM.

This method returns the created PeriodPicker object with these methods:

  • getCurrentPeriod(): gets the current selected period.

  • setCurrentPeriod(period): preselect the period by passing the start and end timestamps.
    {"start": 1741625082000, "end": 1741797882000}

You can access this method directly from the AbstractWidget class.

createSelectionField(container, options, context)

Creates a Selection Field and attaches it to the given container element.


The options parameter is an object with these properties:

  • label: the field label.

  • description: the description displayed as a field hint.

  • placeholder: the text to be shown inside the selection field when no value has been selected.

  • defaultValue: the preselected value or array of values in case of multiple selection.

  • values: the array of label and value objects.
    [{ "label": "Value 1", "value": "AAA" }, { "label": "Value 2", "value": "BBB" }]

  • multiple: if true, allows selection of multiple values.

  • mandatory: if true, at least one value must be selected.

  • clearable: if true, in case of single selection, the empty selection value is present.

  • onChange: the callback function invoked when the selection changes.
    The callback receives the selected value (single) or the array of selected values (multiple).

This method returns the created SelectionField object with these methods:

  • setSelection(value): sets the selected value or array of values in case of multiple selection.

  • setSelectableValues(values): updates the array of label and value objects.

  • getSelectedValue(): get the selected value (single) or the array of selected values (multiple).

downsampleData(data, maxCount, timestampFieldName, valueFieldName)

Downsamples the given array of data (timestamp and value) in order to reduce it to a maxCount  items while preserving the trend shape. For more details, refer to the Time Series widget.