Building with App Objects

What are app objects?

App objects are the user interfaces that make your Honeycode app come alive for users. They’re responsible for how your app looks and how users navigate their way around, as well how your data is defined, configured, and displayed.


Types of objects

As you gain more experience building, you’ll find that objects are super dynamic and have the potential to add serious power and flexibility to your apps.

Objects are categorized objects into three broad groups based on how they can be used: data & display, user inputs, and layout. Let’s cover some simple descriptions of the what, why, and how of each app object.


Data and display

In this category you will find objects that can be used to show large amounts of data on a screen; most of the data is not editable by app users.

Lists

A list is a parent container that shows data from every row, or a subset of rows, in a table.

  • A list does not need to be nested inside another container
  • Lists hold other objects, including data cells, content boxes, buttons and segments
  • Stacked and column lists have some preset layouts and features that you can customize
  • Blank lists let you to configure the list from scratch

Blank block

A block is a parent container that holds other objects and can display data from a single table row.

  • A block does not need to be nested inside another container
  • Blocks can hold other building blocks, including data cells, content boxes, buttons and segments

Lists vs. Blocks

Both are parent containers that can hold other app objects, like content boxes, data cells, buttons, and segments. So, you might ask, how do I know which one to use? Check this article out for more.

Form

A form lets users input and submit information. In Builder, forms come with preconfigured input fields and labels to simplify building.

  • A form is a preconfigured block; it doesn't need to be nested inside another container
  • You can change and customize forms in Builder

See our how-to to build a form from scratch.

Button

A button is a UI object commonly used to trigger an action.

  • You can set actions for a button, e,g., navigate users to another screen or submit form data

Content box

A content box allows you to manually add a variety of free-from content, like text, formulas, functions, and even emojis

  • Visibility conditions can be added, so that the content box will be only displayed if the condition is true
  • You can also add actions to a content box, e,g., navigate user to another screen if they click on the content

Data cell

A data cell lets you show data from a table, either as a direct reference or from an expression.

  • You can make data cells editable so your users can add or edit data
  • Visibility conditions can be added, so that the data cell will be only displayed if the condition is true

See our article and how-to on data cells.


User inputs

Objects in this category allow you to insert editable fields into your app. These inputs allow your users can edit to update table or app data.

Column

Adds a table column from your selected table to a list or block.

Editable Column

Adds a table column from your table that's preconfigured so to be editable by app users.

Other inputs

All of these objects are preconfigured with a variable data cell that lets users edit values in your app. Other inputs include:

  • Input fields
  • Data & time fields
  • Number, percentage & currency fields
  • Picklists (dropdowns)
  • Contacts

Layout

Layout objects impact the look and user flow of your app. You can use them to cluster groups of related data together, or you can use them to add visual blank space in your app screen for a clean UI.

Check out our articles on design tips for type, color and layout and styling basics.

Segment

Segments act as a layout container for other objects.

  • Can hold formulas, filters, and functions
  • Segments can also serve as a spacer to create visual blank space in an app screen

Screen

Adds a mobile or web screen to the app.


Object properties

The properties panel is where you’ll add logic to your objects. You can open the panel by clicking on an object.

Objects in an app have three main properties: Data, Display, and Actions. The properties panel will show only relevant properties based on the object you’ve selected.

Some objects properties include:

  • Data source: Use this when you want to bind data from your tables to the building block
  • Visibility conditions: Only show a building block and its content when a condition is true
  • Navigation: Use this to direct users to a new screen, or pass a variable to another screen

The properties panel will show only relevant properties based on the object selected.


Editing & resizing objects

Builder makes is easy to arrange—and rearrange—the layout of your app screens. Simply click and drag to resize segments, content boxes, data cells, and buttons. You can also easily drag and drop objects to get the look you want.

Move Resize App Objects_GIF

How-to add objects to your app

Click here to view the step-by-step how-to.

Was this article helpful?
  • Yes
  • No

0 voters

1 Like