⚡ Quick-start Guide

Step 1: Create a workspace & project

  1. From the Dynaboard home screen, click the hamburger menu icon and select Create Workspace. Name your workspace and click Create
  2. Next, create a new Project by clicking the + icon in the left nav next to your new workspace name.
  3. Name your project "Coin Flip" and keep the template set to Blank Project. Click Create
  4. Click on your newly created project to begin designing your app.

Workspaces are containers for your Dynaboard projects, allowing you to centrally manage project access across your team.

Projects are containers for pages and functions of your app.

Step 2: Design your app

  1. That big whitespace in the middle of the screen is called the Canvas where the visual elements of your new app live. The toolbar on top of the canvas contains a menu of elements.
  2. Drag a Text element and a Button element onto the canvas.
  3. Now let's wire things up!

Step 3: Add a server-side resource

  1. We want to create a server-side resource which will tell us the result of the coin flip.
  2. Click the Resource icon in the left nav.
  3. Now click the + and select "Typescript Server Resource". Behind the scenes, Dynaboard creates a space for running your custom Typescript functions.
  4. Next, make a function to run inside your Typescript resource. Click the Pages icon in the left nav. Then, click the + button next to Page Functions at the bottom of the left nav. You will see the right nav update with the properties of the function.
  5. Select your Typescript resource in the Resource drop-down menu and you will see a Code section appear on the right nav.
  6. Let's code! Enter our code into the Code box and click "Test Function"
return Math.random() > 0.5 ? 'heads' : 'tails'

Whew! Take a break from all that typing. Let's wire up the UI.

Step 4: Wiring it up

First, let's bind the Text label to our function by clicking the Text element in the Labels section of the left nav. The right nav will display's its properties. In the Text > Value box enter our function name using double bracket notation.

{
{
function1.data
}
}

The text label should update immediately withe result of our coin flip!

Finally, to trigger the coin flip, let's make our Button trigger our function. Click the Button element and select our function from the OnClick drop-down menu.

To test our working app, click the Play button on the top right side of the screen. 🎉