Aligning fields

Aligning fields horizontally or vertically

In Developer Studio, you can align the fields on a form horizontally or vertically.

To align fields horizontally

1. Select two or more fields.
   The other fields' size are aligned to the last field you select, the alignment field.
2. Select the appropriate command from the Layout > Align Fields menu:
   • Align Left—Moves the other fields so their left edges are aligned with the left edge of the alignment field.
   • Align Right—Moves the other fields so their right edges are aligned with the right edge of the alignment field.
   • Align Value Left—Moves the other fields so the left edges of their data entry regions are aligned with the left edge of the data entry region of the alignment field.
   • Align Value Right—Moves the other fields so the right edges of their data entry regions are aligned with the right edge of the data entry region of the alignment field.

To align fields vertically

1. Select two or more fields.
   The other fields' size are aligned to the last field you select, the alignment field.
2. Select the appropriate command from the Layout > Align Fields menu:
   • Align Top—Moves the other fields so their top edges are aligned with the top edge of the alignment field.
   • Align Middle—Moves the other fields so their horizontal midlines are aligned with the horizontal midline of the alignment field.
   • Align Bottom—Moves the other fields so their bottom edges are aligned with the bottom edge of the alignment field.

Aligning fields with the grid

Use a grid to align fields precisely along a network of lines. Setting the grid width and height to 10 should allow you enough control to align the fields in your form precisely.

Use commands on the Layout menu to set up and display the grid and enable grid alignment. Displaying the grid and enabling grid alignment are independent operations. You can use grid alignment with no grid visible or show the grid without using it for alignment.  

Grid alignment is only active when you drag fields to position them in the form view. It is not active when you use the alignment commands or the other methods described in Positioning fields below.

To set up the alignment grid

1. To set the spacing of the grid lines, select Layout > Grid Size, and enter the horizontal and vertical space in pixels between grid lines in the Set Grid Size dialog box.
   Valid values are 2 to 100 pixels. The default value is 25 pixels.
2. To display or hide the grid, select Layout > Show Grid.
   The grid spacing and visibility are saved in the workspace when you exit and restored when you start Developer Studio.

To enable or disable grid alignment

1. To enable horizontal grid alignment, select one of the following options from the Layout > Align to Grid menu:
   • None—Disable grid alignment.
   • Left—Align the left edge of the field label with a vertical grid line.
   • Value Left—Align the left edge of the field data entry region with a vertical grid line.
   • Right—Align the right edge of any button associated with the field with a vertical grid line. If there is no button, align the right edge of the field data entry region.
   • Value Right—Align the right edge of the field data entry region with a vertical grid line.
2. To enable Vertical grid alignment, select one of the following options from the Layout > Align to Grid menu:
   • Top—Align the top edge of the field with a horizontal grid line.
   • Bottom—Align the bottom edge of the field with a horizontal grid line.
3. To disable grid alignment, select Layout > Align to Grid > None.
   The state of grid alignment is saved in the workspace when you exit and restored when you start Developer Studio.

To align fields to the grid

• Drag selected fields to the correct position in the form view.
  The alignment field is aligned to the grid according to the selected options. If other fields are selected, they move with the alignment field and keep their positions relative to it. They are not necessarily aligned to the grid.

Positioning fields

Position fields in a form view by dragging them, by using the arrow keys, or by setting their position properties. You might want to zoom the display to help you position fields precisely.

To zoom the display of the form view

• To display the fields larger, select Layout > Zoom In.
• To display the fields smaller, select Layout > Zoom Out.

To position fields by dragging

1. Select one or more fields.
2. Drag the fields to appropriate position in the form view.
   To move the fields only horizontally or only vertically, hold down SHIFT and drag.
   If grid alignment is enabled, the alignment field snaps to the grid. The other fields move with the alignment field and keep their positions relative to it.

To position fields using the arrow keys

1. Select the fields to move.
2. Press and release the period key once.
   The mouse pointer changes to a four-way arrow resize mouse pointer shown in the following figure.
3. Press the arrow keys to move the fields.
4. Press and release the period or Enter to complete the move, or press Escape to cancel the move. 
   

To control how far the fields move for each press of an arrow key

1. Select Window > Preferences.
2. Expand Developer Studio, and click Form.
3. In the Keyboard Move Step Size field, type the number of pixels for the fields to move for each press of an arrow key.
4. Click OK.

To get help aligning field when you position them

1. Select Layout > Snap to Geometry.
2. Start to position fields by dragging or using the arrow keys.
   As the fields move in relationship to other fields in the form view, blue lines appear when edges or centers of the fields align.
3. Position the fields when the lines indicate the relationship you want.
   If both the grid alignment and Snap to Geometry are enabled, you can drag fields to field geometry positions that are not aligned with the grid lines.
4. Select Layout > Snap to Geometry again to exit Snap to Geometry mode.

To move all fields in a form view proportionally

1. Select Layout > Expand.
2. In the Expand dialog box, type the percentage to change the horizontal and vertical positions of the fields.
3. Click OK.
   All the fields are moved with respect to the left edge and top edge of the form view by the factors you specified. A percentage less than 100 moves the fields closer together and to the left or up. A percentage greater than 100 moves the fields farther apart and to the right or down.

To position fields by setting properties

1. Select the fields to move.
2. In the Properties tab, set the X or Y property to the correct values.
   The values are changed for all fields. If you set both X and Y, the fields are positioned stacked in the same location in the form view.
   This is an example of setting common field properties.

To reorganize overlapping fields in Developer Studio

You can reorganize overlapping fields in Developer Studio by clicking Apply Auto Fit.  

Automatically aligning fields in progressive views

When you drag fields except the Button field and the Flow Panel Holder field onto a form in a progressive view, Developer Studio automatically aligns the fields to the left and to the correct position at the top with respect to other fields.

The following video (3:50) provides a summary of how automatic alignment of fields happens in progressive views in Developer Studio:

 https://youtu.be/_JhOoLN2agY

Automatic alignment of fields in the Base Development Mode

In the Base Development Mode, when you drag a field onto a form, it gets automatically aligned to the left. For example, the following image shows a Character field, a Date/Time field, and a Date field that are automatically aligned to the left. 

If you drag a new field in between two fields, for example, an Integer field in between the Character field and the Date/Time field, the location of the Character field doesn't change. However, the locations of the Date/Time field and the Date field change. This is because when you drag the Integer field, the Display properties of the Date/Time field and the Date field are affected. Developer Studio automatically aligns the affected fields. If you drag a new field in between the Date/Time field and the Date field, the Display properties of only the Date field are affected. And if you drag a new field below the Date field, the Display properties of none of the fields are affected.

Automatic alignment of fields in the Best Practice Customization Mode

In the Best Practice Customization Mode, if you want to modify the Display properties of a field on an Out-Of-The-Box (OOTB) form, you must create a view overlay. However, if you want to modify the database properties of a field on a form, you must create an overlay of the field. That is, you must first create a view overlay and then add the field to the view overlay.

To create an overlay, right-click a field and from the shortcut menu, select Add Field To View Overlay.

This action creates an overlay of the view also. If you move a field or add a field on the form at this stage, you get the following message:

If you click Cancel, the field is not automatically aligned.

However, if you click OK, the field is automatically aligned and the affected field (the Date field) is also added to the view overlay, which you haven't customized.

The only validation applicable in this case is that based on your input, whether the non-custom field is added to the view overlay or not. The validation is not applicable when you add a new field to the form and when that field does not affect any other field on the form.

You need to add only a base field to a view overlay. You don't need to add a custom field to a view overlay. 

To remove a field from the view overlay, right-click the field and then select Remove Field From View Overlay. This action places the field at its original position on the form.