I previously wrote a post titled, WebSphere Commerce v7.0 Store Functions, that talked about leveraging store functions within your WebSphere Commerce v7.0 web site, and how to set them up and configure them for use. This post continues that discussion, and references how to add your new store functions to Management Center so that they are available and accessible to enable and disable.
During this tutorial, two variables will be encountered that need to be replaced while going through the tutorial. Please make the appropriate updates as required.
- ${STORE_ID} : Replace with the Store ID of the store to be updated.
- ${STORE_DIRECTORY} : Replace with the directory of the store to be updated
Step 1. Create New StoreLOB and StoreLOB_en_US Properties Files
To begin, you need to create two new properties files under the LOBTools/src directory, within an appropriate package. These property files will contain the applicable labels used in Management Center to describe your new store tabs, panels, groups, and functions.
- com/daharveyjr/commerce/store/client/lobtools/properties/StoreLOB.properties
- com/daharveyjr/commerce/store/client/lobtools/properties/StoreLOB_en_US.properties
Within the property files created above, place the applicable properties needed to label your tabs, panels, groups, and functions. An example of the file contents can be seen in the code block below, and this example will be used to complete the remainder of the tutorial.
# Panel CustomFeaturesPanel = Custom Features CustomFeaturesPanel.title = Custom Features CustomFeaturesPanel.description = Use the following checkboxes to enable/disable custom features for your store. # Groups CustomFeaturesPanel.group0.title = Custom CustomFeaturesPanel.group0.description = Custom Features # Function: CustomFunction1 CustomFunction1.checkboxEnable.label = Custom Function 1 CustomFunction1.checkboxEnable.title = Enable Custom Function 1.
Step 2. Modify StoreFlexFlowPropertiesView.def to Add the New Properties File Reference
Modify the StoreFlexFlowPropertiesView.def file located in the LOBTools/WebContent/config/commerce/store/propertiesViews/${STORE_DIRECTORY}, to add a new ResourceBundle element as shown below. Leave the existing ResourceBundle element there and add the new element right below it.
<ResourceBundle definitionName="stoFlexFlowExt_${STORE_ID}" baseName="com.daharveyjr.commerce.store.client.lobtools.properties.StoreLOB" />
Step 3. Modify StoreFlexFlowPropertiesView.def to Add the New Tab, Panel, Groups, and Function References
Begin by defining a new tab to contain the custom store functions that need to be referenced. Find the PropertyTabs element, and add a child PropertyTabPane element that is used to label and add your new tab the the list of existing tabs.
The PropertyTabPane element will contain a name and a text attribute which will be used to define and label the tab. Within each PropertyTabPane element, define a child PropertyPane element that contains a baseDefinitionName attribute that is used to determine the content that will be displayed in the tab. The baseDefinitionName attribute will be referenced later in the file to configure and setup the tab content.
An example of the new PropertyTabPane and child elements can be seen here:
<ObjectProperties definitionName="stoStoreProperties_${STORE_ID}" componentObjectNames="selectedStaticPage">
<PropertyTabs name="tabs">
<PropertyTabPane name="CustomFeatures" text="${stoFlexFlowExt_${STORE_ID}.CustomFeaturesPanel.title}">
<PropertyPane baseDefinitionName="stoCustomFeaturesFlexFlow_${STORE_ID}"/>
</PropertyTabPane>
........
</PropertyTabs>
</ObjectProperties>
Then, for each new tab added above, content needs to be defined. Tab content is defined using a PropertyPane element which contains definitionName attribute that references back to the baseDefinitionName attribute used above in the PropertyTabPane element.
Each PropertyPane element should contain a default child PropertyGroup element, which is defined by the name attribute of “group”. Whether or not the default group can be collapsed is controlled through the collapsable attribute, which can be set to “true” or “false”.
Within each default PropertyGroup a child PropertyStaticText element with a text attribute should be defined to give a description of the tab contents. The text attribute will reference back to the a property within StoreLOB properties file created previously.
An example of the new PropertyPane, and the default PropertyGroup are shown here:
<PropertyPane definitionName="stoCustomFeaturesFlexFlow_${STORE_ID}">
<PropertyGroup name="group" collapsable="false">
<PropertyStaticText text="${stoFlexFlowExt_${STORE_ID}.CustomFeaturesPanel.description}" />
</PropertyGroup>
......
</PropertyPane>
Next, inside of each PropertyPane element define additional PropertyGroup elements, to segment and identify groups of store functions that can be enabled or disabled. Each PropertyGroup element contains a groupTitle attribute which references back to the StoreLOB properties file, and can be configured to be open by default and collapsible. Also, add the PropertyStaticText child element, defining the text attribute to give the newly added PropertyGroup a description.
<PropertyPane definitionName="stoCustomFunctionsFlexFlow_${STORE_ID}">
<PropertyGroup name="group" collapsable="false">
<PropertyStaticText text="${stoFlexFlowExt_${STORE_ID}.CustomFeaturesPanel.description}" />
</PropertyGroup>
<PropertyGroup name="group0" groupTitle="${stoFlexFlowExt_${STORE_ID}.CustomFeaturesPanel.group0.title}" open="true" collapsable="true">
<PropertyStaticText text="${stoFlexFlowExt_${STORE_ID}.CustomFeaturesPanel.group0.description}" />
........
</PropertyGroup>
</PropertyPane>
Finally, add a PropertyCheckbox element for each new store function you’ve created, as a child element to the custom PropertyGroup element you created above. Add the name attribute, naming it after the store function created. Then add the helpText, and promptText attributes modifying their values to point to the applicable properties within the StoreLOB properties files. The next attribute, objectPath, will be modified to reflect the store function name. Lastly, add the propertyName attribute as “enabled”.
The resulting XML should be similar to the code block found below:
<PropertyPane definitionName="stoCustomFunctionsFlexFlow_${STORE_ID}">
<PropertyGroup name="group" collapsable="false">
<PropertyStaticText text="${stoFlexFlowExt_${STORE_ID}.CustomFeaturesPanel.description}" />
</PropertyGroup>
<PropertyGroup name="group0" groupTitle="${stoFlexFlowExt_${STORE_ID}.CustomFeaturesPanel.group0.title}" open="true" collapsable="true">
<PropertyStaticText text="${stoFlexFlowExt_${STORE_ID}.CustomFeaturesPanel.group0.description}" />
<PropertyCheckbox name="CustomFunction1.checkbox" helpText="${stoFlexFlowExt_${STORE_ID}.CustomFunction1.checkboxEnable.title}" promptText="${stoFlexFlowExt_${STORE_ID}.CustomFunction1.checkboxEnable.label}" objectPath="StoreFlow[name=CustomFunction1]" propertyName="enabled" />
</PropertyGroup>
</PropertyPane>
Step 4. Rebuild LOBTools
After the configuration to enable the store functions have been completed, a rebuild of the LOBTools project is required. Right-click on LOBTools, and select ‘Build OpenLaszlo Project’.
Step 5. Launch Management Center
Once the Rebuild of LOBTools has been completed, open up Management Center and verify the changes you’ve made and that your new tab and store functions are showing up.
