Build a control panel in Retool

Build your own control panel in Retool: buttons that put graphics on air, forms that change their data, and a live view of what's showing.

Add Airframe as a resource

A Retool resource stores the API key on Retool's servers. Your key never reaches the browsers of the people using the app.

1. In Retool, open Resources and choose Create new › Resource, then REST API.
2. Name it Airframe.
3. Set Base URL to https://api.airframe.tv/v1.
4. Under Headers, add Authorization with the value Bearer afk_…, using your key.
5. Choose Create resource.

Send a command

Make a query that puts a lower third on air with the name typed into a form.

1. In your app, add a Text Input named nameInput and a Button labelled Take.
2. In the code panel, add a Resource query named takeLowerThird that uses the Airframe resource.
3. Set the method to POST, the path to outputs/OUTPUT_ID/commands, and the body type to JSON.
4. Set the body to the command, with the name from the input:

{
  "commands": [
    { "command": "in", "component": "lower-third", "data": { "name": "{{ nameInput.value }}" } }
  ]
}

5. On the button, add an event handler: on Click, Control query takeLowerThird.

Replace OUTPUT_ID with the output's id, the last part of its browser source URL, and lower-third with your component's id. The commands page lists every command you can send.

Clear the output

Make a second query, clearAll, the same way, with this body, and run it from a Clear button:

{ "commands": [{ "command": "out", "scope": "root" }] }

Show what's on air

1. Add a query named outputState that sends GET to outputs/OUTPUT_ID/state.
2. Set it to run when the app loads, and in its advanced settings, to run periodically, every 2 seconds or so.
3. Show its data in components, for example a Table with data {{ Object.entries(outputState.data.onAir) }}, or text reading {{ outputState.data.data.global.homeScore }}.
4. Add a success handler to takeLowerThird and clearAll that triggers outputState, so the view updates straight after a take.

Get the output's state describes everything it returns.

Tips

• Batch related changes. A score change and a goal animation can go in one request, so they land together: an update then an invoke.
• Mind the rate limit. Keep polling to every second or two. Each key can send 200 command batches every 10 seconds; see Errors and rate limits.
• Show errors. A failed command answers 422 with the reason and which command failed. Add a failure handler that shows a notification with {{ takeLowerThird.error }} so operators know when a take didn't happen.