Elements Overview

What You'll Learn

In this overview, you'll discover the various element types available in Knack and how they function as the building blocks of your application. You'll learn how to add, edit, and manage elements effectively, giving you the skills to create dynamic pages that display your data exactly how you want it. Understanding elements is fundamental to creating an engaging and functional Knack application.

What are Elements?

Elements are the visual components that showcase data within your app. Think of elements as the building blocks that make up your Live App pages - like grids, maps, calendars, forms, and more. These components handle everything from displaying records to collecting user input.

When you're building your app, you'll work with element options in the Builder:

But your users will see fully rendered elements like this grid in the Live App:

Accessing Elements

You can access, edit, and add new elements by navigating to the "Pages" section in your Builder:

Element Types

Let's explore the various types of elements you can add to your pages, each serving a unique purpose:

Record Elements

Most elements work with specific tables from your database. When adding an element, you'll first select the element type, then choose which table you want to work with:

Record elements come in two main categories:

Single Record Elements

These elements focus on one record at a time:

• Form: Insert or edit a single record
• Details: Display a single record in a flexible layout

Multiple Record Elements

These elements display many records at once:

• Grid: Shows records in rows and columns - perfect for structured data
• List: Displays records in a more flexible layout - great for showing images
• Search: Shows records that match search criteria
• Calendar: Displays records with dates in a calendar view
• Map: Plots records with addresses on a map
• Report: Displays summary information and calculations

Many elements can be configured to show connected records. For example, on a Project details page, you might want to display "Tasks connected to this Project," or in a client portal, you could show "Invoices connected to the logged-in Client."

Static Elements

Unlike record elements, static elements don't work with a specific table. They include:

• Rich Text: Displays formatted text, images, and other content
• Link Group: Creates buttons or tabs that link to pages in your app or external sites

Reports

Report elements help you visualize data and perform calculations on groups of records:

Options include:

• Bar charts: Show calculations as bars based on a single grouping
• Pie charts: Display calculations as percentages of a whole
• Line charts: Plot calculations as lines over time or categories
• Area charts: Similar to line charts but with filled areas beneath the lines
• Pivot tables: Show calculations based on two groupings (rows and columns)

Managing Elements

Let's look at how to work with elements in your app:

Adding Elements

To add a new element, go to the Pages section, select your page, and click "Add Element" in the top toolbar:

This opens the element selector in the left toolbox:

For record elements, you'll need to choose which table's records the element will work with. If you're working on a page with a login, you can display records connected to the logged-in user.

Tip: If you don't see options like calendar, map, or payment, check if your table has the required field types. Calendars need date fields, maps need address fields, and payments need number fields.

Editing Elements

To edit an element, hover over it and click the pen icon or anywhere else on the element:

This opens the element editor in the left toolbox where you'll find various settings sections:

Note: Element edits aren't saved automatically - be sure to click "Save Changes" when you're done.

Copying & Moving Elements

You can reorganize elements on a page by dragging them using the cursor icon at the top left of each element.

To copy or move an element to a different page, click the ellipsis (...) icon and select "Copy" or "Move To":

Note: Elements can only be moved or copied to compatible pages that work with the same table or connected tables.

Deleting Elements

To remove an element, hover over it and click the trash icon:

Caution: Deleting an element also removes any child pages connected to it.

Element Names and Display

Elements have internal names in the Builder to help you identify them. Toggle the visibility of these names using the tag icon in the top menu:

You can also collapse or expand elements using the expand/collapse icon - helpful when working with pages that have many elements:

Troubleshooting

What fields can I add to my elements?

Each element lets you incorporate table fields through the Fields and Connections tabs:

I can't copy/move my element to another page

Elements can only be moved to compatible pages that work with the same table or connected tables.

Why can't I see all my fields in a new element?

By default, multiple record elements only show the first six fields from your table. Edit the element to add more fields.

Why can't I add a calendar or map element?

These special elements require specific field types in your table:

• Calendars need date/time fields
• Maps need address fields