Rearranging the contents of a properties view

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

Procedure

  1. Open HCL Commerce Developer and switch to the Enterprise Explorer view.
  2. Expand LOBTools > WebContent > WEB-INF > src > xml > commerce > component > propertiesViews, where component is the name of the Management Center component.
  3. Open the object properties file that contains the properties view display that you want to change.
  4. Locate the definition for the properties view within the file and rearrange the contents of the properties view. The sequence of the properties in the file determine the display sequence of the properties in the user interface.
    OptionDescription
    Change the order of tabs Locate 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="cmc/catalog/CategoryProperties">
  <dependency localName="foundationResources" moduleName="cmc/foundation/FoundationResources"/>
  <dependency localName="catalogResources" moduleName="cmc/catalog/CatalogResources"/>
  <!-- This is the set of tabs to display on the Category properties notebook -->
  <PropertyTabs name="tabs">
  
    <!-- Tab: Manage Category. This tab contains general information about the selected category such as name, description etc. -->
    <PropertyTabPane name="manageCategoryTab" text="${catalogResources.manageCategoryTab}">
    <!-- Property Pane: Manage Category . This is an instantiation of the property pane which contains general category details. -->
    <PropertyPane baseDefinition="cmc/catalog/ManageCategory"/>
    </PropertyTabPane>
  
    <!-- This is for supporting attachment reference of a category -->
    <PropertyTabPane name="manageAttachmentTab" text="${catalogResources.manageAttachmentTab}">	
    <!-- Property Pane: Manage Attachment Reference. 
         This is an instantiation of the property pane which contains attachment reference of this category. -->
    <PropertyPane baseDefinition="cmc/catalog/ManageAttachment"/>
     </PropertyTabPane>
  
  </PropertyTabs>
</ObjectProperties>
    To move the Manage Category tab to appear after the Associated Assets tab, change the order of the PropertyTabPane elements to resemble the following code snippet:
    
<ObjectProperties definitionName="cmc/catalog/CategoryProperties">
  <dependency localName="foundationResources" moduleName="cmc/foundation/FoundationResources"/>
  <dependency localName="catalogResources" moduleName="cmc/catalog/CatalogResources"/>
  <!-- This is the set of tabs to display on the Category properties notebook -->
  <PropertyTabs name="tabs">

    <!-- This is for supporting attachment reference of a category -->
    <PropertyTabPane name="manageAttachmentTab" text="${catalogResources.manageAttachmentTab}">	
    <!-- Property Pane: Manage Attachment Reference. 
         This is an instantiation of the property pane which contains attachment reference of this category. -->
    <PropertyPane baseDefinition="cmc/catalog/ManageAttachment"/>
     </PropertyTabPane>

    <!-- Tab: Manage Category. This tab contains general information about the selected category such as name, description etc. -->
    <PropertyTabPane name="manageCategoryTab" text="${catalogResources.manageCategoryTab}">
    <!-- Property Pane: Manage Category . This is an instantiation of the property pane which contains general category details. -->
    <PropertyPane baseDefinition="cmc/catalog/ManageCategory"/>
    </PropertyTabPane>
  
  </PropertyTabs>
</ObjectProperties>
    Change the order of collapsible sections Locate 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="cmc/catalog/ManageCategory">
  <dependency localName="catalogResources" moduleName="cmc/catalog/CatalogResources"/>
  <PropertyGroup baseDefinition="cmc/foundation/PropertyAssetInformationGroup"/>
  
  <!-- Property Group: General Category Information. 
    This properties group contains general category information such as code, description etc -->
  <PropertyGroup groupTitle="${catalogResources.generalCategoryInformationSection}" name="generalInfoPropGrp" open="true">
    ... 
  </PropertyGroup>
	
  <!-- Property Group:  Display. 
   This properties group contains images that are attached to a category, such as thumbnail and full image. -->
  <PropertyGroup groupTitle="${catalogResources.displaySection}" name="displayPropGroup">
  ...		
  </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="cmc/catalog/ManageCategory">
  <dependency localName="catalogResources" moduleName="cmc/catalog/CatalogResources"/>
  <PropertyGroup baseDefinition="cmc/foundation/PropertyAssetInformationGroup"/>
  
  <!-- Property Group:  Display. 
    This properties group contains images that are attached to a category, such as thumbnail and full image. -->
  <PropertyGroup groupTitle="${catalogResources.displaySection}" name="displayPropGroup">
  ...		
  </PropertyGroup>

  <!-- Property Group: General Category Information. 
   This properties group contains general category information such as code, description etc -->
  <PropertyGroup groupTitle="${catalogResources.generalCategoryInformationSection}" name="generalInfoPropGrp" open="true">
    ... 
  </PropertyGroup>

</PropertyPane>
    Change the order of widgets within a group Locate 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:
    
<!-- Property Group:  Display. This properties group contains images that are attached to a category, such as thumbnail and full image. -->
<PropertyGroup groupTitle="${catalogResources.displaySection}" name="displayPropGroup">

<!-- Property: Published. A checkbox for the published (display to customer) property. -->
<PropertyCheckbox extendedHelpText="${catalogResources.extendedHelpText_displayToCustomers}" falseValue="0" 
 objectPath="CatalogGroupDescription" promptText="${catalogResources.displayToCustomerPrompt}" 
 propertyName="xdesc_published" trueValue="1"/>

<!-- Property : Thumbnail image. An image editor for the tImage property -->
<ImageEditor objectPath="CatalogGroupDescription" promptText="${catalogResources.thumbnailPrompt}" propertyName="tImage"/>

<!-- Property : Full image. An image editor for the fImage property -->
<ImageEditor objectPath="CatalogGroupDescription" promptText="${catalogResources.fullImagePrompt}" 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:
    
<!-- Property Group:  Display. This properties group contains images that are attached to a category, such as thumbnail and full image. -->
<PropertyGroup groupTitle="${catalogResources.displaySection}" name="displayPropGroup">

<!-- Property : Thumbnail image. An image editor for the tImage property -->
<ImageEditor objectPath="CatalogGroupDescription" promptText="${catalogResources.thumbnailPrompt}" propertyName="tImage"/>

<!-- Property: Published. A checkbox for the published (display to customer) property. -->
<PropertyCheckbox extendedHelpText="${catalogResources.extendedHelpText_displayToCustomers}" 
 falseValue="0" objectPath="CatalogGroupDescription" promptText="${catalogResources.displayToCustomerPrompt}" 
 propertyName="xdesc_published" trueValue="1"/>

<!-- Property : Full image. An image editor for the fImage property -->
<ImageEditor objectPath="CatalogGroupDescription" promptText="${catalogResources.fullImagePrompt}" propertyName="fImage"/>
</PropertyGroup>