#PowerPlatformTip 84: 'Tabbing in Dynamic Forms'

TL;DR: In a gallery-based dynamic form, bind the gallery to Sequence(CountRows(colFields)) instead of colFields. Read each field with Index(colFields, ThisItem.Value) and write it back with Patch(colFields, Index(colFields, ThisItem.Value), {FieldValue: Self.Text}). The gallery’s Items no longer change while the user types, so Tab moves from field to field again.

💡 Challenge

A dynamic form renders its fields in a gallery, one row per field from a collection, with a text input in the template. Every OnChange patches the collection, and the same collection is the gallery’s Items. So the gallery’s data changes on every edit, the gallery refreshes its rows, and the input that should receive the focus next loses it. Users see flicker and Tab jumps to the wrong place or nowhere.

✅ Solution

Give the gallery a source that does not change when the data changes: a list of row numbers from Sequence(). The template reads and writes the actual field record by its position with Index(). Edits still go into the collection, but the gallery’s Items stay the same.

🔧 How It’s Done

The form schema sits in a collection, for example:

ClearCollect(colFields,
    {Label: "Name",    FieldValue: ""},
    {Label: "Company", FieldValue: ""},
    {Label: "Email",   FieldValue: ""}
)

1. Bind the gallery to a sequence.

🔸 Gallery Items:

Sequence(CountRows(colFields))

🔸 Sequence() returns a table with one column, Value, containing 1, 2, 3.

2. Read the field by its position.

🔸 Label in the template, Text:

Index(colFields, ThisItem.Value).Label

🔸 Text input in the template, Default:

Index(colFields, ThisItem.Value).FieldValue

3. Write the value back on change.

🔸 Text input, OnChange:

Patch(colFields, Index(colFields, ThisItem.Value), {FieldValue: Self.Text})

🔸 These three properties, Items, Default and OnChange, are the only ones that connect the gallery to the changing data. Layout and styling in the template stay as they are.

4. Alternative with UpdateIf.

🔸 If your schema has a unique key column, for example FieldId, you can write back with UpdateIf(colFields, FieldId = Index(colFields, ThisItem.Value).FieldId, {FieldValue: Self.Text}). Both variants change the collection, not the gallery’s Items.

5. Know when a gallery isn’t the right tool.

🔸 For a small, fixed set of fields known at design time, place individual controls and toggle their Visible property from the schema. You lose “add a field without touching the app”, but you get the native Tab order for free. Use the Sequence() pattern when the number of fields is really dynamic.

🎉 Result

Users type into one field, press Tab, and land in the next field, without flicker, while every value still ends up in the collection.

🌟 Key Advantages

🔸 Stable Tab order: the gallery’s rows stay the same while the user types.

🔸 No flicker: the gallery does not refresh on every keystroke.

🔸 Targeted fix: only Items, Default and OnChange change.

🔸 Same data model: the collection keeps holding the values, ready for submit.

🎥 Video Tutorial

🛠️ FAQ

1. Why does directly binding a gallery to a collection cause tabbing issues?

The OnChange patches the collection that is also the gallery’s Items. The gallery reacts to the changed data and refreshes its rows, and the focus that Tab relies on gets lost.

2. How do I determine the correct sequence length?

Sequence(CountRows(colFields)) creates exactly one row number per record in the collection. If the schema changes at runtime, the formula follows automatically.

3. When should I use UpdateIf instead of Patch?

When the schema has a unique key column. UpdateIf() updates the record that matches the condition; Patch() with Index() updates the record at that position.

🔗 Related Tips

🔸 Power Apps Dynamic Form Schema: Add Controls on the Fly - the schema-driven gallery form this Tab-key fix applies to.

🔸 #PowerPlatformTip 80: ‘Rapid Dynamic Forms with AI’ - generate that same gallery-bound form schema with AI instead of by hand.