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 component and a Button component onto the canvas.
3. Now let's wire things up!

Step 3: Add a resource

1. We want to create a server-side resource which will tell us the result of the coin flip.
2. Click Resources2 in the left nav.
3. Now click the + and select TypeScript Server. 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 Pages1 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: Wire it up to a button

First, let's bind the text label to our function by clicking Text component in the Components3 section of the left nav. The right nav will display its properties. Find the Value input box in the Content section and 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 button1 element and select our function from the On Click drop-down menu.

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