Handling Data Updates

This is an example of a simple app that leverages the domo.onDataUpdated function to manage how the app responds to updates made to the underlying DataSet. Without this function, the app would be reloaded each time that underlying data was updated, which could lead to a bad user experience if the app refreshed in the middle of a user interaction. This is particularly painful with SPA apps where the user may have navigated to a sub route in the app and then get kicked back to the main route because the data refreshed.

Getting Started

Sample Data

Copy the table below and paste it into a new Domo Webform, then note the DataSet ID.

name	email	total
Alice Johnson	alice.johnson@example.com	8240
Bob Martinez	bob.martinez@example.com	5130
Carol White	carol.white@example.com	9870
David Kim	david.kim@example.com	4560
Eva Rossi	eva.rossi@example.com	7810
Frank Nguyen	frank.nguyen@example.com	3290
Grace Chen	grace.chen@example.com	6450
Henry Okafor	henry.okafor@example.com	11200

domo init

Run the domo init command.

design name: live-data-demo
select a starter: hello world
would you like to connect to any datasets?: Yes
dataset id: the Id of the DataSet you just created
dataset alias: sales
add another dataset? No

index.html

Replace the index.html content with the following:

<html>
  <head>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <h1>Handling Data</h1>

    <h2>Total Sales</h2>
    <div>$ <span id="total">0</span></div>

    <h4># Data Fetches</h4>
    <div id="updateCount">0</div>

    <!-- domo.js optional utils -->
    <script src="https://unpkg.com/ryuu.js"></script>
    <script src="app.js"></script>
  </body>
</html>

Publish

Add a thumbnail Download the sample below and place it in your project root as thumbnail.png. The file must be exactly 300×300 pixels. Download thumbnail.png (300×300) Publish

domo publish

Development

We’ll be making a few changes to the app.js file. Replace the current contents with the following:

let counter = 0;
let total = 0;

function getData(alias) {
  counter += 1;
  domo.get(`/data/v1/${alias}?sum=total`).then((data) => {
    total = data[0].total;
    updateUI();
  });
}

function updateUI() {
  document.getElementById('total').innerHTML = total;
  document.getElementById('updateCount').innerHTML = counter;
}

getData('sales');

In its current state, the counter variable would never increment. It would always show as 1 because the app would always do a full refresh each time the data updated. Publish the design, create a new app card using that design, and then in a new tab update a row in the Webform DataSet — watch the app card to see it reload.

App card reloading after a DataSet update

Adding `domo.onDataUpdated()`

See how the app did a full page reload after the DataSet was updated and the counter remained at 1? Now we’ll add a domo.onDataUpdated() event listener to take control of how our app responds to data updates. Add the following function inside your script.

domo.onDataUpdated(getData);

Deprecated method name: domo.onDataUpdate() (without the trailing d) was the v4 API and no longer exists in current versions of ryuu.js. Use domo.onDataUpdated().

Publish again, then refresh the card page to pick up the new code. Now each time you update the DataSet your app should update the counter instead of reloading.

Handling data updates without a page reload

Getting Started

API Reference

Build Apps

Automate Actions

Partner Developers

AI Resources Guide

Connect Data

Embed Domo Everywhere

Govern Your Domo Instance

Other Resources

Developer Topics

Domo SDK

Handling Data Updates

Getting Started

Sample Data

domo init

index.html

Publish

Development

Adding `domo.onDataUpdated()`

​Getting Started

​Sample Data

​domo init

​index.html

​Publish

​Development

​Adding domo.onDataUpdated()

Getting Started

Sample Data

domo init

index.html

Publish

Development

Adding `domo.onDataUpdated()`