In the template editor, input fields make parts of your design changeable. Not only texts and images: almost everything that has a value in the properties panel can get an input field. Here you'll see how this fits together and what to keep in mind.
Element, property, input field
Three things work together:
- Elements are the building blocks on the canvas: texts, images, shapes, paths, groups and masks.
- Properties describe what an element looks like: its text, its color, its position, whether it is visible. You see them in the properties panel as soon as you select an element.
- Input fields hand a property over to your users. Without an input field, a property has a fixed value. With an input field, users decide the value in the design generator.
Between an input field and a property sits a variable: a named value that the input field writes and the property reads. Expressions can use this value too. Users only see the input field, not the variable. Most of the time you don't need to think about it. It matters when one input field should control several properties (see below).
A property with an input field can no longer be changed directly in the properties panel. It is highlighted and shows the current value. When you hover over it, you'll find Edit Field and Delete Field.
What you can make changeable
Which field type fits depends on the kind of property:
| Property | Examples | Field types |
|---|---|---|
| Text | Content of a text (Content), link | Text, Text Selection |
| Image | Image of an image element | Image, Image Selection, Logo |
| Color | Fill color (Fill Color), stroke color (Stroke Color), shadow color, colors of a gradient | Color, Color Selection |
| Number | Position and size (X, Y, W, H), rotation, Opacity, Max Font Size, spacing | Number |
| On or off | Visibility, Wrap, Enforce Uppercase | Checkbox |
For texts, images and the colors of shapes, the Create Input Field tool suggests the right field type right away. You connect all other properties with Select Custom Property: you click the property in the properties panel and choose one of the field types that fit it.
Some properties can't get an input field, for example the font (Font Family, Font Style), the Crop Mode of images, flipping, and the switches that turn a fill, a stroke or an effect on and off. For effects, connect their values instead, for example the opacity of a shadow with a number input field.
Input fields without a property
Three field types don't belong to a property. They organise the form in the design generator:
- Instruction shows users a hint text.
- An input field group (Group) shows several input fields together under one heading.
- A Collection is a list that users add entries to themselves, for example for several speakers on a poster. It is meant for advanced templates.
You create them in the Input Fields view, not through a property.
What happens to the previous value
When you connect a property to an input field, its previous value becomes the input field's default value. In the design generator, users first see exactly what was in the design before.
If the property had an expression, Studio replaces it with its current result. The expression is gone afterwards. If you need it back, undo the step (Cmd + Z, on Windows Ctrl + Z).
One input field for several properties
One input field can control several properties, also in different elements. That way users change several shapes with one color, for example. Every new input field gets its own variable, though. To connect another property to an existing input field, enter its variable there as an expression. Variables explains how.
What happens when you delete an input field
When you delete an input field, you also delete its variable. Your elements stay: every property and every expression on the open canvas that used the variable keeps its last value as a fixed value. If your template has several canvases, check the elements on the other canvases. Delete an input field explains how, and what to check afterwards.
Input fields and canvases
If your template has several canvases:
- Input fields belong to the whole template. All canvases share the same input fields. Users fill them in once, and every canvas whose elements are connected shows the result.
- Elements belong to one canvas. When you connect an element to an input field on one canvas, the elements on the other canvases are not connected yet.
So the easiest way is to connect all input fields on the default canvas before you add more canvases. New canvases then take over the connections. For canvases that already exist, take them over with Sync from Default, see Canvases.