Skip to main content

App Builder

The App Builder allows users to quickly and easily compose elements from the Logic View into an interactive, beautiful web app that anyone can use.

The first time you navigate to the App Builder in a project Hex auto-generates an app based on the contents of your Logic view. You can add, remove, reposition, and resize elements to customize the layout of your app.

If you prefer to start building from scratch, select the Remove all elements option from the Reset dropdown menu at the top of your app.

tip

You can undo a change to the App Builder at any time, including removing all elements or resetting to the default layout.

Customize your app​

You can drag-and-drop elements from the left-hand Outline panel using the drag handle to its right. Alternatively, you can use the Add to app button on each element.

Dragging​

When dragging an element, the gray dashed outline shows existing rows. You'll also see a preview of where the element will be positioned upon dropping.

You can add elements:

  • To a new row
  • To an existing row
  • As a column within an existing row

Resizing​

When elements are added to a existing row Hex will split them proportionally until you've customized the size of an element in that row. At any time, you can adjust the size of elements by clicking and dragging the blue circles that appear on the edge of elements.

Row-level actions​

You can perform actions on entire rows of elements to modify the layout of your application.

Equal distribution & size

  • If you've customized the width of elements in a row and wish to return to a more standardized layout, click the distribution icon that appears when hovering over a row. This will evenly distribute and resize the elements in a row.

Move row

  • You can move an entire row with all of its elements up and down in your application by clicking and dragging the move row button that appears when hovering over a row.

Element display options​

When adding python or SQL cells to your app, there are 3 options in the cell menu to customize how the cell appears in the app.

  • Source: only show cell source code
  • Output: only show cell output
  • Source and output: show both cell source code and output

Reset actions​

At any time, you can return to the default autogenerated app layout, or remove all elements. From the Reset dropdown you can select the following options:

  • Remove all elements: Removes all elements from the app builder, allowing you to drag and drop onto a clean slate.
  • Reset app to default: Resets your app to include the all default elements in linear order (Markdown, Text, Chart, Map, Single value, Table display, and Input cells).

On this page