Parent | Child | Previous | Next
 

Free-form Layout

Description

Wraps a selected set of controls in a free-form layout defined using HTML.

Discussion

The Free-form Layout can be used to position controls on a UX Component using HTML. To embed a control in a Free-form Layout on the UX, the control must be hidden. A control can be hidden by checking its Hide property.

images/freeformHide.png

When a control is embedded in a Free-form Layout control, the HTML that is generated for that control is embedded into the layout. Controls that can be placed in the [Free-form layout] will be shown in the toolbox in the Freeform Edit Region dialog. Double-clicking an item inserts it into the layout. Any HTML can be used to define the layout. EG:

<table>
    <tr><td>{firstname}</td><td></td><td>{lastname}</td></tr>
    <tr><td>{city}</td><td>{state}</td><td>{zip}</td></tr>
    <tr><td></td><td>{phone}</td><td>{email}</td></tr>
</table>
images/freeformLayout.png
Hidden fields are shown in a list on the left in the builder.
images/freeformLayoutPreview.png
The rendered result of the Free-form layout definition defined in the image above.

If the data you want to show in a free-form layout is from a List control, a free-form layout can be defined in the List control's definition or created using a FormView or ViewBox control. The ViewBox control is also a powerful tool for creating templates to display data in a UX Component.