Arranging Components in Columns Using LabeledFieldLayout

To arrange components in columns using labeledFieldLayout:

In the Design Structure Window of the desired file, locate the parent node in which you wish to insert labeledFieldLayout children.
In the Component Palette, select Layout Components from the dropdown list, and then drag and drop the labeledFieldLayout component to the parent node of your choice.
The labeledFieldLayout node is inserted and highlighted under the expanded parent node. The Property Inspector displays the properties of the new component.
In the Property Inspector, set the following attributes for the labeledFieldLayout component:
- columns - Enter the number of columns you desire in the layout. Default is one.
- fieldWidth - Enter the width of the field position in pixels or as a percentage of the layout.
- labelWidth - Enter the width of the label position in pixels or as a percentage of the layout.
- width - Enter the width of the total layout in pixels or as a percentage of the element the layout is in.
To insert a child component into labeledFieldLayout, drag and drop a component from the Component Palette to the labeledFieldLayout node, and then use the Property Inspector to set the attributes for the child.
Repeat step 4 to add additional indexed children as desired.

Tip: You can also right-click the labeledFieldLayout component and choose to insert inside the layout one of the preferred message form components.

Note: To use data binding, see Data Binding a Component Attribute.

Example (UIX XML)


...
<pageLayout>

  ...
  <labeledFieldLayout labelWidth="25%"
                      fieldWidth="80%"
                      columns="2"
                      width="80%" >
    <contents>
      UserName
      <textInput name="foo"/>
      Password
      <textInput name="foo" secret="true"/>
      Submit
      <submitButton formName="myform" text="Submit"/>
      Reset
      <resetButton formName="myform" text="Reset"/>
    </contents>
  </labeledFieldLayout>
  ...

  <!-- REST OF PAGE LAYOUT -->

<pageLayout>
...