---
title: "AppUtils"
slug: "app-utils"
updated: 2026-03-20T14:12:35Z
published: 2026-03-20T14:12:35Z
canonical: "learn.servitly.com/app-utils"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AppUtils

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.

```javascript
// 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. |
| --- | --- |
| *getContextPeriod()* | Returns the object describing the period (`startTimestamp`, `endTimestamp`) related to the navigation context. Available only when entering into an event or work session details page, or when a periodic report is generated. |
| *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. You can use the timezone to format dates and times. For instance: `moment(tsMillis).tz(appUtils.getTimezone()).format(“LLL“)` |
| *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. |
| hasFeature(“featureName”) | Returns true if a plan or add-on with the given `featureName` has been subscribed to for the current context object (thing, customer, partner). |

For more details about the properties available within each object, refer to the [REST API Reference](/apidocs) 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. ```javascript 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](/docs/period-field-v2) 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](/docs/editing-a-widget#embedded-period-picker) 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](/docs/time-series-chart-widget#raw-data-downsampling) widget. |