Changelog

Since the last changelog, we’ve been hard at work on tons of usability updates to make building applications a more seamless experience, which include:

• 🚀 2 new features

• 🏗 16 updates and improvements

• 🛠 23 bug fixes

Components

All Components

• 🏗 Components now support a far more robust set of event triggers to attach functions to, including: Mount, Unmount, Focus, Blur, Hover, Leave, Click, Double Click, Select Row, Refresh, and Wheel.

Data Table

• 🏗 Column locking and deletion has been replaced with show / hide functionality to make table configuration easier when dealing with large data sets.

• 🛠 Refreshing the column layout is no longer required when turning off auto-columns for the first time.

• 🛠 Pagination property labels have been renamed for better clarity.

• 🛠 Formatting errors affecting table rendering in Safari.

• 🛠 Dates are no longer auto-formatted as localized datetimes.

• 🛠 Parsing UNIX epoch timestamps formatted as a string no longer displays an error.

Templates

• 🏗 Templates (and their instances) now support default scope values as well as modifying scope values directly in the editor. Provide default values for your template that can be used for testing or while live to create a better UI / UX.

• 🏗 Grid mode is now the default layout mode for new templates.

• 🏗 New templates are now created with a larger default size (320px x 128px).

• 🛠 Min-width and max-width are now respected in the editor for templates and set to empty by default.

• 🛠 While in grid mode, the template canvas is no longer auto-expanded when dropping in new components.

Input

• 🏗 Input components now support Textarea as a type for multiline text input.

Pages

• 🏗 Pages now support having the min-width set.

• 🏗 The drag handles on on the bottom and side of the page canvas now support setting the width and height of the page.

• 🛠 Improper values in the min-height no longer cause rendering errors on the page.

• 🛠 Setting 100% max-width has been fixed.

Dropdowns

• 🛠 Switching the editor between edit and preview mode no longer causes drop-downs to disappear from the page.

Form Container

• 🚀 We’ve added a new type of container that supports custom layouts of form components, native browser support for OnSubmit handlers, and passing form data to a server.

Containers

• 🛠 Containers now support none as a drop shadow selection option.

• 🛠 Support for proper rendering of containers inside of containers has been added.

Resources & Functions

All Resources

• 🏗 Response messages when testing connection errors now appear in the console for easier debugging of errors.

All Functions

• 🛠 An intermittent issue causing function timeouts issue has been identified and fixed.

Google Sheets

• 🛠 An issue causing some google sheets data to not appear in charts or tables when the first items in a column were null has been fixed.

REST API

• 🏗 Valid HTTP methods can now be selected with a dropdown rather than entered using a freeform text field.

Browser

• 🛠 Visible toasts no longer block clicks of other components and buttons at the same vertical position on the screen.

• 🛠 An issue causing the application font to change when a toast was displayed has been identified and addressed.

Editor

Menus

• 🏗 The sidebar now defaults to an expanded state with labels for better discoverability. It can be collapsed to its original state via the UI or with the hot key CTRL+B.

• 🏗 Insert resource & insert node menus now have multi-level navigation for better discovery and organization of the growing list of items.

• 🏗 When dragging nodes out of the toolbar they now appear with their center point under the cursor rather than the top left of the node.

• 🛠 The Omnibar correctly updates node names as they are changed in the editor.

Secrets

• 🏗 Secret fields are now hidden (like password fields) by default when inputting them initially.

• 🛠 Numbers are now supported in secret names.

Controls

• 🏗 Copy / paste functionality has been improved with toasts showing the relevant node information, the ability to paste immediately after copying, and a new offset when pasting so that nodes don’t exactly overlap each other.

• 🏗 Error icons now bubble up in the Component panel to help users more quickly identify & address issues.

• 🛠 Various issues with page reordering and deletion have been addressed.

• 🛠 Users with only review permissions can now see the app in the editor rather than only the deployed version.

• 🛠 When a node ID is specified in the editor URL it is now properly highlighted by default in the editor.

Settings

• 🚀 Add HTML meta tags to the header of your project for better SEO and sharing previews.

• 🛠 UI issues related to saving the app slug have been fixed.

Code Editors

• 🛠 Erroneous typeahead errors claiming functions had the wrong number of arguments have been addressed.

Data Table Formatting

• Support for new column types beyond plain text, including: date, time, datetime, boolean, and JSON.

• Automatically detect or explicitly control how and when column types are rendered.

• Enable resizable columns with support for minimum widths and relative widths.

• Horizontally scroll columns on large data tables.

Templates and Iterators

• Templates width and height can now be modified using the handles on the editor canvas.

• Grid mode is now supported when laying out components inside templates.

• Iterator performance has been drastically improved when displaying 1 to ~100 template nodes.

Pricing

• We’ve updated our pricing page to more accurately reflect anticipated pricing when we begin billing for usage later this year.

Additional Updates

• Documentation has been updated and can now be found at dynaboard.com/docs

• Personal workspaces are now listed as the default workspace when creating a project

• Moving nodes forward and back in the left side bar now supports the hotkeys [ and ]

• Grid mode dots now display properly on high DPI monitors.

• Fixed issues where some resource properties were unable to be modified.

• Defined theme colors are now properly supported when styling charts.

• Renaming of duplicated page nodes now works as expected.

• Undo & redo now work consistently as expected when dealing with node deletions.

• Text editors no longer appear off-screen in certain circumstances.

• Profile pictures now load properly when opening the portal.

Docked Property Editors

Have you needed a bit more space when editing properties of components (e.g. the .data property when filtering results of a data table)? Now you can open and edit multiple property definitions in a resize-able window at the bottom of the editor.

Color Picker + Eye Dropper Tool

Easily preview and select project theme colors, custom colors, or existing colors with the eyedropper tool. Eyedropper support will be added for browsers beyond Chrome and Edge as they release support for the Eyedropper API.

Programatic Toast Notifications

The browser resource now allows functions to programmatically pop toast messages. Toasts can be customized by type, duration, and whether or not they they have a button to dismiss the notification.

Custom Domains via CNAME [experimental]

If you’d like to host your Dynaboard application on a custom subdomain of your existing site, e.g. appname.yoursite.com, we’re looking for testers! Let us know by emailing support [at] dynaboard.com, and we’ll see if it’s the right fit.

Typeahead Support on Function Data Property

Autocompletion is now available on functions that return custom response data. Typeahead suggestions are available on the .data property of a function node.

This also works for nested arrays and map! So you should still see typeahead suggestions on an element when using a map like so: exampleFunction.data.map((element) => { element.autoCompletionSuggestion})

Note: If type ahead suggestions aren’t appearing, the function most likely must be called first. Clicking the “Test function” button or calling it in the console with with exampleFunction() will populate the results.

Chart Updates — Combo Charts

Charts now support combo charts using any mix of lines, bars, and scatter across multiple dimensions. In addition, we’ve updated a handful of configuration options for greater chart customizability including support for different left and right vertical axis scales.

Additional Updates

• Text nodes support links as a render mode type and header spacing has been significantly reduced in the rendered markdown type.

• Resources, functions, and events link to other resources, functions, and events they’re associated with in the properties editor to allow easy navigation between them.

• Data tables support the resizing of columns & the ability to horizontally scroll.

• $dynaboard has auto complete available in the native browser console.

• Importing and exporting uses the filename / project name as the default name instead of using the UUID.

• Robots.txt support has been fixed and you can customize it for your application.

• The omnibar correctly updates search results when renaming components, functions, and resources.

• We’ve updated the loading states in the portal on project creation and project selection to better show loading activity and prevent unintended behavior.

• HTTP resources show proper path expansion when using binding expressions.

• Toolbar dropdown menus in the editor no longer immediately close when moving the mouse outside the menu.

• The native browser tool tip works correctly with the data table.

• Trailing newlines in a data table expression no longer cause the displayed data to disappear.

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

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

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.

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.

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

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"
    }
}

Debugging

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

Documentation

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.

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.