- Overview
- General recommendations
- Administration forms
- Document forms
- General problems and solutions
- Aligning radio buttons and checkboxes with text boxes
- Aligning text boxes with hyperlinks
- Wizards
- "Comment" tab
- Form layout changes introduced in 1C:Enterprise 8.3.7
Overview
1C:Enteprise versions 8.3.7 and later feature a new algorithm for the automatic arrangement of managed form items. It generates better form layouts and provides new form item placement options. Changing some form item properties, which include item visibility, group state (expanded or collapsed), and "view status" form item addition visibility, no longer initiates server calls. The automatic generation of form separators is based on different rules. The algorithm also provides other improvements. For a detailed description of the new algorithm, see 1C:Enteprise documentation. A form preview for a variety of screen resolutions and orientations is available in the managed form editor.
For the ChildFormItemsGroup system enumeration, the HorizontalIfPossible value is implemented.
The following properties are implemented for managed form field extension for a label field, text box, picture field, spreadsheet document field, text document field, formatted document field, calendar field, progress bar field, track bar field, chart field, Gantt chart field, dendrogram field, geographical schema field, HTML document field, graphical schema field, period field, planner field, and managed form items of table, decoration, and button types:
- AutoMaxWidth
- MaxWidth
- AutoMaxHeight
- MaxHeight
The following properties are implemented for managed form items of Form, Group, and Page types:
- HorizontalSpacing
- VerticalSpacing
- ItemsAndTitlesAlign
- ChildItemsHorizontalAlign
- ChildItemsVerticalAlign
The following properties are implemented for managed form fields of Field, Table, Decoration, Group, Button, and Addition types:
- GroupHorizontalAlign
- GroupVerticalAlign
The following properties are implemented for "search string", "search control", and "view status" managed form item addition extensions:
- AutoMaxWidth
- MaxWidth
For managed form groups, the ThroughAlign property is implemented.
For the VerticalFormScroll system enumeration, the UseWithoutStretch value is implemented.
For managed form group extension for a group, the United property is implemented.
For managed form group extension for a page, the VerticalScrollOnReduceSize property is implemented.
These changes are not available in 1C:Enterprise 8.3.6 compatibility mode.
The HorizontalStretch and VerticalStretch properties are implemented for the following objects: managed form extensions for graphical schema field and HTML document field, and managed form buttons. For "search control" managed form item addition extension, the HorizontalStretch property is implemented.
General recommendations
- Remove all redundant alignment settings:
- Decorations used for stretching
- Fixed width or height
- Other items that were added to improve alignment
- Preview the form with redundant settings removed.
- Use two display resolutions: 1024x768 px and a better one (for example, 1680x1050 px).
- If the form layout requires correction, correct it using as many default 1C:Enterprise 8.3.7 settings as possible.
Administration forms
PROBLEM:
Columns within a group are not aligned. This adds a horizontal scrollbar at screen resolution 1024x786:
Click the picture to enlarge it
SOLUTION:
For each group tooltip, set the AutoMaxWidth property. We recommend that you also set Height to 0. (Some developers used the Height property to ensure the correct display of tooltips in the Taxi interface and in managed applications. This is no longer necessary):
PROBLEM:
Even after setting the correct value for the AutoMaxWidth property, columns in consolidated groups are not aligned:
Click the picture to enlarge it
SOLUTION:
For all group tooltips, set HorizontalStretch to Yes.
RESULT:
Click the picture to enlarge it
Document forms
We will describe some of the problems and solutions using a Sale document as an example. The document forms have a lot of issues related to interface optimization.
PROBLEM:
Footer attributes are not aligned properly, the totals line gained a left indent:
Click the picture to enlarge it
SOLUTION:
Disable the AutoMaxWidth property of the Totals group.
Click the picture to enlarge it
PROBLEM:
1. Most of the attributes on the "Custom data" tab are aligned correctly. But the last two fields ("Sale type" and "Shipping agent") need a fix.
2. It is recommended that you avoid setting field width as numbers.
Click the picture to enlarge it
SOLUTION:
- Width: 0
- AutoMaxHeight: Yes
- HorizontalStretch: Auto
In the Taxi interface the default field width with these settings is 40 units. The horizontal group fields are aligned automatically based on the screen resolution and their width never exceeds 40.
Click the picture to enlarge it
General problems and solutions
General solution
Migration to 1C:Enterprise version 8.3.7 or later often uncovers issues that do not have step-by-step solutions. These issues are caused by combinations of several attribute fields. We recommend that you use the general solution for aligning form items. We will describe this solution in the example of the Sales document form.
PROBLEM:
1. Sometimes the attribute alignment on a tab (the "Main" tab in this example) affects the attribute alignment on another tab.
In the Sales document form, if attribute properties (for example, field width) differ on different tabs, the fields might be displayed incorrectly.
All fields on the "Custom data" tab have property values that are default for 1C:Enterprise version 8.3.7.
And the fields on the "Main" tab have custom property values specified in an earlier 1C:Enterprise version:
- Width = 28
- VerticalStretch: No
These fields are displayed incorrectly in Designer.
Click the picture to enlarge it
When you open the form in 1C:Enterprise mode, fields on both tabs are aligned correctly. But when you switch from the "Main" tab to the "Custom data" tab and then back, the fields on the "Main" tab are no longer aligned with their titles:
Click the picture to enlarge it
Assigning the "Left" alignment to the titles does not help because the fields still lose their alignment after switching between the tabs:
Click the picture to enlarge it
SOLUTION 1.
It is recommended that you use the settings that are the default for 1C:Enterprise version 8.3.7.
However, in Designer (and sometimes in 1C:Enterprise mode) vertical separators will appear between the columns of horizontal groups.
Click the picture to enlarge it
To eliminate this issue, for all subgroups of the horizontal group, disable the
"Consolidated group" property.
RESULT:
Click the picture to enlarge it
Click the picture to enlarge it
TIP
Regardless of the values of the TitleLocation property of form fields (Auto or Left), we recommend that you preview the form with different screen resolutions in Designer:
SOLUTION 2
If you cannot use the default property values for any reason, we recommend that you specify field width as numbers on both tabs.
However, using the standard width settings in the Taxi interface sometimes does not help to fix the alignment.
To eliminate the issue, we recommend that you use the following width settings:
RESULT:
Click the picture to enlarge it
TIP
If you use the alignment parameters that are the default for 1C:Enterprise 8.3.7 for the Comment field, the resulting field width is insufficient:
Click the picture to enlarge it
To display the Comment field with its original width, we recommend that you use the settings provided in the previous tip:
PROBLEM:
After you turn the compatibility mode off, an empty space appears between the pages of some complex forms, while the page separator is missing:
Click the picture to enlarge it
SOLUTION:
Remove the fixed height. In 1C:Enterprise version 8.3.7, the recommended height is 0.
Click the picture to enlarge it
PROBLEM:
After you turn the compatibility mode off, icons attached to fields are aligned with the top field borders, regardless of the "Auto" property value:
Click the picture to enlarge it
SOLUTION:
It is recommended that you set the GroupVerticalAlign property to Center for each group that contains an icon.
RESULT:
Click the picture to enlarge it
PROBLEM:
We will use the "Sales plan by product" form to illustrate the issue. Let us take a close look at the header attributes, which are divided between the left and right blocks. You can see that the fields of the left and right blocks are not aligned:
Click the picture to enlarge it
Click the picture to enlarge it
SOLUTION:
To solve the issue here and in similar scenarios, disable the "Consolidated group" property of groups. Nested groups might stretch a nonconsolidated group vertically. Therefore, you have to disable the "Consolidated group" property for the nested groups as well. (You do not have to edit this property for horizontal attribute groups):
RESULT:
Click the picture to enlarge it
PROBLEM:
Many forms designed for 1C:Enterprise version 8.3.6 used "stub" decorations. For example, to align the "Foreign contractor" checkbox with the button, there is a decoration item between the "RRC" field and the "Foreign contractor" checkbox.
SOLUTION:
In 1C:Enterprise version 8.3.7 you do not need decoration. Instead, disable the "Consolidated group" property for the "TINGroup" and "RRCGroup" groups and add a parent "TINRRCGroup".
RESULT:
The same layout without extra decorations:
PROBLEM:
You still need decorations to add horizontal indents for subordinate checkboxes. But in the Taxi interface the decorations are too narrow:
Click the picture to enlarge it
SOLUTION:
Set the decoration Width to 2.
Click the picture to enlarge it
TIP FOR USING DECORATIONS
It is recommended that you refrain from using decorations in favor of new properties available in 1C:Enterprise version 8.3.7: AutoMaxWidth (for attributes), "Consolidated group" and "Through alignment" (for attribute groups).
In the previous 1C:Enterprise versions, to align some attributes with the left border and some other attributes with the right border, developers used decorations with HorizontalStretch = Yes.
1C:Enterprise versions 8.3.7 and later display such attributes correctly.
One of the rare scenarios that still require decorations features subordinate checkboxes with horizontal indents. There are no other tools for adding the indents.
PROBLEM:
In 1C:Enterprise 8.3.6, developers used decorations as titles to align fields in scenarios where the desired alignment could not be achieved with the standard 1C:Enterprise tools. After removing the compatibility mode, attribute titles that are actually decorations are not aligned:
Click the picture to enlarge it
Now there is no need to use decorations as titles. New 1C:Enterprise 8.3.7 tools align attributes and attribute groups automatically.
Click the picture to enlarge it
SOLUTION:
To eliminate title alignment issues, remove all decoration titles and assign standard titles to all attributes.
PROBLEM:
1C:Enterprise 8.3.6 featured horizontal and vertical groups.
1C:Enterprise 8.3.7 provides the third option for arranging group items: "Horizontal if possible". This is the default option for new groups.
This affects the form layout in different screen resolutions:
Click the picture to enlarge it
SOLUTION:
If you do not need to develop forms for multiple screen resolutions, we recommend that you do not use the "Horizontal if possible" property. This ensures that the form layout cannot change significantly.
Aligning radio buttons and checkboxes with text boxes
PROBLEM:
In 1C:Enterprise 8.3.6, developers used decorations to adjust the horizontal positions of text boxes aligned with radio button fields. The text box height was equal to the radio button height:
In 1C:Enterprise 8.3.7, text boxes and radio buttons have different heights and using decorations for adjusting horizontal positions is no longer efficient.
SOLUTION:
To fix the alignment, split the radio button field into individual items and combine each item-and-text-box pair into a horizontal group:
PROBLEM:
Many forms have text boxes next to radio buttons and/or checkboxes. The item alignment algorithm implemented in 1C:Enterprise 8.3.7 does not always align them properly. In the example below the field titles are not aligned:
Click the picture to enlarge it
SOLUTION:
Disable the "Consolidated group" property for the attribute groups.
Click the picture to enlarge it
Aligning text boxes with hyperlinks
PROBLEM:
In this example links to measurement units are not aligned with text boxes:
SOLUTION:
Create individual horizontal groups for each text box-link pair:
Wizards
PROBLEM:
After you remove the compatibility mode, the layout or wizard pages might require corrections.
The layout changes due to the addition of AutoMaxWidth and AutoMaxHeight properties. They make the entire form more narrow, which can break the alignment of form items.
SOLUTION:
To restore the original layout, disable the AutoMaxWidth property for labels.
Click the picture to enlarge it
TIP
Wizard page layouts are not regulated by usability standards.
It is recommended that you disable the AutoMaxWidth property, which is enabled by default, only for items that are not aligned properly.
"Comment" tab
PROBLEM:
After you remove the compatibility mode, the comment field width on the "Comment" tab changes to the default value (40). This AutoMaxHeight property that is enabled by default causes this change.
Click the picture to enlarge it
SOLUTION:
To restore the original field size, disable the AutoMaxWidth property.
Click the picture to enlarge it
Form layout changes introduced in 1C:Enterprise 8.3.7
This section describes the form layout changes that take effect when you remove the compatibility mode.
Contact information forms
The layout of contact information forms changes significantly. Most of the extra alignment parameters are eliminated, the number of generated items is reduced, and the default text box title position is left (this change is not related to 1C:Enterprise 8.3.7).
However, the new default address field width is insufficient. The width should be increased to 50-60.
Click the picture to enlarge it
Administration panels
Administration panels usually have two columns. In 1C:Enterprise 8.3.6, developers used a fixed width to align the columns.
Disabling the "Consolidated group" property reduces the margins between groups. The form now looks more compact.
Click the picture to enlarge it
Checkboxes
The indents between checkboxes and their titles changed.
Click the picture to enlarge it
Next page: Autonumbering