Insert a Component

   MaestroThe UI design product.  |    Form Builder  |  All versions This feature is related to all versions.

Journey Maestro allows you to insert a component in a form using one of the following methods.

Insert a component using the Maestro editor

The insertion bar indicates a wide variety of possible insert locations by using different positions, sizes and shapes to represent the insertion point. The insertion point is represented by a selection area, which indicates the parent layout of the component, and an insertion bar which indicates its position to its siblings.

The insertion bar will appear either as a vertical or horizontal bar. A horizontal insertion bar will insert the component vertically between two other components, and a vertical bar will insert a component horizontally between two components.

If the insertion point is at the beginning or end of the list of siblings, then the component will be inserted regardless of the insertion points horizontal or vertical orientation. If the insertion point is vertical, and there is space for the new component to occupy within the layout, the new component will appear on the same line as an previously placed components. If there isn't sufficient space to accommodate the component, it will be placed on the following line.

Insert a component using the component hierarchy

Similar to the Maestro editor, an insertion point is displayed when you drag a component from the Palette panel to the View panel.

In the View panel, the insertion point appears as a triangle above, below or on the desired component if it's a container. You can change the insertion point while dragging by moving up and down the hierarchy. If the drag target is a component, the insertion point will appear above indicating the dragged component will be inserted before the drag target, and the same is true for below and after.

If the drag target is a container of other components, you can insert the component into the container by placing the insertion point on the drag target. Releasing the dragged component will add the component to end of the children. If you drag a component onto a container that is collapsed, the container will expand, displaying any children it contains, allowing you to navigate deeper into the structure without releasing the dragged component.

You can change any mistakes or misplaced components by simply dragging the component to the correct location. You can also use the Undo button, moving back the History or simply deleting the component and trying again.

Next, learn how to delete a component.