Fragment de code pour l'ajout d'un lien Editer

Pour ajouter un lien Editer directement à une page de magasin ou à la fenêtre en incrustation d'un aperçu de magasin, vous devez utiliser un fragment de code spécifique. Ce fragment construit une URL EditBusinessObject destinée au Centre de gestion pour l'objet métier concerné, par exemple une entrée de catalogue ou une activité Web.

Le fragment de code peut aussi référencer des variables d'environnement et des classes CSS pour contrôler la disponibilité et l'apparence du lien Editer.

Paramètres des liens Editer

Le lien Editer doit contenir un ensemble de paramètres qui fournissent au Centre de gestion les informations relatives à l'objet métier à ouvrir en édition. Vous devez définir les valeurs des variables en italiques :

<c:url var = "clickToEditURL" value = "/cmc/EditBusinessObject" context = "/">
    <c:param name = "toolId" value = "toolId"/>
    <c:param name = "storeId" value = "storeId"/>
    <c:param name = "languageId" value = "langId"/>
    <c:param name = "storeSelection" value = "storeSelection"/>
    <c:param name = "searchType" value = "searchType"/>
    <c:param name = "searchOption.searchText" value = "keyword"/>
    <c:param name = "searchOption.searchUniqueId" value = "objectId"/>
</c:url>
<a href="javascript:void(0)" onclick="parent.callManagementCenter('<wcf:out escapeFormat="js" value="${clickToEditURL}"/>');">Edit</a>

Les variables sont les suivantes :

toolId

ID de l'outil du Centre de gestion dans lequel l'objet métier est géré. La fonction d'édition en un clic utilise cet ID pour ouvrir l'outil correspondant lorsque le professionnel clique sur le lien. Par exemple, catalogManagement est l'ID de l'outil Catalogues, et marketingManagement est l'ID de l'outil Marketing.

Vous pouvez trouver l'ID de l'outil dans le fichier ApplicationMenuItems.def, qui définit tous les éléments de menu du Centre de gestion :

WCDE_installdir/workspace/LOBTools/WebContent/config/commerce/shell/ApplicationMenuItems.def

Ainsi, dans le fichier ApplicationMenuItems.def, l'ID de l'outil Catalogues est défini dans le paramètre id de la ligne de code qui figure en gras :

<ApplicationMenuItem
    actionName = "openBusinessObjectEditor"
    activeIconSrc = "catalogActiveTabIcon"
    displayName = "${shellResourceBundle.catalogManagementDisplayName}"
    id = "catalogManagement"
    inactiveIconSrc = "catalogInactiveTabIcon"
    toolDefinitionName = "catCatalogManagement"
    usage = "IBM_ViewCatalogTool"/>

storeId

ID du magasin prévisualisé. La fonction d'édition en un clic utilise cet ID pour déterminer le magasin à sélectionner dans le Centre de gestion. Vous pouvez utiliser la variable d'ID de magasin ${storeId} pour extraire l'ID du magasin et le transmettre à l'URL d'édition en un clic.

HCL Commerce Developer HCL Commerce Enterprise Dans le cas d'un site étendu, la valeur de storeSelection est également utilisée pour identifier le magasin à sélectionner dans le Centre de gestion.

langId

ID de langue du magasin prévisualisé. Vous pouvez utiliser la variable d'ID de langue ${langId} pour extraire l'ID de la langue en cours et le transmettre à l'URL d'édition en un clic.

storeSelection

Pour un site étendu, préférence de magasin pour le lien. Ce paramètre définit le type de magasin à sélectionner dans le Centre de gestion lorsque le professionnel clique sur le lien. Les valeurs admises sont les suivantes :

prompt: Affiche une invite qui permet au professionnel de sélectionner le magasin de ressources ou le magasin de site étendu. Il s'agit de la valeur par défaut. Si les professionnels utilisent à la fois le magasin de site étendu et le magasin de ressources pour gérer les objets métier associés au lien, utilisez cette valeur.
assetStore: Ouvre le magasin de ressources (le magasin de ressources de vitrine ou le magasin de ressources catalogue, selon celui qui s'applique à l'objet métier édité). Si les professionnels gèrent tous les objets métier associés au lien dans le magasin de ressources, utilisez cette valeur.
eSite: Ouvre le magasin de site étendu. Si les professionnels gèrent tous les objets métier associés au lien dans le magasin de site étendu, utilisez cette valeur.

Si vous ne disposez pas d'un site étendu, vous pouvez ignorer ce paramètre.

La préférence de magasin peut être modifiée par un développeur informatique à tout moment.

searchType

Type de recherche défini pour l'objet métier dans son fichier de définition. La fonction d'édition en un clic utilise le type de recherche pour identifier l'objet métier dans le Centre de gestion. Par exemple, le type de recherche des entrées de catalogue est FindAllCatalogEntries, et celui des emplacements e-marketing est FindEMarketingSpots.

Vous pouvez consulter le type de recherche dans le fichier de définition d'un objet métier existant, dans le chemin suivant :

WCDE_installdir/workspace/LOBTools/WebContent/config/commerce/component/objectDefinitions/

Ainsi, dans le fichier ProductSKUPrimaryObjectDefinition.def des produits et des unités de stockage, le type de recherche est défini dans le paramètre searchType de la ligne de code qui figure en gras :

<PrimaryObjectDefinition
    baseDefinitionName = "catBaseCatalogEntryPrimaryObjectDefinition"
    definitionName = "catBaseProductSKUPrimaryObjectDefinition"
    displayName = "${catalogResources.displayNameProductLevelSKU}"
    displayNameProperty = "partnumber"
    helpLink = "tasks/tpngen1s.htm"
    idProperty = "catentryId"
    isBaseDefinition = "true"
    newDisplayName = "${catalogResources.displayNameNewProductLevelSKU}"
    newObjectMenuItemText = "${catalogResources.contextMenuNewProductLevelSKU}"
    objectGroups = "CatalogEntry,SKUs,ProductSKUs"
    propertiesDefinitionName = "catProductSKUProperties"
    searchType = "FindAllCatalogEntries">

mot clé

Valeur utilisée pour rechercher un objet métier à l'aide d'un mot clé (texte). Le meilleur choix de mot clé est l'index unique de l'objet métier qui est défini dans le schéma de la base de données. Par exemple :

${partNumber} – numéro de référence d'une entrée de catalogue
${emsName} – nom d'un emplacement e-marketing

objectId

Valeur utilisée pour rechercher un objet métier à l'aide d'un ID unique. Les valeurs qui suivent sont des exemples d'objectId :

${productId} – ID d'une entrée de catalogue
${emsId} – ID d'un emplacement e-marketing

Exemple de fragment de code pour un lien Editer

Le fragment de code suivant crée un lien Editer pour une entrée de catalogue du magasin type Aurora sur la page des détails du produit. Le code provient du fichier ProductDisplay.jsp :

1 <div class="container_product_details_image_information container_margin_5px productDetail">
2   <c:if test="${env_inPreview && !env_storePreviewLink}">
3a    <div class="caption" style="display:none"></div>
3b    <div class="ESpotInfo">
4      <c:url var="clickToEditURL" value="/cmc/EditBusinessObject" context="/">
              <c:param name="toolId" value="catalogManagement"/>
              <c:param name="storeId" value="${storeId}"/>
              <c:param name="storeSelection" value="prompt"/>
              <c:param name="languageId" value="${langId}"/>
              <c:param name="searchType" value="FindAllCatalogEntries"/>
              <c:param name="searchOption.searchText" value="${partNumber}"/>
              <c:param name="searchOption.searchUniqueId" value="${productId}"/>
         </c:url>
5      <a id="ProductDisplay_click2edit_Product_${productId}" 
            class="click2edit_button"  href="javascript:void(0)" 
            onclick="parent.callManagementCenter('<wcf:out escapeFormat="js" value="${clickToEditURL}"/>');" >
            <fmt:message bundle='${previewText}' key='Click2Edit_product'/></a>
   </div>
 </c:if>

Les explications suivantes font référence aux renvois numérotés de l'exemple de code :

1 Cet élément <div existe dans le fichier ProductDisplay.jsp et définit la zone qui contient l'image du produit. Le code du lien Editer figure à l'intérieur de l'élément <div, pour que le lien s'affiche dans l'angle supérieur gauche de la zone. La seule modification apportée à cette ligne de code pour la fonction d'édition en un clic est l'ajout du nom de classe CSS productDetail. Cette classe CSS est utilisée comme indicateur d'objet pour signaler l'emplacement d'un lien d'édition en un clic sur une page de magasin. L'indicateur d'objet est référencé dans le fichier StoreCommonUtilities.js d'une fonction JavaScript qui met en évidence la zone définie par l'élément <div. La valeur de l'indicateur d'objet est un nom de votre choix, mais le même nom doit être utilisé dans le code du lien et dans le fichier StoreCommonUtilities.js. Pour plus d'informations, voir Fonction de mise en évidence de l'édition en un clic dans le fichier StoreCommonUtilities.js.
2 L'élément <c:if encadre le code du lien Editer pour que le lien ne s'affiche que lorsque la page est rendue par une session d'aperçu de magasin lancée depuis le Centre de gestion. Utilisez l'élément <c:if et ses variables si le lien Editer est placé directement sur une page de magasin. Il n'est pas utile si le lien Editer est sur une page d'aperçu de magasin en incrustation.

env_inPreview

Les pages Aurora utilisent la balise wcst:preview pour définir cette variable, qui indique que la page est rendue en mode aperçu. Lorsque c'est le cas, le lien s'affiche.

env_storePreviewLink

Cette variable est définie dans les pages Aurora lorsqu'un jeton de prévisualisation est présent. Le jeton de prévisualisation indique que la session de prévisualisation a été lancée à partir d'une URL de prévisualisation de magasin générée. Lorsque c'est le cas, le lien ne s'affiche pas. Pour plus d'informations sur les URL générées, voir Génération et partage d'URL de prévisualisation du magasin.

Pour le magasin type Aurora, ces deux variables sont définies dans le fichier suivant :
WCDE_installdir/workspace/Stores/WebContent/Aurora/Common/EnvironmentSetup.jspf
3a, 3b Les classes CSS caption et ESpotInfo mettent en forme le lien Editer. La classe ESpotInfo effectue les deux fonctions clé suivantes :
- Elle définit l'apparence du lien Editer.
- Elle masque le lien Editer jusqu'à ce que le professionnel clique sur le bouton Afficher les informations sur la page en haut de la fenêtre d'aperçu du magasin.
Pour le magasin type Aurora, ces classes CSS sont définies dans le fichier suivant :
WCDE_installdir/workspace/Stores/WebContent/Aurora/css/CMC.css
4 L'élément <c:url définit une variable qui est l'URL d'édition en un clic.
5 L'élément <a crée le lien Editer et appelle la fonction JavaScript callManagementCenter, qui envoie l'URL à l'application Web du Centre de gestion.
Remarque : Pour fonctionner, un lien Editer n'a besoin que de la portion de code suivante à l'intérieur de l'élément <a :
```
<a href="javascript:void(0)" 
   onclick="parent.callManagementCenter('<wcf:out 
   escapeFormat="js" value="${clickToEditURL}"/>');">
   Edit</a>
```
Dans le fragment de code pris utilisé comme exemple, le reste du code dans l'élément <a est destiné à un usage IBM interne, par exemple à des tâches d'automatisation, et n'est pas nécessaire.