Components Overview

What are components?

Components are interactive viewpoints you can add to your pages or layouts that empower users to add and interact with your data on the live app.

There are two types of components you can add to your pages and layouts: Data Components and System Components.

componenents.png

Data Components, including forms, calendars, charts, etc., are dynamic viewpoints that can be added to your pages for users to add, track, report, and automate your data on the live app. 

System Components, including, menus, logins, profiles, etc. can be added to your pages and layouts to enable users to navigate your live app and manage their user-related information. 

Each data and system component has its own unique features and settings, so we will explore each component within its own article within the following Data Components and System Components sections. 

For now, let's explore how to add, edit, move, copy, and delete components, all of which are universally applicable across all data and system components. 

Adding components

There are two ways to add a data or system component to a page:

  1. Add Component Menu
  2. Within a column

Add Component Menu

You can add a data or system component to a page by selecting the component you wish to add from the Add Component Menu located towards the top of the selected page's content. Simply click on the component you wish to add and it will be added to the page within a new row and column below the existing rows/columns.

add-component-menu2.png

The Add Component Menu is only available within pages, not within layouts. 

Within a column

You can add data and system components to a page or layout by adding them within existing columns on the page/layout. You can add a component to the top or bottom of an existing column by clicking on the +Add Component icon at the top or bottom of the column you would like to add the component to.  

 

Editing components

You can edit each data or system component by clicking on the component icon within its column. Clicking anywhere within the component box will open the editable options for that component. 

 

Moving components

A component must be added within a column, but once you add a component to a column it can be moved from one column to another. To move a component from one column to another, click on the blue cross arrow icon located on the menu bar of the component you would like to move and drag and drop the component to your desired column. 

drag-and-drop-components.png

When dragging and dropping a component to a different column, you will see a highlighted border directing you to where you can drop the component within its new column. 

drag-and-drop-components.gif

You can also click on the Move Up Arrow or Move Down Arrow icons located on the selected component's menu bar to move the component one level up or down

 

Copying components

You can copy and paste a component onto a different page within your app by clicking on the copy icon located on the selected component's menu bar. 

copying-components.png

 

Deleting components

You can delete components by clicking on the red trash icon located on the selected component's menu bar.

delete-table.png

 

Please be cautious when deleting components from your pages and layouts as deleted components can not be recovered. 

When deleting components that were used to add child pages via details links, edit links, or add new forms, please note that deleting these components will orphan those child pages. Meaning, deleting the component that linked and created the child page will not delete the child page, but it will delete the link/component that created the page.