Réorganisation du contenu d'une vue de propriétés

Dans un outil Management Center, vous pouvez réorganiser le contenu d'une vue de propriétés d'un objet métier. Vous pouvez, par exemple, déplacer des onglets, des sections ou des widgets dans une vue de propriétés afin de les adapter à vos besoins métier.

Procédure

Ouvrez HCL Commerce Developer et basculez vers la vue Explorateur d'entreprise.
Développez LOBTools > WebContent > WEB-INF > src > xml > commerce > component > propertiesViews, où component est le nom du composant du Management Center.
Ouvrez le fichier de propriétés d'objet contenant la vue de propriétés à modifier.

Localisez la définition de la vue de propriétés dans le fichier et réorganisez le contenu de la vue de propriétés. L'ordre des propriétés dans le fichier détermine la séquence d'affichage des propriétés dans l'interface utilisateur.

Option Description

Modifier l'ordre des onglets

Localisez l'élément PropertyTabs et modifiez l'ordre des onglets PropertyTabPane. Par exemple, dans la vue de propriétés Catégorie, l'onglet Gérer la catégorie figure avant l'onglet Ressources associées :


<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>

Pour déplacer l'onglet Gérer la catégorie afin qu'il apparaisse après l'onglet Ressources associées, modifiez l'ordre des éléments PropertyTabPane. Le code utilisé doit ressembler au fragment de code suivant :


<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>

Modifiez l'ordre des sections réductibles

Localisez l'élément PropertyPane et modifiez l'ordre des éléments PropertyGroup enfants. Par exemple, dans le panneau Gérer la catégorie, le groupe de propriétés generalInfoPropGrp figure avant le groupe de propriétés displayPropGroup :


<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>

Pour modifier l'ordre des groupes dans le panneau Gérer la catégorie, déplacez le groupe de propriétés generalInfoPropGrp après le groupe de propriétés displayPropGroup :


<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>

Modifiez l'ordre des widgets dans un groupe

Localisez l'élément PropertyGroup et modifiez l'ordre des éléments du composant des propriétés enfants. Dans l'exemple suivant, la case à cocher Afficher aux clients figure avant l'éditeur d'image miniature :


<!-- 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>

Pour modifier l'ordre de sorte que la case à cocher apparaisse après l'éditeur d'image miniature, déplacez l'élément case à cocher après l'élément éditeur d'image miniature :


<!-- 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>