Code snippet to add an Edit link

To add an Edit link either directly in a store page or in a store preview pop-up window, you must use a specific code snippet. The code snippet constructs a Management Center EditBusinessObject URL for a specific business object, such as a catalog entry or a web activity.

The code snippet can also reference environment variables and CSS classes to control the availability and appearance of the Edit link.

Parameters for an Edit link

The Edit link must include a set of parameters that provide Management Center with information about which business object to open for editing. You must provide values for the variables that are shown in italic text:

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

The variables are listed here:

toolId

The ID of the Management Center tool in which the business object is managed. The click-to-edit function uses this ID to open the correct tool when the business user clicks the link. For example, catalogManagement is the tool ID for the Catalogs tool, and marketingManagement is the tool ID for the Marketing tool.

You can look up the tool ID in the ApplicationMenuItems.def file, which defines all the menu items in Management Center:

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

For example, in the ApplicationMenuItems.def file, the ID for the Catalogs tool is specified as the id parameter value in the line of code that is shown in bold text:

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

storeId

The ID of the store that is being previewed. The click-to-edit function uses this ID to determine which store to select in Management Center. You can use the store ID variable ${storeId} so that the current store ID is retrieved and passed in the click-to-edit URL.

WebSphere Commerce Developer WebSphere Commerce Enterprise For an extended site, the storeSelection value is also used to determine which store to select in Management Center.

langId

The language ID for the store that is being previewed. You can use the language ID variable ${langId} so that the current language ID is retrieved and passed in the click-to-edit URL.

storeSelection

For an extended site, the store preference value for the link. This parameter defines the store type to select in Management Center when the business user clicks the link. Valid values are the following:

prompt: Display a prompt that lets the business user select either the asset store or extended site store. This is the default value. If your business users use both the extended site store and the asset store to manage the business objects that relate to this link, use this value.
assetStore: Open the asset store (either the storefront asset store or the catalog asset store, whichever applies to the business object that is being edited). If your business users manage all business objects that relate to this link in the asset stores, use this value.
eSite: Open the extended site store. If your business users manage all business objects that relate to this link in the extended site store, use this value.

If you do not have an extended site, you can ignore this parameter.

An IT developer can change the store preference value at any time.

searchType

The search type that is defined for the business object in the object definition file. The click-to-edit function uses the search type value to find the business object in Management Center. For example, the search type for catalog entries is FindAllCatalogEntries, and the search type for e-Marketing Spots is FindEMarketingSpots.

You can look up the search type by viewing the object definition file for an existing business object at the following path:

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

For example, in the ProductSKUPrimaryObjectDefinition.def file for products and SKUs, the search type is specified as the searchType parameter value in the line of code that is shown in bold text:

<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

A value that is used to search for the business object by keyword (text). The best choice for the keyword is the unique index for the business object that is defined in the database schema, for example:

${partNumber} – the part number for a catalog entry
${emsName} – the name of an e-Marketing Spot

objectId

A value that is used to search for the business object by unique ID (number). Examples of objectId values are the following:

${productId} – the ID for a catalog entry
${emsId} – the ID for an e-Marketing Spot

Example of the code snippet for an Edit link

The following code snippet creates an Edit link for a catalog entry in the Aurora starter store directly on the product details page. The code is copied from the ProductDisplay.jsp file:

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>

The following notes explain the numbered callouts in the example code:

1 This is an existing <div element in the ProductDisplay.jsp file, which defines the area that contains the product image. The Edit link code is placed within this <div element so that the link displays in the upper left corner of the area. The only change to this line of code for the click-to-edit function is the addition of the CSS class name productDetail. This CSS class is used as an object indicator to indicate where a click-to-edit link is on a store page. This object indicator is referenced in the StoreCommonUtilities.js file in a JavaScript function that adds a visual highlight to the area defined by the <div element. The object indicator value can be any name that you want, but the identical name must be used in the link code and in the StoreCommonUtilities.js file. For more information, see Click-to-edit highlighting function in the StoreCommonUtilities.js file.
2 This <c:if element encloses the Edit link code to ensure that the link is displayed only when the page is rendered during a store preview session that is launched from Management Center. Include this <c:if element and its variables if your Edit link is directly in a store page. This element is not necessary if the Edit link is in a store preview pop-up page.

env_inPreview

The Aurora pages use the wcst:preview tag to set this variable, which indicates that the page is being rendered in preview mode. If so, the link is displayed.

env_storePreviewLink

This variable is set in the Aurora pages when a preview token is present. The preview token indicates that the preview session was launched from a generated store preview URL. If so, the link is not displayed. For more information about generated URLs, see Generating and sharing store preview URLs.

For the Aurora starter store, these two variables are defined in the following file:
WCDE_installdir/workspace/Stores/WebContent/Aurora/Common/EnvironmentSetup.jspf
3a, 3b The CSS classes caption and ESpotInfo format the Edit link. The ESpotInfo class performs the following two key functions:
- Formats the appearance of the Edit link.
- Hides the Edit link until the business user clicks the Show Page Information button at the top of the store preview window.
For the Aurora starter store, these CSS classes are defined in the following file:
WCDE_installdir/workspace/Stores/WebContent/Aurora/css/CMC.css
4 This <c:url element defines a variable that is the click-to-edit URL.
5 The <a element creates the Edit link and calls the callManagementCenter JavaScript function, which submits the URL to the Management Center web application.
Note: To function properly, an Edit link requires only the following portion of the code within the <a element:
```
<a href="javascript:void(0)" 
   onclick="parent.callManagementCenter('<wcf:out 
   escapeFormat="js" value="${clickToEditURL}"/>');">
   Edit</a>
```
In the example snippet, the additional code within the <a element is for internal IBM purposes, such as automation, and is not required.