Changelog

We're always working to make the Dynaboard experience delightful.

New
Adding a new secret configuration node to a project.
Adding a new secret configuration node to a project.

Secrets & Configuration Management

Project configuration and dedicated secrets nodes have arrived! Project configuration nodes can be created under the resource panel and support: strings, JSON, and secrets.

Strings and JSON can be freely edited in the properties panel of the configuration node, while secrets need to be attached to a previously created secret node. Secrets nodes can be created in the secrets tab at the top of the resources panel, and can no longer be edited or viewed once saved.

Usage

Configuration node JSON and string values can be called using the client side interpolation “double curly” notation {{config1.value}} in server side resource functions (e.g. HTTP Request, DB resources, etc...) or just config1.value in the TS client resource.

Configuration nodes with secrets can be attached to secrets fields on server side resources. They can also be inserted into the headers field on HTTP Request functions using the server side “dollar with double curly” notation ${{configSecret1}} and does not need to include the .value.

Omnibar — beta

Opening the Omnibar and selecting an input node.
Opening the Omnibar and selecting an input node.

Use Ctrl + K or Cmd + K to quickly search for and select all of the nodes in your projects including components, functions, pages, and resources. The omnibar, like Dynaboard, is currently in beta, but we’ll be adding a ton more keyboard enabled functionality in the coming months. So, let us know what you’d like to see!

Spinner Component

Loading spinner tied to a long running query.
Loading spinner tied to a long running query.

Easily add customizable loading indicators to projects with the ability to adjust color, speed, style, and thickness. The spinner can be shown or hidden by your existing TypeScript functions by setting its .isVisible property.

Updates

Data Table Pagination — Server-side

Data tables now expose a few new properties to make natively integrating with paginated APIs possible. These new properties are:

  • currentPage this is the currently selected page of the data table.

  • pageSize this the is number of items to be displayed in the table on any given page. This can be explicitly set, but the default auto behavior provides the maximum number of items that can be displayed in the table without scrolling.

  • paginationOffset this is the index of the first element in the table given the current currentPage and pageSize. Typically you’ll need to provide an API with pageSize and either currentPage or paginationOffset but not both.

  • totalRowCount this is the total number of items in the data set and used for displaying total rows and the total number of pages. You can either set it statically e.g. 100 or use the value of a separate API with the “double curly” syntax e.g. {{getTotalRows.data}} call that provides the total number of items.

When these properties are used inside of any function that is set to run automatically (a.k.a. a reactive function) the function will be called and the data table automatically updated when the < and > page selection arrows on the data table are clicked.

An example of using the new properties with a paginated REST API would be retrieving pull requests from a Github repo. To do this you could set up an HTTP Request Resource attached to a data table named data_table1 with pagination enabled and use the following URL in the HTTP resource function: https://api.github.com/repos/facebook/react/pulls?page={{data_table1.currentPage}}&per_page={{data_table1.pageSize}}

Individual Workspaces

Everyone now has their own individual workspace provided by default. Individual workspaces are not able to be shared with other users, however, the projects inside them are still shareable.

Previously created workspaces will be updated to shared workspaces that allow for multiple users.

If you already have an account and don’t see your individual workspace with the format Account Name's Workspace you’ll need to sign out / sign in for it to be created.

Project Migration

If you’d like to migrate a project from a shared workspace to your personal workspace, you’ll need to follow these steps:

  1. Open the project you’d like to migrate in the editor.

  2. Open the hamburger menu (☰) icon in the top left corner of the project and click on “Export Project”

  3. Download the JSON of the existing project.

  4. Return to the portal and open your individual workspace

  5. Click on “New Project” and then select “Import Project”

  6. Upload the JSON file you downloaded in step 3, provide a project name, and click on “Create Project”

  7. Once created you’ll need to navigate to the “Resources” panel an re-insert any secrets, as they will have not been exported with the project.

Performance Improvements

We’ve made multiple backend updates to how we handle server side function calls and you should be seeing major performance improvements (in some cases up to 10x faster than before) when calling functions on resources.

We’re continuing to work on both function (and general component) performance, but for now, especially in multi-function workflows, you should be experiencing a far more responsive application.

Additional Updates

  • Inputs now support the option to display a button at the end of the field to clear all text input.

  • Data tables have been visually tweaked with new headers and footers.

  • The $dynaboard object is now accessible in all native browser consoles. Component properties can be read and written and functions can be called directly from the console.

Fixes
  • The MongoDB resource now supports CA cert when required for authentication.

  • Notion resource functions have been normalized to support displaying the .data property in a data table without any additional modifications.

  • Duplicate resources are no longer created when using quick actions and a usable resource is already available in the project.

  • Duplicate users no longer appear on workspaces when they’ve been added multiple times.

  • The OnSelectRow event now fires for every click on a data table row and no longer fires when the underlying data in the data table changes. In addition, clicking an already selected row will no longer deselect that row, as selection now behaves more like a radio input than a checkbox.

  • Individual cells in data tables can now be highlighted and copied.

New
Running cURL to hit an HTTP Endpoint resource.
Running cURL to hit an HTTP Endpoint resource.

HTTP Endpoint Resource

Dynaboard applications can now respond to web-hooks or even expose a full fledged API with the new HTTP Endpoint resource.

From a custom slack-bot with an admin interface to a payments dashboard that updates with Stripe payment failures & reviews in real-time, build entirely new classes of workflow automation applications that would typically require integrating multiple tools.

Each resource exposes a custom URL that can be linked to any number of project functions using the TypeScript and Python Server resources. Server functions called by an HTTP Endpoint resource have an $event.request object (TypeScript) or event['request'] dictionary (Python) available to them with all of the parsed request data.

E.g. The following cURL request

curl -X POST "https://api.dynaboard.app/endpoints/6922d0f5-8283-4917-b738-61cacde11c1c/myHTTPEndpoint?testQueryParam=testQueryParamValue" \
    -H "Content-Type: application/json" \
    -d '{"testJSONKey": "testJSONValue"}'

would generate a $event.request or event['request'] that contains:

{
    "method": "POST",
    "path": "/myHTTPEndpoint",
    "query": {
        "testQueryParam": "testQueryParamValue"
    },
    "body": {
        "testJSONKey": "testJSONValue"
    }
}
Updates

Debugging

Live console log output.
Live console log output.

Logging directly to the Dynaboard console is now supported using the native console.log() from TypeScript Client functions.

Documentation

Opening the docs sidebar on a PostgreSQL resource.
Opening the docs sidebar on a PostgreSQL resource.

We’ve been working to improve the development experience with a new sidebar that puts documentation where and when you need it.

Clicking on the documentation button in the properties panels opens the sidebar to the relevant reference based on the selected node.

In addition we’ve also added new configuration guides for many of our resources.

Hotkey Additions

  • Ctrl: (Windows only) Hold down ctrl to switch to interactive mode in the editor. This previously existed on Mac OSX using cmd.

  • Ctrl / Cmd + Enter: Runs test function when the function editor window is open in the editor.

  • Arrow Keys: Scroll through your command history in the console using the up and down arrow keys.

Additional Updates

  • Creating a new template now provides the default template as a starting point.

  • Project import has been updated to support much larger projects of up to 20MB.

  • Grid mode now shows the grid with dots instead of lines to reduce visual clutter when laying out components.

  • Data tables have been updated to show zebra striping even when empty.

  • Functions now show loading spinners while running.

  • Resolving comments now shows a toast notification allowing for a quick undo.

  • Iterators now support CSS flex-wrap options wrap, nowrap, and wrap-reverse.

Fixes

Resources

  • Notion: List databases function now only returns databases and not all documents.

  • SendGrid: Send email function no longer requires all fields to be filled out for a successful send.

  • Amplitude: Response data is now normalized for easier chart & table display.

  • MySQL, PostgreSQL, MongoDB: Pasting certificates no longer breaks the editor UI.

  • MySQL, PostgreSQL, MongoDB: Use SSL now defaults to true when creating resources.

Additional Fixes

  • Inviting users to a project no longer displays an error while successfully adding them in the background.

  • The function results panel now clears when switching between functions.

  • Removing users from a project no longer incorrectly shows a success message.

  • Renamed templates now have their updated name appear in the components panel.

  • Text in input fields is no longer always added at the end of the line when typing.

  • Refreshing the editor no longer reverts dark / light modes for users that select an option that isn’t their default setting.

  • Functions and components now properly reorder when dragged around in the side bar.

  • Property editors for rows and columns now display default pixel values instead of a blank input.

  • Iterator nodes no longer have incorrect indexing when the underlying data changes.

  • We use serif-font face for pre-renders in the application to reduce the flash effect when the correct font renders.

  • The support request field now empties on a successful submission.

  • (Firefox only) Fixed visual glitch affecting profile pictures.

New
Quickly drop in and configure new data tables.
Quickly drop in and configure new data tables.

Easy-to-Configure Data Tables

One of our most consistent pieces of feedback has been about the difficulty of configuring new data tables. So, we’ve reduced the number of steps and streamlined the process by adding a new overlay to guide you through:

  1. Selecting or configuring a resource to connect to your data source.

  2. Creating and attaching a function to load the data from your selected resource.

We’ve also updated column configuration with an “auto-column” mode that, when enabled, can automatically adjust columns based on the underlying data, or, when disabled, allow you to manually manage displayed columns.

Updates

Functions

Quick actions appear on every new function.
Quick actions appear on every new function.
  • New functions now display a list of common quick actions to help you get started more quickly. We’ll be making a lot more improvements here to make customized suggestions based on your specific project.

  • Functions more clearly display when they haven’t been saved and are in a “draft” state.

  • All previously run function output is now available in the console to help better debug more complex applications and multi-function workflows.

  • Functions that are set to run automatically no longer immediately display an error.

Grid Mode

Grid mode support both on the main canvas and in containers.
Grid mode support both on the main canvas and in containers.
  • Grid support inside containers lets you organize and lay out groups of components without sacrificing design precision.

  • Match your existing design system with support for changing the number of columns and customizing the default spacing between grid columns and rows.

Additional DB Schema Preview & Typeahead Support

In addition to PostgreSQL, we’ve added expanded schema preview & typeahead support to MySQL and BigQuery resources as well.

Hotkey Additions

  • Hold G: See the underlying grid spacing by holding down G without any component selected.

  • Option / Alt + Click & Drag: You can now use this hotkey combination to duplicate and place components without copying and pasting.

Additional Improvements

  • We now support autocomplete suggestion on the localStorage object inside the console.

  • Our changelog updates now appear in the portal navigation bar.

Fixes
  • When archiving an application it is now also “un-deployed.”

  • MongoDB resource functions now support proper JSON interpolation, so it is no longer required to add additional quotes around values interpolated with the “double curly” {{ }} syntax.

  • Flashing “(Disconnected)” text no longer appears at the top of the editor when it has been open for longer than 2 hours.

  • The BigQuery connection test no longer always returns success regardless of status.

  • Using the OpenAPI resource no longer causes the project to crash.

  • The “debounce” millisecond (ms) input is now selectable.

  • Valid components and functions no longer have a red underline in the console.

  • We fixed an issue that prevented deleted keys in the KV resource from being reused.

  • The file input component can now be reset by setting .files equal to an empty array [] or other “falsy” values.

  • Issues with property editors have been fixed in Safari.

New

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  || '%'

Updates

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 🚫.

Fixes
  • 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.

New

Multiplayer Editing Experience

Live multiplayer editing is here! Simultaneously build projects with teammates without stepping on each other's toes. It's now possible to work on different sections of the same project or work together on a new feature and see updates in real-time. No more coordinating who can edit the project and at what time to prevent accidentally overwriting other changes.

  • Live hover cursors

  • Editing presence indicators

Multiple cursors are shown on screen editing the input fields of a form.
Multiple cursors are shown on screen editing the input fields of a form.

Debugging Console

Inspect the values of components using the built-in JavaScript based read eval print loop (REPL) in the bottom panel. This is just the beginning of our live debugging experience. Let us know what you think, because we'll be adding a lot more here in the coming months.

Testing out the read eval print loop in the console by modifying the value of the UTM campaign input field.
Testing out the read eval print loop in the console by modifying the value of the UTM campaign input field.

Additional Database Resources

We know it's important to connect data sources quickly and easily, so we've added two more highly requested connectors to go along with MySQL, PostgreSQL, and our other sheets based data sources.

  • MongoDB resource

  • BigQuery resource

Updates

Functions

Client and server-side functions can now call other functions to perform more complex operations.

  • Client-side functions can invoke other client-side functions.

  • Client-side functions can invoke server-side functions.

  • Server-side functions cannot invoke client-side functions.

Note: While server-side functions cannot invoke a client-side function, they can retrieve the previously returned data of a client-side function using the second method described below.

Functions are returned as promises, so to execute and retrieve the values it's necessary to await the results.

const data = await exampleHTTPFunction();

To retrieve the previously returned value of a function without re-executing it you can access the data property of the function node. E.g. If the function performs a slow database query, it may be better to use the cached value vs. re-executing the function.

// Client-to-client or server-to-server
const data = exampleHTTPFunction.data;
// Server-side code retrieving client-side data
const data = {{ exampleHTTPFunction.data }};

Charts

We're just getting started with our charts overhaul to make beautiful graphs easy. Quickly going from a database connection to meaningful insights is something we're going to continue focusing on in the coming months.

  • Legend support

  • Charts can now display up to 10 dimensions

Editor Experience

We're focused on lots of small UX improvements to the editor, so please continue to let us know if there is anything more we can do to make the experience easier.

  • Added unsaved / saved indicators on functions.

  • Ligatures now automatically appear in code editors.

  • Functions and nodes show when they have an error.

  • Renamed the "Layers" panel to "Components" based on user feedback.

Fixes

  • Functions can now be either project, page, or template scoped.

  • TypeScript / JavaScript typeahead results to no longer show invalid results.

  • Improved error reporting on most resource types.

  • Fixed horizontal mouse wheel scrolling in scrollable containers.

  • Updated drag and drop behavior with less jumpiness.

  • Improved component selection to make selections much faster.

  • Added many small UI fixes in the portal.

We're currently in a private beta period. Sign up for early access and get an update when it's your turn.