Connecting Properties to a Component Layout

A layout on its own is a static picture. Connecting (binding) an element to an active component property is what makes it show each item's own data. The picker is type-aware, so a board layout only offers board properties and a card layout only offers card properties.

The rule, in ShuffleKit's own words (the ⓘ How connecting works button in the Connect data panel):

Connect this to a column and every card fills it with its own value: connect a text box to Name and each card shows its own name.

Switch on Preview in the canvas header to see real card values; with preview off, elements show what you typed here.

Connecting an element

1. Open Design for the active collection.
2. Click the element on the canvas: the text block, the art frame, the icon strip.
3. Click the pill at the left end of the toolbar floating over the canvas. A dashed pill reading Connect data means "not connected"; a blue one shows the property name. A connected element also carries a blue pill at the front of its mini-toolbar, which opens the same panel.
4. In the Connect data panel, click the field's value (it reads Not connected until you pick something). On an unconnected element the first list opens by itself.
5. Pick a column. The list opens with the scope spelled out ("Changes all 16 cards using this layout"), up to three columns under a Suggested heading, then All columns. A Search columns box sits on top once more than 8 columns fit the field.

Under the connection, one line shows what it puts on the card. With Preview on it is the card on the canvas (This card: Whispering Woods, or Empty on this card); with Preview off it is the first card on this layout that has a value, named. A line below that counts the cards with nothing in the column and says what they fall back to. That is quick confirmation you picked the right property.

The pencil button beside the connected column (Rename column) renames that column without leaving the editor. Cards and layouts keep their data, since only the name changes.

Disconnect, at the bottom of the open list, breaks the connection and returns the element to its own content. Create "…", just above it, makes a new column of the right type and connects it in one step. It is named after your search text, or after the layer when the search is empty, and gets the type the field takes. The column already connected to that field has a tick beside it in the list.

The list works from the keyboard: focus starts in Search columns when the list has one, or on the list itself when it doesn't. The up and down arrow keys move through the rows, and Enter picks the highlighted one, including Create and Disconnect. Typing filters every column and hides the Suggested group and Disconnect.

The panel's pin button moves it into the right-hand panel, where it stays open as you select other elements. While it is pinned, the toolbar pill is hidden and the mini-toolbar pill only names the column.

For a first layout, wire the three common data paths separately: select a Text element and connect Text content to title, select an Image element and connect Image source to artwork, then select an Icon box and connect Icons to an Icon list property. The available field and the properties offered change with the element type, so an artwork property will not appear in a text field.

Colour fields (Fill color, Stroke color, Tint color and Text color) take a Color or Select column, and also an Icon or Icon list column. With an icon column they use the colour of the card's icon (the first icon, for an icon list), so one column can set both an icon and the colour of the shape behind it. An icon with no colour of its own leaves the element in its own colour. Suggestions never offer an icon column for a colour field; pick it yourself.

Other ways in

• Right-click menu. Right-click an element on the canvas and open Connect data ›. The submenu names the current column and lists each field (Text content, Text color and so on) as its own group of columns to pick from, with Disconnect under a connected field. When no column of the right type exists it offers New Text column (or Image, Color and so on) instead, and a toast confirms Connected to a new "…" column. A connection to a deleted or mismatched column shows greyed out with Missing or Wrong type.
• Layers panel. A layer's ⋮ menu has the same Connect data › submenu. On a renamed layer, clicking the blue column chip beside its name opens the same list directly.
• The typing hint. The first time you type into a text box that isn't connected, a note says "This text is the same on every card", with Connect to a column (opens the Connect data panel) and Got it. It appears once per person.

The right-click and Layers menus are quick pickers only. The sample line, the empty-card counts and the show/hide rule live in the Connect data panel.

For the full editor sequence, see Layout Editor: A Full Tour. For the property types that determine which bindings are available, see Properties & Columns.

Selecting the element

Click directly on the canvas, or pick it from the Layers panel. Layers is the more reliable route for elements sitting behind others.

Connected layers render in blue with a link icon (powers, Body, Title, Artwork above). Unconnected ones are plain (Subtitle, Divider, Panel, Background). A layer you have renamed keeps its own name and shows the column it reads in a small blue chip beside it. Scanning that list is the fastest way to spot something you forgot to wire up.

The coverage note in Layers

The header counter badge is gone. Coverage now shows as a note at the top of the Layers panel, and it only appears when something needs saying. It picks the most urgent case:

• Amber: "1 column this layout uses is no longer in your sheet: …", a connection to a column that was deleted or renamed. It names up to three columns and counts the rest.
• Strong amber: "This layout doesn't show any of your card data yet."
• Amber: "1 required property isn't on this layout: powers", required properties that no element on this layout uses. A column that a layout rule reads, such as Type, isn't counted, since choosing the layout is its job.
• Pale: "Showing 4 of 7 properties. Unused: …", optional properties this layout doesn't show.

See how replays a short walkthrough (the missing-column note doesn't have it), the x hides the note for this layout, and suggestion chips such as ability → Subtitle connect an unused property to the layer ShuffleKit thinks it belongs on in one click. The note only covers the first face (the front); a card back usually shows little of the card's data, so it isn't scored.

If the note reports a column that is no longer in your sheet, the layout is still holding a connection to a column that was renamed or deleted. The Connect data panel shows that field with the old column name and a Missing tag. Repair it by selecting the affected element, opening that field's list, and choosing the replacement column (or Disconnect). Then preview a few cards; the note going away confirms coverage, but only real card values confirm that the replacement has the right type and content.

The same warning in the spreadsheet

You don't have to be in the editor to see it. Under the preview in the Card Details panel, a one-line bar reports the same thing for the selected card's layout. Click it to expand:

1 required column is not connected to RPG Split: powers

with See how and Connect in editor → actions. Connect in editor → jumps to the Design tab with that layout loaded. A connection to a column that no longer exists reads "1 column no longer in your sheet" with Fix in editor →. A layout that shows none of your data reads "No card data connected yet" with Open editor →, once the layout has elements and some card has a value to show. Optional columns left off the card don't raise the bar at all; their column headers still mark them.

The count is per layout, so it changes as you click through cards. A space card using Tarot Portrait might report 2 required columns are not connected to Tarot Portrait: ability, powers while a living card on RPG Split reports only one.

The column headers carry the same information. The small link icon beside a column's name reads, on hover:

• On the card (blue link).
• On a hidden element, so not on the card, Shows or hides an element, not on the card itself, or Picks which layout a card uses, not on the card itself (grey link): the layout uses the column, but its value doesn't print.
• Required, and not on the card yet (amber warning).
• Not on the card yet (grey broken link).
• Not used by this layout (faint broken link), when the column's data only lives on cards another layout draws.

The column's right-click menu repeats the same status in a sentence at the top, naming the layout.

Connecting from the Data tab

You can connect without opening the editor at all:

• From the card preview. Hover the card in the Card Details preview and the element under the pointer is outlined; click it. A small panel opens, headed with the element's name and an Edit in Design link. When the element shows a Text, Number, Select or Image column, it starts with a row named after the column, such as Name on this card, where you change this card's value, option or picture. Under that, Column for all cards is the connection itself, and clicking it opens the same column list the editor uses. Labels appear only when there are two rows to tell apart, such as text and its colour. A second field that isn't connected yet shows as a link such as Connect text color until you connect it. From the keyboard, Tab to an element on the card and press Enter or Space. Escape closes an open list first, then the panel.
• From a column header. Click the link icon beside a column's name (or focus it and press Enter or Space). The panel reads Show "HP" on the card, names the layout (changes every card using it) and lists the elements that could show it: Shows it where it already does, with a Disconnect button; Replaces Attack where picking it would take another column off the card; or a reason such as From the template or Similar name. When nothing on the layout takes that type, it says Nothing on this layout shows a number column yet. Add a new layer for it, at the bottom, copies a similar element, connects the copy, and opens the editor with it selected so you can place it. The arrow icon in the panel's header opens the layout editor. For a column whose data only lives on cards another layout draws, the icon opens the editor instead of the panel.

When a column is used but not printed, the header panel says why: it shows on a hidden element, it only decides when an element shows, or it only picks which layout a card uses.

Every connection change made here applies to every card on that layout, and the toast (Connected "Title" to Name) offers Undo. If you only have view access, both panels say View only. An editor can connect this.; if another member is editing that layout, they say so and wait until they're done.

Why the warning matters

A required property that isn't connected is data you're typing into the spreadsheet that will never appear on the printed card. That's the single most common "why is my card blank?" problem, and it's exactly what the coverage note is there to catch.

Two legitimate reasons to leave one unconnected:

• The property is used only in conditions: Type drives layout selection but doesn't need to be printed. Its column header says so, but the coverage note still counts it as missing.
• The property is internal: designer notes, a balance score.

In both cases the honest fix is to turn Required off for that property, so the warning stops crying wolf. Reserve Required for things that must reach the card. A property read only by an element's show/hide rule already counts as used.

Fallback content

With preview off, a connected element shows its own content: the text you typed into the box, or the picture placed in the frame. That content can reach the printed card: a card whose cell for that column is missing entirely falls back to it and prints it; a cell that exists but is empty prints nothing. The Connect data panel counts both cases for you.

A connected text box with no text of its own shows the column's short name in braces ({ability} for an Ability column) on cards with no value. The export dialog lists those cards before you export and leaves the gaps blank, unless you tick Fill them with the column name instead for a proof. Turn on Preview mode to see real values, and step through several cards before signing off on a layout.

A working order

1. Define your properties in the spreadsheet first, and mark the printed ones Required.
2. Build or pick a layout.
3. Add elements roughly where they belong.
4. Connect each one, top to bottom in the Layers panel.
5. Keep going until the coverage note at the top of Layers goes away.
6. Turn on Preview mode and page through every card.
7. Repeat for each layout: connections are per layout, not shared.

That last point catches people out. Adding a new required property means revisiting every layout to connect it.