Fragmento de código para añadir un enlace Editar

Para añadir un enlace Editar directamente a una página de tienda o a una ventana emergente de vista previa de la tienda, debe utilizar un fragmento de código específico. El fragmento de código construye un URL EditBusinessObject del Centro de gestión para un objeto de negocio específico como, por ejemplo, una entrada de código o una actividad web.

El fragmento de código también puede hacer referencia a las variables de entorno y a clases CSS para controlar la disponibilidad y el aspecto del enlace Editar.

Parámetros para un enlace Editar

El enlace Editar debe incluir un conjunto de parámetros que proporciona el Centro de gestión con información sobre qué objeto de negocio abrir para editarlo. Debe proporcionar valores para las variables que se muestran en el texto en cursiva: 
<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>
Las variables son las que se listan aquí:
toolId
ID de la herramienta del Centro de gestión en la que se gestiona el objeto de negocio. La función pulsar para editar utilizar este ID para abrir la herramienta correcta cuando el usuario de negocio pulsa el enlace. Por ejemplo, catalogManagement es el ID de la herramienta para la herramienta Catálogos y marketingManagement es el ID de herramienta para la herramienta Marketing.

Puede buscar el ID de herramienta en el archivo ApplicationMenuItems.def, que define todos los elementos de menú en el Centro de gestión:

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

Por ejemplo, en el archivo ApplicationMenuItems.def, el ID para la herramienta Catálogos se especifica como el valor del parámetro id en la línea de código que se muestra en texto en negrita:

<ApplicationMenuItem
    actionName = "openBusinessObjectEditor"
    activeIconSrc = "catalogActiveTabIcon"
    displayName = "${shellResourceBundle.catalogManagementDisplayName}"
    id = "catalogManagement"
    inactiveIconSrc = "catalogInactiveTabIcon"
    toolDefinitionName = "catCatalogManagement"
    usage = "IBM_ViewCatalogTool"/>
storeId
ID de la tienda de la que se obtiene una vista previa. La función de pulsar para editar utiliza este ID para determinar qué tienda seleccionar en el Centro de gestión. Puede utilizar la variable del ID de tienda ${storeId} de forma que el ID de tienda actual se recupere y pase al URL de pulsar para editar.

HCL Commerce DeveloperHCL Commerce EnterprisePara un sitio ampliado, el valor storeSelection también se utiliza para determinar qué tienda seleccionar en el Centro de gestión.

langId
ID de idioma de la tienda de la que se obtiene una vista previa. Puede utilizar la variable de ID de idioma ${langId} de forma que el ID de idioma actual se recupere y pase al URL pulsar para editar.
HCL Commerce DeveloperHCL Commerce EnterprisestoreSelection
HCL Commerce DeveloperHCL Commerce EnterprisePara un sitio ampliado, el valor de preferencia de la tienda para el enlace. Este parámetro define el tipo de tienda que hay que seleccionar en el Centro de gestión cuando el usuario de empresa pulsa el enlace. Los valores válidos son los siguientes:
prompt
Visualiza una solicitud que permite al usuario de empresa seleccionar la tienda con elementos o la tienda de sitio ampliado. Este es el valor predeterminado. Si los usuarios de empresa utilizan la tienda de sitio ampliado y la tienda con elementos para gestionar los objetos de negocio que están relacionados con este enlace, utilice este valor.
assetStore
Abre la tienda con elementos de catálogo (la tienda con elementos del escaparate o la tienda con elementos del catálogo, la que se aplique al objeto de negocio que se está editando). Si los usuarios de negocio gestionan todos los objetos de negocio que están relacionados con este enlace en las tiendas con elementos, utilice este valor.
eSite
Abre la tienda de sitio ampliado. Si los usuarios de negocio gestionan todos los objetos de negocio que están relacionados con este enlace en la tienda de sitio ampliado, utilice este valor.

Si no tiene un sitio ampliado, puede hacer caso omiso de este parámetro.

Un desarrollador de TI puede cambiar el valor de preferencia de la tienda en cualquier momento.

searchType
Tipo de búsqueda que se ha definido para el objeto de negocio en el archivo de definición de objeto. La función de pulsar para editar utiliza el valor de tipo de búsqueda para buscar el objeto de negocio en el Centro de gestión. Por ejemplo, el tipo de búsqueda para entradas de catálogo es FindAllCatalogEntries y el tipo de búsqueda para zonas de e-Marketing es FindEMarketingSpots.

Puede buscar el tipo de búsqueda visualizando el archivo de definición de objeto para un objeto de negocio existente en la vía de acceso siguiente:

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

Por ejemplo, en el archivo ProductSKUPrimaryObjectDefinition.def para productos y los códigos de artículo, el tipo de búsqueda se especifica como el valor del parámetro searchType en la línea de código que se muestra en texto en negrita:

<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">
keyword
Un valor que se utiliza para buscar el objeto de negocio por palabra clave (text). La mejor opción para la palabra clave es el índice exclusivo para el objeto de negocio que está definido en el esquema de base de datos, por ejemplo:
  • ${partNumber} - El número de pieza para una entrada de catálogo.
  • ${emsName} - El nombre de la zona de e-Marketing.
objectId
Un valor que se utiliza para buscar el objeto de negocio por ID exclusivo (number). Como ejemplos de valores objectId tiene los siguientes:
  • ${productId} - El ID de la entrada de catálogo
  • ${emsId} - El ID de una zona de e-Marketing

Ejemplo del fragmento de código para un enlace Editar

El fragmento de código siguiente crea un enlace Editar para una entrada de catálogo en la tienda de inicio Aurora directamente en la página de detalles del producto. El código se copia del archivo 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>
Las notas siguientes explican las llamadas numeradas en el código de ejemplo:
  • 1 Este es un elemento <div existente en el archivo ProductDisplay.jsp, que define el área que contiene la imagen del producto. El código de enlace Editar se sitúa en este elemento <div de forma que el enlace aparece en el ángulo superior izquierdo del área. El único cambio en esta línea de código para la función pulsar para editar es la adición del nombre de clase CSS productDetail. Esta clase CSS se utiliza como indicador de objeto para indicar dónde está un enlace pulsar para editaren una página de la tienda. Se hace referencia a este indicador de objeto en el archivo StoreCommonUtilities.js en una función JavaScript que añade un resaltado visual al área definida por el elemento <div. El valor del indicador de objeto puede ser cualquier nombre que desee, pero debe utilizarse el nombre idéntico en el código de enlace y en el archivo StoreCommonUtilities.js. Para obtener más información, consulte Función de resaltado de pulsar para editar en el archivo StoreCommonUtilities.js.
  • 2 Este elemento <c:if incluye el código de enlace Editar para garantizar que el enlace solo aparezca cuando la página se represente durante una sesión de vista previa de la tienda que se inicia desde el Centro de gestión. Incluya este elemento <c:if y sus variables si el enlace Editar se encuentra directamente en una página de la tienda. Este elemento no es necesario si el enlace Editar se encuentra en una página emergente de la vista previa de la tienda.
    env_inPreview
    Las páginas de Aurora utilizan el código wcst:preview para establecer esta variable, que indica que la página se representa en modalidad de vista previa. En este caso, se visualiza el enlace.
    env_storePreviewLink
    Esta variable se establece en las páginas Aurora cuando está presente un elemento de vista previa. El elemento de vista previa indica que la sesión de vista previa se inició desde un URL de vista previa de la tienda generada. En este caso, el enlace no se muestra. Para obtener más información sobre URL generados, consulte Generar y compartir los URL de vista previa de la tienda.

    Para la tienda de inicio Aurora, estas dos variables se definen en el archivo siguiente:

    WCDE_installdir/workspace/Stores/WebContent/Aurora/Common/EnvironmentSetup.jspf

  • 3a, 3b Las clases CSS caption y ESpotInfoformatean el enlace Editar. La clase ESpotInfo realiza las dos funciones clave siguientes:
    • Formatea el aspecto del enlace Editar.
    • Oculta el enlace Editar hasta que el usuario de empresa pulse el botón Mostrar información de página en la parte superior de la ventana de vista previa de la tienda.

    Para la tienda de inicio Aurora, estas clases CSS se definen en el archivo siguiente:

    WCDE_installdir/workspace/Stores/WebContent/Aurora/css/CMC.css

  • 4 Este elemento <c:url define una variable que es el URL pulsar para editar.
  • 5 El elemento <a crea el enlace Editar y llama a la función de JavaScript callManagementCenter, que envía el URL a la aplicación web del Centro de gestión.
    Nota: Para que funcione correctamente, un enlace Editar solo necesita la parte siguiente del código en el elemento <a:
    <a href="javascript:void(0)" 
   onclick="parent.callManagementCenter('<wcf:out 
   escapeFormat="js" value="${clickToEditURL}"/>');">
   Edit</a>
    En el fragmento de ejemplo, el código adicional dentro del elemento <a es para fines internos de IBM, como la automatización, y no es necesario.