Migrating Management Center user interface files to support new store functions and store style settings

Migrate the Management Center user interface files manually to ensure that your site is configured to support new store functions and store style settings that are available with the Store Management tool in Management Center.

Before you begin

Ensure that you run the store functions migration utility to migrate store functions and store style from WebSphere Commerce Accelerator to Management Center.

About this task

The Management Center user interface code is stored in the WCDE_installdir \workspace\LOBTools\WebContent\config\commerce\store\propertiesViews\ storedir \StoreFlexFlowPropertiesView.def definition file. The actual user interface text that is shown in the Store Management tool is maintained in a separate properties file. The default user interface properties files are in the WCDE_installdir \workspace\WC\properties\tools\stores\ storedir \devtools\flow\ui directory.

Note: For any extended sites changes, modify the storefront asset store StoreFlexFlowPropertiesView.def definition file.

The following sample code shows the contents of the StoreFlexFlowPropertiesView.def file that is used in the Madisons starter store:


<?xml version="1.0" encoding="UTF-8"?>
<!--
 =================================================================
  Licensed Materials - Property of IBM>
  WebSphere Commerce>
  (C) Copyright IBM Corp. 2010 All Rights Reserved.>
  US Government Users Restricted Rights - Use, duplication or
  disclosure restricted by GSA ADP Schedule Contract with
  IBM Corp.
 =================================================================
>
 
-->
<Definitions>
  <!--  Madisons -->
1
  <ResourceBundle definitionName="stoFlexFlow_10001" baseName="tools.stores."Madisons".devtools.flow.ui.config" />
    <ObjectProperties definitionName="stoStoreProperties_10001">
      <PropertyTabs name="tabs">
        <PropertyTabPane name="generalTab" text="${stoStoreResources.generalTabTitle}">
          <PropertyPane baseDefinitionName="stoStorePropertiesPane"/>
        </PropertyTabPane>
2
        <PropertyTabPane name="Styles" text="${stoFlexFlow_10001}.StylesPanel.title}">
3
          <PropertyPane baseDefinitionName="stoStyles_10001"/>
        </PropertyTabPane>
2
        <PropertyTabPane name="Interactions" text="${stoFlexFlow_10001.InteractionsPanel.title}">
3
           <PropertyPane baseDefinitionName="stoInteractionsFlexFlow_10001"/>
			  </PropertyTabPane>
			  <PropertyTabPane name="Registration" text="${stoFlexFlow_10001.RegistrationPanel.title}">
				  <PropertyPane baseDefinitionName="stoRegistrationFlexFlow_10001"/>
			  </PropertyTabPane>
			  <PropertyTabPane name="Catalog" text="${stoFlexFlow_10001.CatalogPanel.title}">
				  <PropertyPane baseDefinitionName="stoCatalogFlexFlow_10001"/>
			  </PropertyTabPane>
			  <PropertyTabPane name="Orders" text="${stoFlexFlow_10001.OrdersPanel.title}">
				  <PropertyPane baseDefinitionName="stoOrdersFlexFlow_10001"/>
			  </PropertyTabPane>
			  <PropertyTabPane name="Checkout" text="${stoFlexFlow_10001.CheckoutPanel.title}">
			 	  <PropertyPane baseDefinitionName="stoCheckoutFlexFlow_10001"/>
			  </PropertyTabPane>
			  <PropertyTabPane name="Analytics" text="${stoFlexFlow_10001.AnalyticsPanel.title}">
				  <PropertyPane baseDefinitionName="stoAnalyticsFlexFlow_10001"/>
			  </PropertyTabPane>
			  <PropertyTabPane name="StoreLocator" text="${stoFlexFlow_10001.StoreLocatorPanel.title}">
		      <PropertyPane baseDefinitionName="stoStoreLocatorFlexFlow_10001"/>
			  </PropertyTabPane>
		  </PropertyTabs>
	  </ObjectProperties>
	    
      <PropertyPane definitionName="stoAnalyticsFlexFlow_10001">
        <PropertyGroup name="group" collapsable="false">
          <PropertyStaticText text="${stoFlexFlow_10001.AnalyticsPanel.description}" />
          <PropertyCheckbox name="Analytics.checkbox" helpText="${stoFlexFlow_10001.Analytics.checkboxEnable.title}" promptText="${stoFlexFlow_10001.Analytics.checkboxEnable.label}" objectPath="StoreFlow[name=Analytics]" propertyName="enabled" />
        </PropertyGroup>
      </PropertyPane>
	    
      <PropertyPane definitionName="stoCatalogFlexFlow_10001">
        <PropertyGroup name="group" collapsable="false">
          <PropertyStaticText text="${stoFlexFlow_10001.CatalogPanel.description}" />
          <PropertyCheckbox name="Search.checkbox" promptText="${stoFlexFlow_10001.Search.checkboxEnable.label}" objectPath="StoreFlow[name=search]" propertyName="enabled" />
          <PropertyCheckbox name="ProductCompare.checkbox" promptText="${stoFlexFlow_10001.ProductCompare.checkboxEnable.label}" objectPath="StoreFlow[name=ProductCompare]" propertyName="enabled" />
          <PropertyCheckbox name="InventoryAvailability.checkbox" promptText="${stoFlexFlow_10001.InventoryAvailability.checkboxEnable.label}" objectPath="StoreFlow[name=InventoryAvailability]" propertyName="enabled" />
          <PropertyCheckbox name="ProductRankings.checkbox" promptText="${stoFlexFlow_10001.ProductRankings.checkboxEnable.label}" objectPath="StoreFlow[name=ProductRankings]" propertyName="enabled" />
          <PropertyCheckbox name="BrowsingHistory.checkbox" promptText="${stoFlexFlow_10001.BrowsingHistory.checkboxEnable.label}" objectPath="StoreFlow[name=BrowsingHistory]" propertyName="enabled" />
          <PropertyCheckbox name="CategorySubscriptions.checkbox" promptText="${stoFlexFlow_10001.CategorySubscriptions.checkboxEnable.label}" objectPath="StoreFlow[name=CategorySubscriptions]" propertyName="enabled" />
        </PropertyGroup>
      </PropertyPane>
	    
      <PropertyPane definitionName="stoCheckoutFlexFlow_10001">
        <PropertyGroup name="group" collapsable="false">
          <PropertyStaticText text="${stoFlexFlow_10001.CheckoutPanel.description}" />
          <PropertyCheckbox name="QuickCheckout.checkbox" helpText="${stoFlexFlow_10001.QuickCheckout.checkboxEnable.title}" promptText="${stoFlexFlow_10001.QuickCheckout.checkboxEnable.label}" objectPath="StoreFlow[name=quickCheckout]" propertyName="enabled" />
          <PropertyCheckbox name="Shipment.checkbox" helpText="${stoFlexFlow_10001.Shipment.checkboxEnable.title}" promptText="${stoFlexFlow_10001.Shipment.checkboxEnable.label}" objectPath="StoreFlow[name=MultipleShipments]" propertyName="enabled" />
          <PropertyCheckbox name="FutureOrders.checkbox" helpText="${stoFlexFlow_10001.FutureOrders.checkboxEnable.title}" promptText="${stoFlexFlow_10001.FutureOrders.checkboxEnable.label}" objectPath="StoreFlow[name=FutureOrders]" propertyName="enabled" />
          <PropertyCheckbox name="ShippingInstructions.checkbox" helpText="${stoFlexFlow_10001.ShippingInstructions.checkboxEnable.title}" promptText="${stoFlexFlow_10001.ShippingInstructions.checkboxEnable.label}" objectPath="StoreFlow[name=ShippingInstructions]" propertyName="enabled" />
          <PropertyCheckbox name="PromotionCode.checkbox" helpText="${stoFlexFlow_10001.PromotionCode.checkboxEnable.title}" promptText="${stoFlexFlow_10001.PromotionCode.checkboxEnable.label}" objectPath="StoreFlow[name=promotionCode]" propertyName="enabled" />
          <PropertyCheckbox name="PromotionChoiceOfFreeGift.checkbox" helpText="${stoFlexFlow_10001.PromotionChoiceOfFreeGift.checkboxEnable.title}" promptText="${stoFlexFlow_10001.PromotionChoiceOfFreeGift.checkboxEnable.label}" objectPath="StoreFlow[name=promotionChoiceOfFreeGift]" propertyName="enabled" />
          <PropertyCheckbox name="PunchoutPayment.checkbox" helpText="${stoFlexFlow_10001.PunchoutPayment.checkboxEnable.title}" promptText="${stoFlexFlow_10001.PunchoutPayment.checkboxEnable.label}" objectPath="StoreFlow[name=PunchoutPayment]" propertyName="enabled" />
        </PropertyGroup>
      </PropertyPane>
	    
      <PropertyPane definitionName="stoOrdersFlexFlow_10001">
        <PropertyGroup name="group" collapsable="false">
          <PropertyStaticText text="${stoFlexFlow_10001.OrdersPanel.description}" />
          <PropertyCheckbox name="Orders.QuickOrder.checkbox" helpText="${stoFlexFlow_10001.Orders.QuickOrder.checkboxEnable.title}" promptText="${stoFlexFlow_10001.Orders.QuickOrder.checkboxEnable.label}" objectPath="StoreFlow[name=QuickOrder]" propertyName="enabled" />
          <PropertyCheckbox name="WishList.checkbox" helpText="${stoFlexFlow_10001.WishList.checkboxEnable.title}" promptText="${stoFlexFlow_10001.WishList.checkbox.label}" objectPath="StoreFlow[name=wishList]" propertyName="enabled" />
          <PropertyCheckbox name="MiniShopCart.checkbox" helpText="${stoFlexFlow_10001.MiniShopCart.checkboxEnable.title}" promptText="${stoFlexFlow_10001.MiniShopCart.checkbox.label}" objectPath="StoreFlow[name=miniShopCart]" propertyName="enabled" />
          <PropertyCheckbox name="OrderStatus.checkbox" helpText="${stoFlexFlow_10001.OrderStatus.checkboxEnable.title}" promptText="${stoFlexFlow_10001.OrderStatus.checkboxEnable.label}" objectPath="StoreFlow[name=TrackingStatus]" propertyName="enabled" />
        </PropertyGroup>
      </PropertyPane>
      
      <PropertyPane definitionName="stoRegistrationFlexFlow_10001">
        <PropertyGroup name="group" collapsable="false">
          <PropertyStaticText text="${stoFlexFlow_10001.RegistrationPanel.description}" />
          <PropertyCheckbox name="Preferences.Currency.checkbox" promptText="${stoFlexFlow_10001.Preferences.Currency.checkboxEnable.label}" objectPath="StoreFlow[name=preferredCurrency]" propertyName="enabled" />
          <PropertyCheckbox name="Preferences.Language.checkbox" promptText="${stoFlexFlow_10001.Preferences.Language.checkboxEnable.label}" objectPath="StoreFlow[name=preferredLanguage]" propertyName="enabled" />
          <PropertyCheckbox name="Demographics.Gender.checkbox" promptText="${stoFlexFlow_10001.Demographics.Gender.checkboxEnable.label}" objectPath="StoreFlow[name=Gender]" propertyName="enabled" />
          <PropertyCheckbox name="EmailOption.checkbox" promptText="${stoFlexFlow_10001.EmailOption.checkboxEnable.label}" objectPath="StoreFlow[name=EmailOption]" propertyName="enabled" />
          <PropertyCheckbox name="MobilePhoneOption.checkbox" promptText="${stoFlexFlow_10001.MobilePhoneOption.checkboxEnable.label}" objectPath="StoreFlow[name=MobilePhone]" propertyName="enabled" />
          <MultiValueCheckbox name="Demographics.AgeOptions.checkbox" promptText="${stoFlexFlow_10001.Demographics.AgeOptions.checkboxEnable.label}">
            <MultiValueSelection name="true">
              <Xml name="values">
                <enabled objectPath="StoreFlow[name=AgeOptions]">true</enabled>
                <enabled objectPath="StoreFlow[name=DateOfBirth]" significant="false">true</enabled>
                <enabled objectPath="StoreFlow[name=Age]" significant="false">false</enabled>
              </Xml>
            </MultiValueSelection>
            <MultiValueSelection name="false">
              <Xml name="values">
                <enabled objectPath="StoreFlow[name=AgeOptions]">false</enabled>
                <enabled objectPath="StoreFlow[name=DateOfBirth]" significant="false">false</enabled>
                <enabled objectPath="StoreFlow[name=Age]" significant="false">false</enabled>
              </Xml>
            </MultiValueSelection>
          </MultiValueCheckbox>
          <MultiValueSelector name="Demographics.AgeOptions.radios" promptText="${stoFlexFlow_10001.Demographics.AgeOptions.radio.label}" useRadioButtons="true">
            <EnablementCondition objectPath="StoreFlow[name=AgeOptions]" propertyName="enabled" enablementValue="true" />
            <MultiValueSelection displayName="${stoFlexFlow_10001.Demographics.DateOfBirth.radio.label}" name="dob">
              <Xml name="values">
                  <enabled objectPath="StoreFlow[name=DateOfBirth]">true</enabled>
                  <enabled objectPath="StoreFlow[name=Age]">false</enabled>
              </Xml>
            </MultiValueSelection>
            <MultiValueSelection displayName="${stoFlexFlow_10001.Demographics.Age.radio.label}" name="age">
              <Xml name="values">
                <enabled objectPath="StoreFlow[name=DateOfBirth]">false</enabled>
                <enabled objectPath="StoreFlow[name=Age]">true</enabled>
              </Xml>
            </MultiValueSelection>
          </MultiValueSelector>
        </PropertyGroup>
      </PropertyPane>

      <PropertyPane definitionName="stoInteractionsFlexFlow_10001">
        <PropertyGroup name="group" collapsable="false">
          <PropertyStaticText text="${stoFlexFlow_10001.InteractionsPanel.description}" />
          <PropertyCheckbox name="ProductQuickView.checkbox" helpText="${stoFlexFlow_10001.ProductQuickView.checkboxEnable.title}" promptText="${stoFlexFlow_10001.ProductQuickView.checkboxEnable.label}" objectPath="StoreFlow[name=ProductQuickView]" propertyName="enabled" />
          <PropertyCheckbox name="AjaxAddToCart.checkbox" helpText="${stoFlexFlow_10001.AjaxAddToCart.checkboxEnable.title}" promptText="${stoFlexFlow_10001.AjaxAddToCart.checkbox.label}" objectPath="StoreFlow[name=AjaxAddToCart]" propertyName="enabled" />
          <PropertyCheckbox name="CheckoutFlow.checkbox" helpText="${stoFlexFlow_10001.CheckoutFlow.checkboxEnable.title}" promptText="${stoFlexFlow_10001.AjaxCheckout.checkboxEnable.label}" objectPath="StoreFlow[name=AjaxCheckout]" propertyName="enabled" />
          <PropertyCheckbox name="MyAccount.checkbox" helpText="${stoFlexFlow_10001.MyAccount.checkboxEnable.title}" promptText="${stoFlexFlow_10001.AjaxMyAccountPage.checkboxEnable.label}" objectPath="StoreFlow[name=AjaxMyAccountPage]" propertyName="enabled" />
          <PropertyCheckbox name="ProductDnD.checkbox" helpText="${stoFlexFlow_10001.ProductDnD.checkboxEnable.title}" promptText="${stoFlexFlow_10001.ProductDnD.checkboxEnable.label}" objectPath="StoreFlow[name=ProductDnD]" propertyName="enabled" />
        </PropertyGroup>
      </PropertyPane>
      <PropertyPane definitionName="stoStoreLocatorFlexFlow_10001">
        <PropertyGroup name="group" collapsable="false">
          <PropertyStaticText text="${stoFlexFlow_10001.StoreLocatorPanel.description}" />
          <PropertyCheckbox name="StoreLocator.checkbox" promptText="${stoFlexFlow_10001.StoreLocator.checkbox.label}" objectPath="StoreFlow[name=StoreLocator]" propertyName="enabled" />
        </PropertyGroup>
      </PropertyPane>
      <PropertyPane definitionName="stoStyles_10001">
      <PropertyGroup name="group" collapsable="false">
      <PropertyStaticText text="${stoFlexFlow_10001.StylesPanel.description}" />
      <MultiValueSelector name="StylePanelOptions" promptText="${stoFlexFlow_10001.Styles.style.radio.label}" useRadioButtons="true">
        <MultiValueSelection imageSrc="/lobtools/images/stores/"Madisons"/style/styles/style1.png">
          <Xml name="values">
            <url objectPath="StoreFileRef[name=StyleDir]">include/styles/style1/</url>
          </Xml>
        </MultiValueSelection>
      </MultiValueSelector>
      <MultiValueSelector name="ColorPanelOptions" promptText="${stoFlexFlow_10001.Styles.color.radio.label}" useRadioButtons="true">
        <EnablementCondition objectPath="StoreFileRef[name=StyleDir]" propertyName="url" enablementValue="include/styles/style1/" />
        <MultiValueSelection imageSrc="/lobtools/images/stores/"Madisons"/style/colors/color1_1.png" name="color1">
          <Xml name="values">
            <url objectPath="StoreFileRef[name=vfile.color]">images/colors/color1/</url>
            <url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common1_1$locale$.css</url>
            <url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_1$locale$.css</url>
          </Xml>
        </MultiValueSelection>
        <MultiValueSelection imageSrc="/lobtools/images/stores/"Madisons"/style/colors/color1_2.png" name="color2">
          <Xml name="values">
            <url objectPath="StoreFileRef[name=vfile.color]">images/colors/color2/</url>
            <url objectPath="StoreFileRef[name=vfile.stylesheet]">css/common1_2$locale$.css</url>
            <url objectPath="StoreFileRef[name=vfile.stylesheetie]">css/commonie1_2$locale$.css</url>
          </Xml>
        </MultiValueSelection>
      </MultiValueSelector>
    </PropertyGroup>
  </PropertyPane>

</Definitions>

1 ResourceBundle: Specifies the location of the properties file that contains the user interface text. For more information, see Defining properties files and bundle keys for user interface text .
2 PropertyTabPane: Defines a tab to show in the properties view within the Store Management tool to display store function or store style settings.
3 PropertyPane: Defines the information to show within each of the store function and store style tabs in the properties view within the Store Management tool .

The following screen capture shows how the tabs defined within the previous Madisons starter store code sample appear in the Store Management tool within Management Center. Tabbed properties view in the Store Management tool

To update the Management Center user interface files to support the new store function and style settings:

Procedure

In the StoreFlexFlowPropertiesView.def definition file, specify the location of the properties file that contains the user interface text.
For example:
```
<ResourceBundle definitionName="stoFlexFlow_10001" baseName="tools.stores."Madisons".devtools.flow.ui.config" />
```

In the properties file that contains the user interface text, specify the following information:

Option Description

Option	Description
`PropertyTabPane`	Define the tabs to show in the properties view within the Store Management tool to display the store function and store style settings. The following tabs are specified by default to store your store function and store style settings: Style Customer Interactions Registration Catalog Orders Checkout Analytics Store Locator You can add a new tab to the properties view . You can also change the order of the tabs within the properties view .
`PropertyPane`	Define the information to show within each of the store function and store style tabs in the properties view within the Store Management tool .

PropertyTabPane

Define the tabs to show in the properties view within the Store Management tool to display the store function and store style settings. The following tabs are specified by default to store your store function and store style settings:

Style
Customer Interactions
Registration
Catalog
Orders
Checkout
Analytics
Store Locator

You can add a new tab to the properties view .

You can also change the order of the tabs within the properties view .

PropertyPane Define the information to show within each of the store function and store style tabs in the properties view within the Store Management tool .

For more information on adding new store feature to the Store Management tool, review the Registering the store feature in the Store Management tool tutorial.

For more information about registering a new style, see Registering a new style for the Madisons starter store.

Test your changes by viewing them in the Management Center, by using the following URL: https:// hostname:8000/lobtools.

Results

The Store Management tool within Management Center can now use your migrated store function settings and store style settings.