---
source: "https://docs.lumora.live/operating/control-form"
url: /operating/control-form.md
description: >-
  How the graphic control form works in Lumora: forms are generated from the
  template's controllable fields, layouts can be customised, and graphics can be
  updated while on air.
---

# The graphic control form

Selecting a graphic in the rundown opens its **control form** in the bottom panel of the control panel. This is where the operator edits the values that change at show time: a host's name, a sponsor's logo, a current score, or whatever fields the template designer marked as controllable.

## How the form is generated

The control form is built automatically from the graphic's template. Fields the template exposes as controllable appear as inputs on the form.

* For **OGraf** templates, the form follows the manifest declared by the template author: the input type (text, multi-line text, colour, number, dropdown, asset picker and so on), the starting order and column, and any hints such as a value range or character limit.
* For **Lottie** templates, the form follows the configuration set when the template was uploaded (which text and image layers were exposed, and how they were named).

You don't write or maintain the form by hand. If a field you expected to control is missing, the issue is in the template's manifest or the upload configuration, not the control form itself.

### Fields you might not see

An OGraf template author can keep a field off the form in two ways:

* **Hidden by default.** The field starts hidden but you can reveal it: click **Edit layout**, find the dimmed field and click **Show**.
* **Never shown.** Some fields are driven entirely by the template or a data source and never appear on the form, not even in **Edit layout**. The graphic still receives their values.

### Value hints

Some OGraf fields carry hints from the template, such as a number range or a maximum length. If a value falls outside a hint, the input is outlined and hovering it explains why. Hints never stop you clicking **Update**: the graphic decides what it accepts.

Percentage fields show the percentage (type `25` for 25%), and some number fields show a unit such as `ms` next to the input.

## Customising the layout

The form's default layout is a straightforward top-to-bottom list of fields. For graphics with many fields or a specific operator workflow, you can rearrange it.

In the control panel footer, click **Edit layout** to enter layout-edit mode. Each field shows as a compact row with its name and input type. Drag fields to reorder them or move them between columns, add or remove columns, and hide fields you don't need. Layout changes are saved per-graphic, so each graphic in the rundown can have its own arrangement.

* **Sections and tabs.** Click **+ Section** to add your own section, then name it in its header. Removing a section you added moves its fields to the first section. **Tabs** / **Stacked** picks how the sections show. In tabs mode, drag a field over a tab to open it and drop the field into that tab.
* **Auto-filled fields.** Templates that fill some values from the team roster (a team's tricode or logo, for example) keep those fields in an **Auto-filled** section, which normally lists only the ones you've given your own value. To always list all of them for this graphic, open **Edit Graphic** and turn on **Enable auto-filled override**.
* **Apply to all** copies this graphic's layout to every other graphic made from the same template. It then asks whether new graphics made from the template should start with this layout too. Graphics that already exist aren't changed by that second choice.
* **Reset to defaults** puts back the template's own layout for this graphic.

## Updating a graphic while it's on air

Many fields can be changed live, but the change isn't pushed to the on-air output automatically. After editing a controllable field while the graphic is live, click **Update** to send the new values to the output. This gives the operator deliberate control over when changes appear on screen, instead of every keystroke flickering on the broadcast.

If the graphic isn't on air, edits apply the next time it's taken.

**Lottie graphics are the exception.** Clicking **Update** while a Lottie graphic is on air refreshes the preview but doesn't change the output. The new values appear on air the next time you take the graphic live. To change a Lottie graphic mid-show, take it off and back on.

\*\[CG]: Character Generator. AKA graphics overlay engine.
\*\[OBS]: Open Broadcaster Software. Open-source streaming and recording tool.
\*\[SDK]: Software Development Kit.
\*\[API]: Application Programming Interface.
\*\[HTTP]: HyperText Transfer Protocol.
\*\[HTML]: HyperText Markup Language.
\*\[CSS]: Cascading Style Sheets.
\*\[JS]: JavaScript.
\*\[OGraf]: An EBU backed specification for HTML graphics.
\*\[EBU]: European Broadcasting Union.
\*\[NDI]: Network Device Interface. IP-based video transport protocol.