Develop > Presentation layer > Management Center framework > Customize the Management Center user interface > Customizing an existing Management Center tool


Rearrange the contents of a properties view

You can rearrange the contents within a Management Center properties view. For example, you can move tabs, sections, or widgets within a properties view to suit the business needs.


Before you begin

Review the following classes to ensure that you understand the classes that are associated with defining a properties view:

wcfObjectProperties

The base class for all properties views.

wcfPropertyPane

The content view for a properties view.

wcfPropertyTabs

Used when a properties view has multiple tabs.

wcfPropertyGroup

Used to organize widgets within a pane.

wcfPropertiesComponent

The base class for all properties view widgets.

To rearrange the contents of a Management Center properties view:


Procedure

  1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.

  2. In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > lzx > commerce > Management_Center_component > propertiesViews, where Management_Center_component is the name of the tool to customize.

  3. Open the file that contains the properties view declaration that to change.

  4. Rearrange the contents of the properties view:

    Option Description
    Change the order of tabs within a properties view Locate the wcfPropertyTabs element and change the order of the wcfPropertyTabPane tags. For example, in the Category properties view, the Manage Category tab appears before the Associated Assets tab: 

    <class name="catCategoryProperties" extends="wcfObjectProperties"> 
<wcfPropertyTabs name="tabs"> 

<wcfPropertyTabPane name="manageCategoryTab" text="Manage Category"> 
<catManageCategory/> 
</wcfPropertyTabPane> 

<wcfPropertyTabPane name="manageAttachmentTab" text="Associated Assets"> 
<catManageAttachment/> 
</wcfPropertyTabPane> 
</wcfPropertyTabs> 
</class>

    To move the Manage Category tab to appear after the Associated Assets tab, change the order of the wcfPropertyTabPane elements: 

    <class name="catCategoryProperties" extends="wcfObjectProperties"> 
<wcfPropertyTabs name="tabs"> 

<wcfPropertyTabPane name="manageAttachmentTab" text="Associated Assets"> 
<catManageAttachment/> 
</wcfPropertyTabPane> 

<wcfPropertyTabPane name="manageCategoryTab" text="Manage Category"> 
<catManageCategory/> 
</wcfPropertyTabPane> 
</wcfPropertyTabs> 
</class>

    Change the order of collapsible sections within a properties view Locate the wcfPropertyPane element and change the order of the child wcfPropertyGroup elements. For example, in the Manage Category pane, the generalInfoPropGrp property group appears before the displayPropGroup property group: 

    <class name="catManageCategory" extends="wcfPropertyPane"> 

<wcfPropertyGroup name="generalInfoPropGrp" open="true" groupTitle="${catalogResources.generalCategoryInformationSection.string}"> 
... 
</wcfPropertyGroup> 

<wcfPropertyGroup name="displayPropGroup" groupTitle="${catalogResources.displaySection.string}"> 
... 
</wcfPropertyGroup> 

</class>

    To change the order of the groups in the Manage Category pane, move the generalInfoPropGrp property group after the displayPropGroup property group: 

    <class name="catManageCategory" extends="wcfPropertyPane"> 

<wcfPropertyGroup name="displayPropGroup" groupTitle="${catalogResources.displaySection.string}"> 
... 
</wcfPropertyGroup> 

<wcfPropertyGroup name="generalInfoPropGrp" open="true" groupTitle="${catalogResources.generalCategoryInformationSection.string}"> 
... 
</wcfPropertyGroup> 

</class>

    Change the order of properties view widgets within a group Locate the wcfPropertyGroup element and change the order of the child properties component elements. In the following example, the Display to customer check box appears before the thumbnail image editor: 

    <wcfPropertyGroup name="displayPropGroup" groupTitle="${catalogResources.displaySection.string}"> 

<wcfPropertyCheckbox trueValue="1" falseValue="0" propertyName="xdesc_published" objectPath="CatalogGroupDescription" promptText="${catalogResources.displayToCustomerPrompt.string}" extendedHelpText="${catalogResources.extendedHelpText_displayToCustomers.string}"/> 

<wcfImageEditor promptText="${catalogResources.thumbnailPrompt.string}" objectPath="CatalogGroupDescription" propertyName="tImage"/> 
<wcfImageEditor promptText="${catalogResources.fullImagePrompt.string}" objectPath="CatalogGroupDescription" propertyName="fImage"/> 

</wcfPropertyGroup>

    To change the order and move the check box to appear after the thumbnail image editor, move the check box element after the thumbnail image editor element: 

    <wcfPropertyGroup name="displayPropGroup" groupTitle="${catalogResources.displaySection.string}"> 

<wcfImageEditor promptText="${catalogResources.thumbnailPrompt.string}" objectPath="CatalogGroupDescription" propertyName="tImage"/> 

<wcfPropertyCheckbox trueValue="1" falseValue="0" propertyName="xdesc_published" objectPath="CatalogGroupDescription" promptText="${catalogResources.displayToCustomerPrompt.string}" extendedHelpText="${catalogResources.extendedHelpText_displayToCustomers.string}"/> 
<wcfImageEditor promptText="${catalogResources.fullImagePrompt.string}" objectPath="CatalogGroupDescription" propertyName="fImage"/> 

</wcfPropertyGroup>


What to do next

After you complete the customization:

  1. Right-click LOBTools Project; then click Build OpenLaszlo Project to produce an updated ManagementCenter.swf file under the workspace_dir\LOBTools\WebContent directory. This is the default environment setting.

  2. Test the changes by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.

  3. Deploy your changes to the production environment.


Related concepts

Management Center shell

Management Center user interface


+

Search Tips   |   Advanced Search