Building views

 

The Edit and Show view patterns use a drag-and-drop Builder to configure their views. You can create flexible layouts for Forms or Show rows in the database.

Edit builder

There are four key areas in the builder:

  • The main canvas is the middle area, surrounded by a stitched border. This shows the elements in your current view. Click on elements to select them. The outline of the selected element is blue. 

  • The toolbar panel on the left holds the elements that you can drag into the main canvas.

  • The layers panel is at the top right. Because some elements can contain other elements, the elements in the view will be arranged hierarchically in layers. 

    • Use the small arrow to the right of the element to expand or collapse the elements inside that element.

    • Use the layers area to select items that are difficult to select by clicking in the main canvas.

  • Below the layers is the settings panel for the currently selected element. The settings depend on the element itself.

Add an element

Select the element from the toolbar and drag it into the main canvas. A green line, vertical or horizontal, will appear where the element will be dropped. You can place some elements 

  • next to each other (inline display)

  • above or below other elements (block display)

Move or Place elements

There are 4 ways to move or place elements. 

 

  • Drag and drop

  • Block display

  • Break 

  • Layers

 

Drag and drop

You can move the element in the canvas by selecting and dragging to a new location. 

 

Block display

If you want an element to be on a line by itself, select Block display from the Settings panel. This moves an element to be on a separate line inside its current container. In block display, nothing can be next to the element.

 

Break

Drag and drop the break element from the Elements panel into the canvas. This creates a line break between elements. 

 

Layers

Drag and drop elements within the Layers panel. This is useful when you are building Cards or moving elements between columns or tabs. If elements are nested (one inside the other) you can open and close the top level elements using the arrow.