Création d'un onglet de vue des propriétés pour des informations personnalisées

Dans cette leçon, vous personnalisez la vue des propriétés des produits afin d'ajouter un onglet pour l'affichage des informations sur la garantie.

Pourquoi et quand exécuter cette tâche

Une fois que vous avez terminé cette leçon, un nouvel onglet pour les informations sur la garantie est ajouté pour afficher des informations détaillées sur la garantie comme le montre l'image suivante.
Onglet de garantie de la vue des propriétés du produit avec des informations sur les conditions et le type de garantie.

Procédure

  1. Depuis la vue Explorateur d'entreprise, développez LOBTools > WebContent > WEB-INF > src > xml > commerce > catalog > propertiesViews.
  2. Ouvrez le fichier ProductPropertiesView.xml pour l'éditer.
  3. Déterminez l'emplacement du nouvel onglet relativement aux autres onglets.
    Par exemple, si vous souhaitez définir l'onglet à afficher après l'onglet Gérer le produit, recherchez le fragment de code suivant dans le fichier. 
    
<!-- Tab: Manage Product. This tab contains general information about the selected product such as name and description. -->
<PropertyTabPane name="manageProductTab" text="${catalogResources.manageProductTab}">  
  <!-- Property Pane: Manage Product. This is an instantiation of the property pane which contains general product details. -->
  <PropertyPane baseDefinition="cmc/catalog/ManageProduct"/>
</PropertyTabPane>
  4. Ajoutez la définition d'onglet pour votre onglet personnalisé après la définition <PropertyTabPane> de l'onglet Gérer le produit.
    Par exemple, le fragment de code suivant définit un nouvel onglet pour les informations sur la garantie.
    
<Definitions>
  <ObjectProperties definitionName="cmc/catalog/ProductProperties">
    ...
    <!-- This is the set of tabs to display on the Product properties view -->
    <PropertyTabs name="tabs">
      <!-- Tab: Manage Product. This tab contains general information about the selected product such as name and description. -->
      <PropertyTabPane name="manageProductTab" text="${catalogResources.manageProductTab}">
        <!-- Property Pane: Manage Product. This is an instantiation of the property pane which contains general product details. -->
        <PropertyPane baseDefinition="cmc/catalog/ManageProduct"/>
      </PropertyTabPane>
      <!-- Tab: Warranty. This tab contains warranty information for a product. -->
      <PropertyTabPane name="productwarrantyTab" text="${ExtCatalogResources.productWarranty_TabHeader}">
        <!-- Property Pane: warranty. This is an instantiation of the property pane class which contains product warranty details. -->
        <PropertyPane baseDefinition="cmc/catalog/WarrantyPane"/>
      </PropertyTabPane>
      ...
    </PropertyTabs>
  </ObjectProperties>
</Definitions>
  5. Ajoutez la dépendance pour votre regroupement de ressources ExtCatalogResources personnalisé. En ajoutant cette dépendance, la vue des propriétés de produit peut récupérer et afficher le texte défini dans vos fichiers de propriétés personnalisées.
    Définir la dépendance avec le format <dependency localName="" moduleName=""/>
    Par exemple, le format de code suivant montre l'ajout d'une dépendance pour le regroupement de ressources ExtCatalogResources.
    
<Definitions>
  <ObjectProperties definitionName="cmc/catalog/ProductProperties">
    <dependency localName="foundationResources" moduleName="cmc/foundation/FoundationResources"/>
    <dependency localName="catalogResources" moduleName="cmc/catalog/CatalogResources"/>
    <dependency localName="ExtCatalogResources" moduleName="cmc/catalog/ExtCatalogResources"/>
    <!-- This is the set of tabs to display on the Product properties view -->
    <PropertyTabs name="tabs">
    ...
    </PropertyTabs>
  </ObjectProperties>
</Definitions>
  6. Enregistrez et fermez le fichier.
Définissez le contenu du panneau des propriétés qui doit s'afficher dans l'onglet garantie en ajoutant les informations détaillées sur la garantie. Lorsque vous définissez la vue du panneau des propriétés pour vos informations de garantie, vous définissez les zones de garantie en tant que UserData en préfixant les zones. Dans ce tutoriel, le préfixe "x_" est utilisé. Ce préfixe est le préfixe défini pour le catalogue général UserData dans le fichier de configuration de composant de catalogue, wc-catalog-clientobjects.xml. Cette configuration définit la façon dont un élément UserData est mappé au nom de l'objet.
Par exemple, la configuration suivante pour le nom d'entrée de catalogue définit que les éléments ayant comme préfixe "x_", tel que x_warterm, sont des données UserData et sont mappés au nom d'entrée de catalogue avec le XPath /UserData/UserDataField. 
<_config:URLParameter name="x_" nounElement="/UserData/UserDataField" type="UserData"/>
Tout préfixe que vous utilisez pour identifier une zone comme UserData doit correspondre au préfixe UserData défini dans le fichier de configuration de composant pour un objet.
  1. Développez LOBTools > WebContent > WEB-INF > src > xml > commerce > catalog > propertiesViews.
  2. Ouvrez le fichier CatalogPropertyPane.xml pour l'éditer.
    Ce fichier définit les panneaux de propriétés utilisés dans le fichier Catalogs tool.
  3. Ajoutez le code suivant à la fin du fichier en tant qu'élément enfant dans l'élément <Definitions>. 
    
<PropertyPane definitionName="cmc/catalog/WarrantyPane">
  <dependency localName="ExtCatalogResources" moduleName="cmc/catalog/ExtCatalogResources"/>
  <PropertyGroup groupTitle="${ExtCatalogResources.productWarranty_GroupTitleForWarranty}" open="true">
    <PropertyCombobox promptText="${ExtCatalogResources.productWarranty_WarrantyTermPrompt}" propertyName="x_warterm" width="200"/>
    <PropertyCombobox promptText="${ExtCatalogResources.productWarranty_WarrantyTypePrompt}" propertyName="x_wartype" width="200"/>
  </PropertyGroup>
</PropertyPane>
    Par exemple, le fragment de code suivant montre le placement du code pour définir le contenu du panneau de l'onglet de garantie.
    
<Definitions>
<PropertyGroup definitionName="cmc/catalog/ManageGeneralProductInformation" 
 groupTitle="${catalogResources.generalProductInformationSection}" open="true">
...
</PropertyGroup>	
...

<PropertyPane definitionName="cmc/catalog/WarrantyPane">
  <dependency localName="ExtCatalogResources" moduleName="cmc/catalog/ExtCatalogResources"/>
  <PropertyGroup groupTitle="${ExtCatalogResources.productWarranty_GroupTitleForWarranty}" open="true">
    <PropertyCombobox promptText="${ExtCatalogResources.productWarranty_WarrantyTermPrompt}" propertyName="x_warterm" width="200"/>
    <PropertyCombobox promptText="${ExtCatalogResources.productWarranty_WarrantyTypePrompt}" propertyName="x_wartype" width="200"/>
  </PropertyGroup>
</PropertyPane>
</Definitions>
  4. Enregistrez et fermez le fichier.