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. Via the 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-menu-new2.png

Please Note: 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.  

add-component-in-column.png

When adding a component within a column, you can search for the data or system component you wish to add via the search bar or you can scroll down to select your desired data or system component.

ezgif-adding-components-gif.gif

Once you click on a data or system component, it will be added within the column. 

As a reminder, components are color-coded blue within the content tab of a page/layout, whereas columns are color-coded orange and rows are green.

Editing components

Once a data or system component is added to your page/layout, you can edit the component by double clicking it or by hovering over it and selecting the blue edit pencil icon. 

edit-component.png

A new window will open which will allow you to edit the component, including editing the component's fields, adding new fields, connected fields, links, filters, etc. to the component, and customizing the component with additional options. 

editing-component2.png

As each data and system component is unique with different editing options and features, we will discuss the editing settings for each component within its own article. Please see each data and system component's article to learn how to edit and customize each specific component. For the purpose of this article, we will continue to discuss the universal features of navigating all data and system components within your page/layout content, including how to move, copy, design, and delete components on a page/layout.

Moving components

Components can be moved from one column to another on a page/layout. To move a component, hover over the component's name and a cross arrow move icon will appear. Use the move icon to drag and drop the component to a new column of your choice.

move-components.png

 

Designing components

You can customize the design of components by hovering over the component you wish to customize, clicking its gear icon, and selecting the Design option.

designing-components.png

A new window will open will multiple tabs for you to use to customize the design of the component. These design tabs include Fonts, Background, Border, Spacing, and CSS.

component-design.png

Fonts tab

Within the Fonts tab, you can choose custom font styles to be applied to all values within this component. If you add custom fonts to your CSS you can enter those fonts to be used here.

Background tab

This is where you can customize the background of this component.

component-background.png

Border tab

This is where you can add custom borders to this component.

component-border.png

Spacing tab

This is where you can define custom margins and padding to be used for this component.

component-spacing.png

CSS tab

Feel free to enter custom CSS to further customize this component.

component-css.png

 

Copying components

You can copy and paste a component onto a different page within your app by hovering over the component, clicking its gear icon, and selecting the Copy option. Once you click Copy you will have the option to select the page onto which you would like to paste this component. 

copying-components-new.png

 

Deleting components

You can delete components from a page/layout by hovering over the component, clicking its gear icon, and selecting the Delete option.

delete-component.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.