How Can We Help?

This post refers to the new-and-improved beta version of Tabletop Playground, and may describe functionality or UX not present in the legacy version. For information about the beta, click here.
Let’s say you’re creating a custom UI, and you want the user to be able to modify aspects of it on the fly. You can accomplish this by adding custom options to your UI. Implementing this requires some scripting knowledge, so be sure to read Adding Scripts to UI if you haven’t already.
Adding Options
To add a Custom Option, go to the Script tab of the UI Template editing dialogue, and hit the “+” next to “Options. This will present you with a short list of the sorts of options you can add. Clicking any of these will then present you with parameters for the chosen type.

There are four types of options you can add:
- String — Allow the user to input text.
- Number — Allows the user to input numbers.
- Boolean — Allows you to create true/false “checkbox” options for users.
- Selection — Allows you to create a dropdown list of options for users to choose from.
You can add options whether or not you’ve attached a script, but they won’t do anything until you add a script.
Scripting Options
To reference your options in your script, you’ll first need to include optionValues when you fetch the API:

At that point, you can get the value of any option using the method matching the option type:
- String — getStringValue(index: number)
- Number — getNumberValue(index: number)
- Boolean — getBoolValue(index: number)
- Selection — getSelectionValue(index: number)
In each case, you’ll replace the “index: number” with the position of the option you’re looking for in the list you defined in-client (with the first being 0.)

Example: Simple Character Label
Let’s say we wanted to add a label to certain minis declaring their name and level. To start, we make our UI:

Now we go to the Script tab and set up options for the name and level:


Then we write our script:

We attach the script to our UI. Then we spawn a Meeple, go to Customize → Properties, click the UI tab, and attach the template. We should now see our Name and Level options in the Properties panel:

When we close Properties and hit the Reset button on our UI, the label updates based on our inputs:

