> ## Documentation Index > Fetch the complete documentation index at: https://domoinc-openapi-sync-dataflows.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Handling Data Updates This is an example of a simple app that leverages the [`domo.onDataUpdated`](/portal/Apps/App-Framework/Tools/domo-js#domo-ondataupdated-callback) 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.
nameemailtotal
Alice Johnson[alice.johnson@example.com](mailto:alice.johnson@example.com)8240
Bob Martinez[bob.martinez@example.com](mailto:bob.martinez@example.com)5130
Carol White[carol.white@example.com](mailto:carol.white@example.com)9870
David Kim[david.kim@example.com](mailto:david.kim@example.com)4560
Eva Rossi[eva.rossi@example.com](mailto:eva.rossi@example.com)7810
Frank Nguyen[frank.nguyen@example.com](mailto:frank.nguyen@example.com)3290
Grace Chen[grace.chen@example.com](mailto:grace.chen@example.com)6450
Henry Okafor[henry.okafor@example.com](mailto: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 theme={"dark"}

Handling Data

Total Sales

$ 0

# Data Fetches

0
``` #### **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** ```bash theme={"dark"} domo publish ``` ### Development *** We'll be making a few changes to the `app.js` file. Replace the current contents with the following: ```js theme={"dark"} 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()`](/portal/Apps/App-Framework/Tools/domo-js#domo-ondataupdated-callback) event listener to take control of how our app responds to data updates. Add the following function inside your script. ```js theme={"dark"} 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