Placing components

A basic aspect of App Builder project design is the placement and configuration of components. When performing these operations, it is helpful to have an understanding of some key principles.

Basic placement of components is pretty straightforward: You simply click to select the component you want from the Components panel. After you select the component, and as you move your mouse pointer over a Flexbox a "shadow" image of the component appears inside the Flexbox to indicate where App Builder will place the component. When you click inside the Flexbox where you want to use that component, App Builder then automatically places the component at that default location.

It is often the case, however, that the default location is not exactly where you want to place the component. There are a few ways to modify things so as to place the component precisely where you do want it.

Note: These options typically apply only to "small" components. They do not affect (or are not available for) "large" components, because those components normally occupy the entire Flexbox into which they are placed.

Generally, you can use any of these options:

You can change the order in which components display within a Flexbox by clicking and dragging a component to a different position.
Virtually all components allow you to set margins around the component.
Some components allow you to add columns or use other properties to control their display. For example, suppose you have two components in a vertically oriented Flexbox, and you want to display two components side-by-side. Normally, App Builder stacks them one on top of the other. To display them side-by-side, you can add a column to the Flexbox and then place one of the components inside the second column.
You can use the Padding property, Alignment property, and other properties of the containing Flexbox to help determine where and how the component displays.
Other components, particularly tabs and tab panels, offer similar—and other—properties that you can use to control spacing and placement.
You can subdivide Flexboxes into rows and columns. This option offers a great deal of flexibility, as you can then set the relative width and height of each row and column to attain the layout you want.
Note: "Rows" and "columns" are actually Flexboxes within other Flexboxes, which makes their use extremely adaptable and flexible.