1C:Enterprise 8.3. Practical Developer’s Guide. Lesson 28 (2:00). Form customization techniques. Implementing a custom form for the Services document

Implementing a custom form for the Services document

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).

Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode 
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 Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode (fig. 28.8).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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 Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode, 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).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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 Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode, 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).
    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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.

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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 Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode, 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).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    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).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.19. Specifying default document form

In 1C:Enterprise mode

Let us test the form.

  • Start 1C:Enterprise in the debug mode and open any of the Services documents.

    The document form looks exactly as planned (fig. 28.20).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In 1C:Enterprise mode
    Fig. 28.20. Document form in 1C:Enterprise mode

    However, the form is incomplete, it lacks the tabular section.  Let us return to Designer, add the tabular section, and customize its view.

In Designer mode

Before you add the tabular section, let us split the form into two tabs. The first tab will display the major document attributes (Number, Data, Customer, and so on) and the second tab will display the table of services.

  1. In the form controls pane, click Add Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode, select Group - Pages, and click OK (fig. 28.21).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.21. Adding a page group to a form
  2. In the group property palette, in the Title field, enter Pane.
  3. In the form controls pane, click the Pane group and add another group of the Pages type to it (fig. 28.22).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.22. Adding a page to a page group
  4. In the group property palette, set the title to Main.
  5. Add another group of the Page type with the Services title.

    Attention! When you click the Add Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode button, the added control is subordinate to the selected one (in this example this adds a group subordinate to the selected group).
  6. Drag all of the form controls (Group1, Customer, Group2, Technician, and Group3) to the Main group.

    The resulting form editor window should look as shown in fig. 28.23.

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.23. Form editor window

    The Services tab is not displayed because it does not contain any controls.
  7. In the form attributes pane, expand the DocumentObject attribute and drag the MaterialsAndServices tabular section to the Services group.
  8. Confirm that you want to add columns to the table.

    This adds the Services tab with a table that displays tabular section data to the form preview (fig. 28.4).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.24. Form editor window

    Let us customize the table view. The PropertySet column is not important, so you can delete it.
  9. In the form controls pane, expand the MaterialsAndServices table, click the MaterialsAndServicesPropertySet item, and click Delete current item Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode (fig. 28.25).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.25. Form controls pane

    Then let us apply conditional formatting to the table by highlighting rows with total greater that 300 USD. You need the ConditionalAppearance form property for this.
  10. In the form controls tree, double-click the root Form item.
  11. In the property palette, in the ConditionalAppearance field, click the Open link (fig. 28.26).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.26. Form property palette
  12. In the Conditional Appearance Settings dialog box, click Add Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode.

    First, let us specify the formatting for highlighting fields.
  13. In the Format field, click the selection button and select light blue color for the background.

    Then let us specify the condition for the appearance to be applied (when list rows should have light blue color).
  14. In the Condition field, click the selection button.
  15. In the window that is opened, click the Add Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode button and then click New item (fig. 28.27).
  16. In the Left value column, select the Total tabular section field.
  17. In the Comparison type column, select Greater than.
  18. In the Right value column, enter 300 and click OK.

    Finally, let us specify the list of formatted fields.
  19. In the Formatted fields field, click the selection button.
  20. In the Formatted Fields dialog box, click Add.

    Let us specify that the entire table row (all columns) is highlighted.
  21. Select the MaterialsAndServices table and click OK (fig. 28.27).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.27. Form conditional appearance settings window

    You can specify conditional formatting for any form control (field, group, and so on) in a similar manner.

In 1C:Enterprise mode

Let us test the form.

  1. Start 1C:Enterprise in the debug mode and open any of the Services documents.

    The document form looks exactly as planned.

    The Main tab displays major document attributes, the link that opens additional customer info, and the button that opens the Balance of materials report. The document number and date are displayed in a single row and highlighted with background color (fig. 28.28).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In 1C:Enterprise mode
    Fig. 28.28. Document form in 1C:Enterprise mode
  2. Switch to the Services tab.

    It displays the document tabular section where rows with total greater than 300 are highlighted with light blue (fig. 28.29).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In 1C:Enterprise mode
    Fig. 28.29. Document form in 1C:Enterprise mode

    The only thing that is missing is the total amount. It is logical to add it to the tab that displays the major document attributes.

In Designer mode

Let us return to Designer and add the total amount to both form tabs.

  1. In the form controls pane, double-click the MaterialsAndServices table.
  2. In the property palette, select the Footer check box (fig. 28.30).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.30. Table property palette
  3. Click the MaterialsAndServicesTotal table field.
  4. In the property palette, in the FooterDataPath field, select DocumentObject.MaterialsAndServices.TotalTotal (fig. 28.31).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.31. Table field property palette

    This adds the total by the Total field to the table footer. And now let us add it to the Main tab.
  5. Drag the TotalTotal tabular section attribute from the form attributes pane to the Main group (fig. 28.32).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.32. Document form editor
  6. In the form controls window, double-click the MaterialsAndServicesTotalTotal field.
  7. In the property palette, in the Font and TitleFont fields, select LargeTextFont (fig. 28.33).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In Designer mode
    Fig. 28.33. Form field property palette

In 1C:Enterprise mode

Let us test the changes.

  1. Start 1C:Enterprise in the debug mode and open any of the Services documents.

    You can see that the Main tab displays the document total in large font (fig. 28.34).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In 1C:Enterprise mode
    Fig. 28.34. Document form in 1C:Enterprise mode
  2. Click the Services tab.

    The total amount is displayed at the bottom (fig. 28.35).

    Lesson 28 (2:00). Form customization techniques / Implementing a custom form for the Services document / In 1C:Enterprise mode
    Fig. 28.35. Document form in 1C:Enterprise mode

    This is the final form view. It is compact and user-frendly, and has a better look and feel than before.

    Of course in commercial application development, in addition to your own form design concept, you have to follow customer requirements and user feedback.

    You have completed the example that includes several development techniques aimed to improve form design and usability. In the following sections we will examine a few more short examples of form customization.

Leave a Reply

Your email address will not be published. Required fields are marked *

1C:Enterprise Developer's Community