Changelog 2022.03.21

DB Schema Preview & Typeahead — PostgreSQL

We’ve updated the query building experience to display your connected database schema as well as include smart suggestions in our typeahead system. The typeahead system also works with table aliases to let you write concise queries quickly and without errors.

This is currently only supported for PostgreSQL, but will be added for other databases soon!

File Selector Input

Create UIs that support file upload and manipulation with the new file selector input. It supports file type specification (e.g. photos only), multi-file selection, and drag and drop out of the box.

The data of selected files is exposed in the files array e.g.

fileInput.files[0].parsedFile

Built-in CSV Parser

The ability to parse CSV to JSON (and JSON to CSV) in TypeScript client functions is now available with the built-in Papa Parse library.

const parsedData = Papa.parse(rawCSVData, { header: true }).data

Reactive Functions

Functions can now automatically react to changes in referenced data without needing to be explicitly called and rerun themselves. This can be particularly useful in automatically updating UI elements or rerunning queries of underlying databases in response to user input.

In order to make a function a reactive function you need to do 3 things:

1. Select Automatically for the run function configuration option.

2. Pick a debounce option from None, Debounce, and Throttle and give it a value in milliseconds (ms).

   1. Debounce and throttle are most useful when binding a longer running function to an input (e.g. a text field) that changes frequently. While debounce and throttle work slightly differently they can both prevent the underlying function from being called too frequently (e.g. on every key press) such that it can’t keep up.

   2. Use the "double curly" {{ }} syntax when referring to the input you want the function to react to.

Example 1

We could update the CSV parsing function above to work with the file input node such that the function would re-parse on every new file selection. This could be useful for previewing CSV data in a data table on user selection.

const parsedData = Papa.parse({{fileInput.files[0].parsedFile}}, { header: true }).data;

Example 2

We can even include the "double curly" syntax inside of SQL queries to directly re-run database query functions based on input changes.

SELECT * FROM users WHERE email ILIKE '%' || {{input1.value}}::text  || '%'

Resources

Google Sheets

• Resource functions now default to treating the first row as a header to make importing data into data tables and charts easier.

Airtable

• Directly test the Airtable connection without having to create a function first.

• Just the base ID is now used instead of the full base URL during configuration.

GraphQL

• Responses are now returned as a JSON object rather than a string.

HTTP

• Headers now support client-side interpolation through the use of the “double curly” {{example.value}} syntax. This is most useful for including items like authorization keys in request headers.

• The user-agent on HTTP requests sent from Dynaboard is now Dynaboard / 0.2.3

Grid Mode

• We’ve improved the accuracy of dragging and dropping elements, as they now have a shadow showing the expected target location while dragging.

Hotkey Additions

• Arrow Keys: Use the arrow keys to change the position of a selected element on the page.

• Shift + Arrow Keys: Resize the selected element in the direction of the arrow key pressed.

PIN Authentication on Sign In

• To further improve security, we’ve added a one-time PIN to the sign in verification email that must be entered during the sign in process.

Additional Improvements

• The .loading property on functions now exposes a boolean that can be used to modify an application’s UI while a function executing.

• We’ve improved the UI/UX of modals across the Dynaboard editor and portal to provide additional relevant information.

• We’ve improved the default behavior to direct a user to sign in when they visit a private project and are not already signed into Dynaboard.

• The “Layers” panel in the left side bar has been renamed to “Components” in response to user feedback.

• It’s now possible to clear the Console without refreshing the page using the new clear console button 🚫.

• We fixed an issue that caused functions not to appear in the selection dropdown for event handlers.

• The default behavior when clicking vs dragging an item from the toolbar has been unified.