Integrating the Catalog Item Editor

Article
11/17/2011

The Catalog Item Editor, a Microsoft Silverlight control, lets you search for and edit product and category properties, as well as edit product and category relationships.

This topic contains the following:

Configuring the Catalog Item Editor
Integrating the Catalog Item Editor

Configuring the Catalog Item Editor

You can edit the MicrosoftCommerceCatalogItemEditor.xml file to configure properties that you want to exclude, and properties that you want to disable.

The MicrosoftCommerceCatalogItemEditor.xml file has the following default settings:

<mCore:StringCollection x:Key="EditPropertiesToExclude">
        <sys:String>InternalId</sys:String>
        <sys:String>ParentInternalId</sys:String>
        <sys:String>DateModified</sys:String>
        <sys:String>IsVirtualCatalog</sys:String>
        <sys:String>CatalogName</sys:String>
        <sys:String>IntroductionDate</sys:String>
        <sys:String>OriginalListPrice</sys:String>
        <sys:String>Brand</sys:String>
        <sys:String>CategoryPage</sys:String>
        <sys:String>CatalogName</sys:String>
        <sys:String>OriginalProductId</sys:String>
        <sys:String>InventoryCondition</sys:String>
        <sys:String>ProductCode</sys:String>
        <sys:String>Rating</sys:String>
        <sys:String>UseCategoryPricing</sys:String>
        <sys:String>Thumbnail_filename</sys:String>
        <sys:String>TargetProductId</sys:String>
        <sys:String>TargetVariantId</sys:String>
        <sys:String>Image_filename</sys:String>
        <sys:String>Image_height</sys:String>
        <sys:String>Image_width</sys:String>
        <sys:String>CatalogEntityType</sys:String>
    </mCore:StringCollection>

  <mCore:StringCollection x:Key="EditPropertiesToDisable">
    <sys:String>BaseCatalogName</sys:String>
    <sys:String>CatalogId</sys:String>
    <sys:String>DefinitionName</sys:String>
    <sys:String>Id</sys:String>
  </mCore:StringCollection>

Integrating the Catalog Item Editor

The following procedure shows you how to integrate the Catalog Item Editor with the Commerce Server Business Administration Ribbon or a Web page.

This section contains:

Integration with the Business Administration Ribbon
Integration on a Web Page

Integration with the Business Administration Ribbon

To integrate the Catalog Item Editor with the Commerce Server Business Administration Ribbon, you must create a configuration file and the file must be referenced in the Commerce Server Business Administration Ribbon configuration file.

Note

The following procedure suggests editing files on a server. This procedure is only an example. The recommended approach is to test in a separate environment and deploy only after the changes have been approved.

To integrate the Catalog Item Editor with the Business Administration Ribbon

Create a toolbar module configuration file called MicrosoftCommerceCatalogItemEditor.xml and add the following code (See Business Administration Ribbon for more information.):

<?xml version="1.0" encoding="utf-8" ?>
<Plugin>
  <Context>Product</Context>
  <ControlName> Microsoft.Commerce.BusinessManagement.CatalogItemEditor.Controls.PlugIn</ControlName>
  <Assembly> Microsoft.Commerce.BusinessManagement.CatalogItemEditor.Application.dll</Assembly>
  <Xap> MicrosoftCommerceCatalogItemEditor.xap</Xap>
</Plugin>

Make changes to the Toolbar.xml configuration file to add this component to its display. In the Toolbar.xml configuration file, find the TabItem in which you want this module to display, and add the following code:

<controls:ToolBarModule ConfigFile="MicrosoftCommerceCatalogItemEditor.xml" x:Name="moduleCatalogItemEditor">
        <controls:ToolBarModule.InitResources>
          <ResourceDictionary>
            <sys:String x:Key="OnClick">FloatSilverlight("ProductImageEditSilverlight", "/ClientBin/MicrosoftCommerceCatalogItemEditor.xap", "ResourceFileUris=CsManagementResources.xml MicrosoftCommerceCatalogItemEditorResources.xml", 100, 10, 800, 650, 525, 630, true, "App.RequestClose()")</sys:String>
            <mCore:LocalizedValueDictionary x:Key="Label">
              <sys:String x:Key="en-US">Product Images</sys:String>
              <sys:String x:Key="en-CA">Product Images</sys:String>
              <sys:String x:Key="fr-CA">Images du Produit</sys:String>
            </mCore:LocalizedValueDictionary>
          </ResourceDictionary>
        </controls:ToolBarModule.InitResources>
      </controls:ToolBarModule>

In the ResourceDictionary of the ToolbarModule, specify the Javascript function that is invoked when a button is clicked on the Commerce Server Business Administration Ribbon. The default implementation for the Solution Storefront is shown below:

function FloatSilverlight(objectId, xap, initParams, x, y, w, h, minW, minH, isModal, silverlightMethodToRequestClose) {

    if (objectId == null) {
        var randomId = Math.floor(Math.random() * 100000);
        objectId = "randomObjectId" + randomId;
    }

    var floaterId = "floater_" + objectId;

    var content = document.createElement("div");
    content.className = "slContentElement";

    /* Hide the Commerce admin toolbar when the first "window" is spawned */
    if (Floater.allFloaters == null || Floater.allFloaters.length == 0) {
        var adminToolbarElement = document.getElementById("SilverlightToolBar_parent");

        if (adminToolbarElement != null) {
            /* If IE, shrink and move offscreen. For other browsers, simply make invisible */
            if (document.all) {
                adminToolbarElement.style.position = "absolute";
                adminToolbarElement.style.left = "-1px";
                adminToolbarElement.style.width = "1px";
            }
            else {
                adminToolbarElement.style.visibility = "hidden";
            }
        }
    }

    /* The Silverlight application must execute the script provided in the onClose initparam when it wishes to "close" it's container */
    initParams = "onClose=Floater.closeAsync(\'" + floaterId + "\')," + initParams;

    content.innerHTML =
        "<object id=\"" + objectId + "\" data=\"data:application/x-silverlight-2,\" type=\"application/x-silverlight-2\" width=\"100%\" height=\"100%\">" +
        " <param name=\"source\" value=\"" + xap + "\"/>" +
        " <param name=\"initParams\" value=\"" + initParams + "\" />" +
        " <param name=\"onerror\" value=\"onSilverlightError\" />" +
        " <param name=\"background\" value=\"white\" />" +
        " <param name=\"windowless\" value=\"false\" />" +
        " <param name=\"minRuntimeVersion\" value=\"3.0.40624.0\" />" +
        " <a href=\"https://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0\" style=\"text-decoration: none;\">" +
        "  <img src=\"https://go.microsoft.com/fwlink/?LinkId=108181\" alt=\"Click here to install Silverlight\" style=\"border-style: none\"/>" +
        " </a>" +
        "</object>";

    var closeHandler = function(floater) {
        if (silverlightMethodToRequestClose != null) {
            try {
                /* The Silverlight application must expose the following method */
                return eval("document.getElementById(objectId).Content." + silverlightMethodToRequestClose);
            } catch (exc) {
            }
        }
        return true;
    }

    var newFloater = new Floater(floaterId, content, x, y, w, h, minW, minH, isModal, closeHandler);

    return newFloater;
}

Use this implementation in whole, or make changes as required. Some of the function parameters reference the XAP file for the Silverlight application, as well as any server side configuration files that are merged with the application’s resource dictionary at runtime. The remaining function parameters can be inferred from the implementation above. Ensure that all of the referenced files are present and co-located with the XAP file for the Commerce Server Business Administration Ribbon.

The last function parameter for FloatSilverlight, RequestClose, specifies the method to invoke when closing the Silverlight window that is launched with the application. Internally, this function invokes the Javascript MSCS_CatalogItemEdtiorClosed. The default implementation is shown below. Add any custom closing code to this method:
```
function MSCS_CatalogItemEdtiorClosed() 
{
    // This function is called when the Product Image Manager window closes
    // It currently reloads the page to display changes but can be modified to suit particular needs.
    window.location.reload(true);
}
```
The ResourceDictionary contains the button label, localized for different languages. Make changes as required.

The Catalog Item Editor relies on a JavaScript function to redirect the user for help. Through the user interface, this is achieved by clicking the "?" button next to the title. The default implementation for Solution Storefront is shown below. Make changes as required to redirect for Category or Product:

function MSCS_ShowHelp(topicId, fullCultureCode) 
{
    // Maps the id to a help page URL and then opens a window for that location.
    // Add cases to support additional topic mappings.
    var url = null;

    switch (topicId) 
{
        case "MSCSCatalogItemRelationshipEditor":
            url = "https://go.microsoft.com/fwlink/?LinkID=153463";
            break;
        case "MSCSCatalogProductEditor":
            url = "https://go.microsoft.com/fwlink/?LinkId=153473";
            break;
        case "MSCSCatalogCategoryEditor":
            url = "https://go.microsoft.com/fwlink/?LinkId=153474";
            break;
        case "MSCSCatalogImageManager":
            url = "https://go.microsoft.com/fwlink/?LinkId=153475";
            break;
    }

    if (url == null) 
{
        alert("No help page defined for topic '" + topicId + "' for culture " + fullCultureCode + ". Please contact the system administrator.");
    }
    else 
{
        var helpWindow = window.open(url, "MSCS_ShowHelpWindow", 'copyhistory=no, directories=yes, height=600, location=yes, menubar=yes, resizable=yes, scrollbars=yes, toolbar=yes, status=yes, width=1000');
    }
}

Integration on a Web Page

To open the Catalog Item Editor directly from a Web page, follow the steps outlined in the previous topic, disregarding any reference to the toolbar. Provide the FloatSilverlight JavaScript function to invoke the Silverlight application when some specific action is taken on the page, for example, clicking a button.

Integrating the Catalog Item Editor

Configuring the Catalog Item Editor

Integrating the Catalog Item Editor

Integration with the Business Administration Ribbon

To integrate the Catalog Item Editor with the Business Administration Ribbon

Integration on a Web Page

See Also

Other Resources

Additional resources