HomeDev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityDoc feedbackLog In
GitHubNuGetDev CommunityDoc feedback


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