Skip to main content
Version: 13.x (Current)

Auto Refresh

<bk-auto-refresh></bk-auto-refresh>

auto-refresh

The Auto Refresh component allows refreshing some resources with the selected interval.

It renders a label-like dorpdown button. The label of the button informs on the refresh frequency. The dropdown menu opens upon hovering on the button and allows to select a new refresh interval.

The refreshing happens by emitting a change-query event with an empty payload every interval. A component like the CRUD Client could.

How to configure

For its most basic usage, the Auto Refresh component does not require any configuration.

{
"tag": "bk-auto-refresh"
}

By default, the Auto Refresh enables users to select the refresh interval for data requests, with options of 5, 10, 30, or 60 seconds. The initial refresh interval is initially set to 0, indicating that data refresh is not requested.

It is possible to set the interval options and a default interval using the intervals and initialInterval properties. Both of these properties are interpreted in seconds.

{
"tag": "bk-auto-refresh",
"properties": {
"intervals": [10, 30, 60, 120],
"initialInterval": 10
}
}

Locale

The texts of the Auto Refresh can be customized through the property customLocale, which accepts an object shaped like the following:

type Locale = {
refreshRate: LocalizedText
}

where LocalizedText is either a string or an object mapping language acronyms to strings.

Examples

The following configuration

{
"tag": "bk-auto-refresh",
"properties": {
"intervals": [10, 30, 60, 120],
"initialInterval": 10
}
}

requests data refresh every 10 seconds, and can be set to 10, 30, 60, 120 seconds.

API

Properties & Attributes

propertyattributetypedefaultdescription
intervals-number[][5, 10, 30, 60]a list of intervals in seconds
initialIntervalinitial-intervalnumber0initial interval value

Listens to

eventaction
loading-datasets internal loading state

Emits

eventdescription
change-queryrequires data refresh without modifying current CRUD query by attaching an empty payload