Skip to main content

Timers

info

Timers have moved to the Navigation panel since the recording of the video below.

Timers allow you to invoke behavior repeatedly at a timed interval. When the timer interval expires, the timer fires an event, which you can respond to using the onFire event handler.

Auto-refresh a dashboard with a timer

We can refresh any component's data automatically with a timer. For this example, we'll use a chart.

Start by dragging the Chart component from the Components panel to the empty canvas. Set the Chart Header to Number of Signups, the X axis title to Day of month and the Y axis title to User Signups.

Drag and drop a chart component onto the canvas and define the title and axis properties

To populate the chart from an external source, we can use the Superblocks API builder. In this case, we will use a JavaScript step that generates sample user signup data for us.

  1. Create a new backend API with a JavaScript step
  2. Rename API1 to getSignups
  3. Copy and paste the following code to the JavaScript step
data = [];

for(var i=1; i<10; i++){

const date = i;
const value = Math.floor(Math.random() * 60) + 1;

point = {};
point.date = date;
point.value = value;
data = [point, ...data];
}

return data;

Create a new API to pull data from your data sources and manipulate with JavaScript or Python

In the application user interface, click on the chart to open the properties panel. To connect the results from getSignups API to the chart, replace the example JSON with {{getSignups.response}} in the Chart Data field and Run the API. Finally set Chart Type to Line Chart.

Components can be linked to API output to visualize and report on your data

Turn off the Loading Animation setting for a smooth animation.

Using timers with charts creates realtime dashboards

Next, link the Chart Component to a Timer that updates it at a set interval.

  1. Go the Navigation panel and click the + sign next to Timers
Add a timer from the Navigation panel
  1. Select the timer to configure the Interval (5 seconds) and onFire event hander (run the getSignups API)
Configure timer interval and onFire actions

That's it, your User Signup Dashboard will now automatically update with the latest signups every 5 seconds.

Timer updating chart every 5 seconds

Starting and stopping timers

Starting timers on page load

You can control whether a timer starts on page load by toggling the switch in the timer's properties panel.

Control the execution of API on page load

Starting and stopping from component triggers

You can hook up any component trigger (like a Button component's onClick) to start and stop timers. Just choose the Start/stop Timer option from the triggers menu.

You can also start or stop timers from code inside of a Run JS action. See Programmatic usage (using code to control timers)

Timers can be controlled by triggers from event handlers on components

Starting and stopping timers from the UI

You can start or stop a timer from the UI by going to the State Inspector panel and clicking the start/stop button next to the timer, or by selecting the timer and using the button in the properties panel.

Stop a timer from the State Inspector
Stop a timer from the properties panel

Programmatic usage (using code to control timers)

You can start or stop a timer using code in Run JS (in browser) actions by referencing its name and calling start or stop.

Timer1.start();
Timer1.stop();

You can also "toggle" a timer without needing to know if it's started or stopped by calling toggle.

Timer1.toggle();

Properties

Timer properties can be accessed from other frontend components and backend APIs by adding the name of the timer, and dot referencing the property. For a timer named Timer1:

PropertyDescription
Timer1.isActiveAccess whether the timer is currently running

Troubleshooting

How do I not show the loading animation when my API is running?

Turn off the Loading Animation setting in the properties panel of your component to update your the component without showing a loading animation.

Using timers with charts creates realtime dashboards