Note
This content does not apply to Commerce versions 14+.
Commerce Manager interfaces contain lists, toolbars, and custom user controls. To customize these UI types, use the special **XmlFormBuilder** control. Use the XmlFormBuilder XML to define layouts and predefined properties for controls.
## Complex layout examples
The following examples show complex layouts and their components.Â
### Example 1
Block 1 – toolbar (Section Form/Toolbars)
Block 2 – first Form/Block in XML
Block 3 – list of all blocks in the form of tabs
Block 4 – list of controls defined in XML, for selected block (tab)

### Example 2
Block 1 – toolbar (Section Form/Toolbars)
Block 2 – first block in section Form/Block in XML
Block 3 – list of all blocks in the form of menu
Block 4 – list of controls defined in XML, for the selected block

### Example 3
Block 1 – toolbar
Block 2 – one of the layout blocks

The current view is defined in two XMLs: **PurchaseOrder-ObjectView.xml** section in View/Layout, and in the **PurchaseOrder.\[MC\_BaseForm\].xml** section in View/FormDocument.
You can customize Block 1 in the View/Layout/Toolbars section.
Common view of Block 2. In the current case, there is the **FormDocumentView** control with predefined properties for getting data from _PurchaseOrder.\[MC\_BaseForm\].xml_.
ButtonsHolder is defined from the first XML, in the **View/Layout/ButtonSets** section.
Columns for **EcfListView** are defined in the first XML, in the **View/Layout/Grids** section.
In the following examples, you modify tabs in Views for XmlFormBuilder, and create a file with the name _PurchaseOrder-ObjectView.xml_ in the _~/%AppName%/Config/View_.
## Add a tab to OrderView
Add a new tab with the name **NewBlock**, and add a control _~/Apps/TestApp/TestControl.ascx_ with one pre-defined property.
## Modify tabs in OrderView
Replace the control _/Apps/Order/Modules/ShortInfo.ascx_ with the user control from our _/Apps/TestApp/NewShortInfo.ascx_Â application.
## Delete a tab in OrderView
Delete the last tab **Notes** from OrderView.
## XML description
**Block** can have the following attributes:
**id** – Unique identifier in XML scope.
**name** – Block name.
**Placeholder** can have the following attributes:
**id** – Unique identifier in XML scope.
**Control** can have the following attributes:
**id**– Unique identifier in XML scope.
**path** – Relative path to the user control.
**Property** can have the following attributes:
**name** – Name of the public property.
**value** – Value for binding the current property.
## XmlFormBuilder properties
LayoutMode describes how to display blocks:
**Default** – Blocks display _as is_.
**WithTabs** – Blocks, except the first one, display under tabs (see image).
**LeftMenu** – All blocks except the first one display as **LeftMenu** navigation (see image).
**JQueryMode** – Same as WithTabs, except Tab changes to process without postback (so-called _client tabs_).