Building Apps
Load external data

Load external data into your app

💡

In this guide, you'll build upon your knowledge of binding expression and functions to load data from your own external API or database, unlocking more capabilities built on your existing infrastructure.

You can load data from nearly any external data source into Dynaboard and build apps on it with ease.

Overview

The general process is always the same:

  1. Start by creating a Function
  2. Configure your function with the appropriate Resource and props
  3. Create a binding from your display component to the function's data property

Example: Hacker News REST API

template

Hacker News

Build a Hacker News clone with Dynaboard in ten minutes.

The Hacker News API (opens in a new tab) is a RESTful web API powering Hacker News (the orange site). It's a great starting point because it does not require authorization.

An example URL looks like this:

https://hacker-news.firebaseio.com/v0/item/8863.json

And returns a response that looks like this:

{
  "by" : "dhouston",
  "descendants" : 71,
  "id" : 8863,
  "kids" : [ 8952, 9224, 8917, 8884, 8887, 8943, 8869, 8958, 9005, 9671, 8940, 9067, 8908, 9055, 8865, 8881, 8872, 8873, 8955, 10403, 8903, 8928, 9125, 8998, 8901, 8902, 8907, 8894, 8878, 8870, 8980, 8934, 8876 ],
  "score" : 111,
  "time" : 1175714200,
  "title" : "My YC app: Dropbox - Throw away your USB drive",
  "type" : "story",
  "url" : "http://www.getdropbox.com/u/2/screencast.html"
}

We're going to query for an item by ID and display its title.

Step 1: Setting up the resource

  1. Create a Page Function
  2. In the inspector, click the Resource dropdown and select API Integrations » REST API
  3. You will be jumped to the new http1 resource on the Resources2 panel
  4. Under Base URL, enter https://hacker-news.firebaseio.com/v0
  5. Click Test Connection and verify that the toast at the bottom of the screen says that the connection was successful
💡

You should use the most common "base URL" of your REST API when setting up a resource. Doing so will allow you to use multiple functions (requests or queries) on the same shared resource configuration without repeating yourself.

💡

Testing a REST API will issue a GET request to the base URL you have specified. It expects a 2xx response code.

Step 2: Configuring the function

  1. In the toast at the bottom, click Go Back, or navigate back to function1 on your page
  2. In Path, enter /item/8863.json
  3. Click Test Function to get a preview of the JSON response in the Result panel
  4. Click Save Function
  5. Configure the function to run On Page Load by enabling that flag

The result value will be available within the editor via function1.data.

Step 3: Wiring up the text component

  1. Drag out a Text component
  2. In Value, enter:
@{{ function1.data?.by }}: {{ function1.data?.title ?? function1.data?.text }}

This will format the text like so: @dhouston: My YC app: Dropbox - Throw away your USB drive

💡

Curious what the ?? and ?. above means? They're called nullish coalescing (opens in a new tab) and optional chaining (opens in a new tab), respectively. They are useful here because function1.data starts off as undefined on page load, and so accessing by, title, and text would throw an error otherwise.

Step 4: Automatically running functions

💡

Use caution when configuring your functions to run automatically. Avoid having reactive functions with side effects, and instead prefer safe GET / query-like functions. When in doubt, it is best to run your functions explicitly When Called based on event handlers.

Sometimes you want to run a function whenever an input changes, just like you can do with binding expressions in components. Dynaboard refers to these functions as Reactive.

Below, we will extend the Hacker News micro-app above to incorporate a reactive function which runs automatically whenever an input containing the story ID changes.

  1. Insert an input component from the toolbar
  2. Click back to function1
  3. Replace Path with /item/{{ input1.value }}.json
  4. In the Run panel, select Automatically
  5. Set Limiter to Debounce and Limiter Timing to 500ms
  6. Click Save & Run Function

Dynaboard will automatically run your function whenever the input changes, debouncing after 500 milliseconds. Try using the Interact mode to enter 8863 into the input component.

Example: SQL databases

Dynaboard building apps on top of common external SQL databases. So, even if your app doesn't have a finalized API yet, you can still get your data into Dynaboard.

  1. Configure your SQL resource (e.g. PostgreSQL)
  2. Create a page function for the resource with your Query of choice (binding expressions supported)
  3. Bind a Data Table or Chart to the function (e.g. {{ yourQueryFn.data }})

Example queries (PostgreSQL-like)

All ANSI SQL is supported (SELECT, UPDATE, INSERT, etc).

-- select the user's row based on the value in idInput
SELECT *
FROM users
WHERE id = {{ idInput.value }}
LIMIT 1
 
-- insert a comment
INSERT INTO comment (comment_body)
VALUES ({{ commentBody.value }})
RETURNING *
💡

Make sure the SQL user you configure for your resource has the minimum permissions needed to accomplish the task at hand. That means if you want a read-only user, they should have SELECT access exclusively.

Supported SQL Resources

All available resources

Dynaboard supports a wide range of integrations with other common data sources. Below you can find a catalog of all resources currently supported:

💡

Can't find the resource you're looking for? Drop us a line and we'll put our heads together to figure out how to get your data into Dynaboard.

Handle user eventsEnforce authorization