In Designer mode

Your configuration includes a default Services document form that you created in section Document form of lesson 4 using the form wizard (fig. 28.7).

 
Fig. 28.7. Services document form in the form editor

You can see that the document attributes and its tabular section are displayed in the order that matches the order of form attributes. This provides easy access to all of the document fields but the form lacks usability.

The form looks messy because there are too many fields and columns, and also too big, especially when its tabular section contains many rows.

You can improve the usability by focusing user attention on specific data groups and highlighting the most important data, grouping fields by their purpose, and making the form more compact.

Let us develop a new Services document form from scratch. During the form development you will gain or renew the knowledge of the following form development techniques:

  • Adding a main attribute to a form
  • Adding a form control linked to a specific attribute
  • Grouping form controls
  • Specifying group settings and making a group collapsible
  • Adding a pane with multiple tabs to a form
  • Adding a tabular section with conditional row highlighting 
  • Displaying a tabular section column total

Let us begin the form development.

  1. Open the configuration object editor for the Services document.
  2. On the Forms tab, click Add  (fig. 28.8).


    Fig. 28.8. Creating a document form
  3. In the document form wizard, click Generic form.
  4. In the Name field, enter FormForEditing (fig. 28.9).


    Fig. 28.9. Creating a generic document form
  5. Click Finish.

    This opens the form editor. You can see that the only controls available in the form are the command bar and the standard More menu. Since it is a generic form, you have to fill it with custom controls and custom data.
  6. On the Attributes tab, create an attribute named DocumentObject with DocumentObject.Service type and then, in the attribute properties, select the Main attribute check box (fig. 28.10).


    Fig. 28.10. Form editor window

    Once you specify the main form attribute, buttons for standard document operations (Post and close, Save, and Post) are added to the form preview.

    Also, the data of the DocumentObject.Services object becomes available for editing. You have to link this data to appropriate form controls. The simplest way to link is dragging the attributes to the form controls pane, which automatically writes the links to the DataPath properties of the form controls.
  7. In the Attributes pane, expand the DocumentObject item and drag the following attributes, exactly in this order, to the form controls pane: Number, Date, Warehouse, Customer, and Technician.

    For each attribute, a form control is added. The controls are arranged vertically and each control occupies a new row, just like in the form generated by the wizard (fig. 28.11).


    Fig. 28.11. Form editor window

    Let us group the form controls.

    First, let us group the standard Date and Number document attributes, highlight them with background color, and display them in a single row.
  8. In the form controls pane, click Add , select Group - Regular group (no visual presentation), and click OK.

    This group type suits our needs best because it is not highlighted (you will add custom highlighting later) and it does not have a title (fig. 28.12).


    Fig. 28.12. Adding a group to a form
  9. In the group property palette, in the Group list, select Horizontal, clear the EnableContentChange check box, and specify a background color (fig. 28.13).


    Fig. 28.13. Group property palette
  10. Drag the Number and Date fields to the group and move the group to the upper part of the form (just below the command bar).

    You can see the result of the changes in the preview pane at the bottom (fig. 28.14).


    Fig. 28.14. Form editor window

    The highlighted group catches the eye and both fields are located in the same row. By clearing the EnableContentChange check box you disabled the group customization in 1C:Enterprise mode. And the form looks more compact because two fields occupy a single row.

    Let us add detailed customer info to the form, such as address, phone number, or email. This block should be optional and collapsible. To make the form more compact, it should be collapsed by default.

    Adding attributes of a reference attribute to a form is very simple. The type of the Customer document attribute is a reference to the Customers catalog. So you can simply expand the Customer attribute and drag the attributes of the Customers catalog to the form.
  11. Drag the Address catalog attribute to the form controls window.

    Note that its data path is an expression that includes a dot: DocumentObject.Customer.Address.
  12. Move the Warehouse field to the bottom (fig. 28.15).


    Fig. 28.15. Form editor window

    Let us create another group for viewing the address and other customer info and make it collapsible.
  13. In the form controls pane, click Add , select Group - Regular group, and click OK.
  14. In the group property palette, in the Title field, enter Hide customer info.
  15. In the Behavior list, select Collapsible.
  16. In the CollapsedRepresentationTitle field, enter View customer info.
  17. In the Representation list, select None.
  18. Select the Collapsed check box (fig. 28.16).

    Fig. 28.16. Group property palette
  19. Drag the CustomerAddress field to the group and move the group to the position below the Customer field.

    You can see the result of the changes in the preview pane (fig. 28.17). Note that the preview displays an expanded group with the "Hide customer info" title, but when you open the form in 1C:Enterprise mode, the group will be collapsed and will have the "Show customer info" title.


    Fig. 28.17. Form editor window

    In general, to make a group collapsible, you have to set its Behavior property to Collapsible and specify the expanded group title and/or the collapsed group title. You can specify a picture instead of title text if the ControlRepresentation property is set to Picture (its default value is Hyperlink link).

    So you have added the option to expand or collapse customer info by clicking the group title in 1C:Enteprise mode.

    Then let us group the Warehouse field with the command that opens the Materials report filtered by warehouse. You created this command in the "Using parameterized commands" section of the previous lesson.
  20. In the form controls pane, click Add , select Group - Regular group (no visual presentation), and click OK.
  21. In the group property palette, in the Group list, select Horizontal.
  22. Drag the Warehouse field and the BalanceByWarehouse global parameterized command to the group and move the group to the position below the Technician field.

    You can see the result of the changes in the preview pane (fig. 28.18).


    Fig. 28.18. Form editor window

    The form is not yet finished but it is a good time to test it in 1C:Enterprise mode. To be able to test it, let us set the custom form as the default Services document form.
  23. In the Services configuration object editor, on the Forms tab, in the Document form field, click the selection button and select FormForEditing (fig. 28.19).


    Fig. 28.19. Specifying default document form
Next page: In 1C:Enterprise mode
Be the first to know tips & tricks on business application development!

A confirmation e-mail has been sent to the e-mail address you provided .

Click the link in the e-mail to confirm and activate the subscription.