Rearranging 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 your 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.

Procedure

  1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
  2. Complete one of the following steps:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1In 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 you want to customize.
    • Introduced in Feature Pack 2In the Enterprise Explorer view, expand LOBTools > WebContent > config > commerce > Management_Center_component > propertiesViews, where Management_Center_component is the name of the tool you want to customize.
  3. Open the file that contains the properties view declaration that you want to change.
  4. Rearrange the contents of the properties view:
    OptionDescription
    WebSphere Commerce Version 7.0.0.0Feature Pack 1Change the order of tabs within a properties view WebSphere Commerce Version 7.0.0.0Feature Pack 1Locate 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>
    Introduced in Feature Pack 2Change the order of tabs within a properties view Introduced in Feature Pack 2Locate the PropertyTabs element and change the order of the PropertyTabPane tags. For example, in the Category properties view, the Manage Category tab appears before the Associated Assets tab: 
    <ObjectProperties definitionName="catCategoryProperties"> 
   <PropertyTabs name="tabs"> 
      <PropertyTabPane name="manageCategoryTab" text="Manage Category"> 
         <PropertyPane baseDefinitionName="catManageCategory"/> 
      </PropertyTabPane> 

      <PropertyTabPane name="manageAttachmentTab" text="Associated Assets"> 
         <PropertyPane baseDefinitionName="catManageAttachment"/> 
      </PropertyTabPane> 
   </PropertyTabs> 
</ObjectProperties>
    To move the Manage Category tab to appear after the Associated Assets tab, change the order of the PropertyTabPane elements:
    <ObjectProperties definitionName="catCategoryProperties">
   <PropertyTabs name="tabs">
      <PropertyTabPane name="manageAttachmentTab" text="Associated Assets">
         <PropertyPane baseDefinitionName="catManageAttachment"/>
      </PropertyTabPane>

      <PropertyTabPane name="manageCategoryTab" text="Manage Category">
         <PropertyPane baseDefinitionName="catManageCategory"/> 
      </PropertyTabPane> 
   </PropertyTabs> 
</ObjectProperties>
    WebSphere Commerce Version 7.0.0.0Feature Pack 1Change the order of collapsible sections within a properties view WebSphere Commerce Version 7.0.0.0Feature Pack 1Locate 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>
    Introduced in Feature Pack 2Change the order of collapsible sections within a properties view Introduced in Feature Pack 2Locate the PropertyPane element and change the order of the child PropertyGroup elements. For example, in the Manage Category pane, the generalInfoPropGrp property group appears before the displayPropGroup property group: 
    <PropertyPane definitionName="catManageCategory">

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

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

</PropertyPane>
    To change the order of the groups in the Manage Category pane, move the generalInfoPropGrp property group after the displayPropGroup property group:
    <PropertyPane definitionName="catManageCategory">

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

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

</PropertyPane>
    WebSphere Commerce Version 7.0.0.0Feature Pack 1Change the order of properties view widgets within a group WebSphere Commerce Version 7.0.0.0Feature Pack 1Locate 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>
    Introduced in Feature Pack 2Change the order of properties view widgets within a group Introduced in Feature Pack 2Locate the PropertyGroup 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:
    <PropertyGroup name="displayPropGroup"
   groupTitle="${catalogResources.displaySection}"> 

   <PropertyCheckbox trueValue="1" falseValue="0"
      propertyName="xdesc_published" objectPath="CatalogGroupDescription"
      promptText="${catalogResources.displayToCustomerPrompt}"
      extendedHelpText=
         "${catalogResources.extendedHelpText_displayToCustomers}"/>
   <ImageEditor promptText="${catalogResources.thumbnailPrompt}"
      objectPath="CatalogGroupDescription" propertyName="tImage"/>
   <ImageEditor promptText="${catalogResources.fullImagePrompt}"
      objectPath="CatalogGroupDescription" propertyName="fImage"/>

</PropertyGroup>
    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:
    <PropertyGroup name="displayPropGroup"
   groupTitle="${catalogResources.displaySection}"> 

   <ImageEditor promptText="${catalogResources.thumbnailPrompt}"
      objectPath="CatalogGroupDescription" propertyName="tImage"/> 
   <PropertyCheckbox trueValue="1" falseValue="0"
      propertyName="xdesc_published" objectPath="CatalogGroupDescription"
      promptText="${catalogResources.displayToCustomerPrompt}"
      extendedHelpText=
         "${catalogResources.extendedHelpText_displayToCustomers}"/>
   <ImageEditor promptText="${catalogResources.fullImagePrompt}"
      objectPath="CatalogGroupDescription" propertyName="fImage"/> 

</PropertyGroup>

What to do next

After you complete your customization:
Version Steps
  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 setting is the default environment setting.
  2. Test your changes by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.
  3. Deploy your changes to your production environment.
Introduced in Feature Pack 2
  1. Test your changes by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.
  2. Deploy your changes to your production environment.