Knack Tip: Field Grouping on Form and Detail Views

Hey everyone, it’s Daniel from Knack here with a quick Knack tip. Today, I wanted to talk about field grouping on form and detail views.

Editing Field Layout in a Detail View

We’re working inside a warehouse manager app, and I’m going to edit the Inventory Purchase details view. I’ll open this view and start by adding some fields.

To add fields to your views, just drag and drop them. You can also simply click the fields, and they’ll be added in a single-column format by default.

If you want more control over layout, start with adjusting the layout options. Right now, we’re in a single-column view, but you can switch to:

• A layout with a narrow column on the left and wider column on the right
• A 50/50 split with equal-sized columns

As I add more fields, I can split them further. I can:

• Add a new row with its own column layout
• Create individual row-level splits
• Insert a new row above existing fields for better grouping

This creates a more dynamic and customizable field arrangement in the details view.

Working with Field Grouping in Form Views

Let’s move over to a form view. I’ll save these changes and open the Add Inventory Purchase form.

This form already has a few fields in a single-column layout. Just like with detail views, I can:

• Drag in new fields
• Use two- or three-column splits
• Drop fields above existing rows to separate sections

If you want a more organized form, you can break it up using static elements like titles and descriptive text.

Adding Static Elements and Dividers

Static elements are great for sectioning off your form or details view. You can add:

• A Title (e.g., “Section One”)
• A Copy block with descriptive text (e.g., “This is section one.”)

You can also add a Divider, which creates a horizontal line to visually break up different areas. This helps users navigate forms more easily. These elements are available in both form and detail views.

I’ll save these changes and let’s check out what this looks like live.

Viewing Changes in the Live App

After refreshing the live app, you can now see the updated Warehouse Manager app.

In the details view, we’ve created multiple columns and visual breaks. These layouts are flexible, so as you build more specific use cases, you can continue customizing with columns, headers, and dividers.

Let’s go back and look at the form as well.

In the Add Inventory Purchase form, you’ll see:

• The section title and description I added
• The divider separating the top section from the lower fields
• The multi-column layout at the bottom of the form

This kind of visual organization is simple to create and makes your forms much easier to use.

Wrap-Up

Alright, that’s it for today. Thanks for joining, and as always—happy building.