✨ Dynaboard is joining Figma!

Changelog 2022.05.20

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.

Build web apps fast with Dynaboard — the low-code web app builder made for developers.