Creating the promotion properties view for the user interface

In this lesson, you create a class Introduced in Feature Pack 3

or a definition that defines the user interface components that business users use when they create a promotion using the Management Center. These components include the customized gift reward grid you created in the previous lesson.

About this task

As you learned in the earlier lesson titled Planning the user interface customization, the input widgets you need for the Promotion tool user interface have already been defined for use in the existing promotion types. In the Management Center, each object definition has a different wcfObjectProperties class Introduced in Feature Pack 3

or properties view definition that is used to edit the properties of that specific object type. In the Promotions tool, all promotions are represented by a single object type. This means that they all share the same:

wcfObjectProperties class
properties view definition

Each promotion then has a property group specific to that promotion type. When a business user is creating a promotion, only the property groups for that specific promotion type are displayed in the Promotions tool user interface.

In this lesson, you define a property group that contains the widgets for the Purchase Condition and Reward section of the user interface specific to the new promotion type. The resulting properties view looks like this:

Procedure

Create a new directory for the properties object:
1. Complete one of the following steps:
  - In the Enterprise Explorer view, navigate to the LOBTools > WebContent > WEB-INF > src > lzx > mycompany > promotion directory.
  - In the Enterprise Explorer view, navigate to the LOBTools > WebContent > config > mycompany > promotion directory.
2. Right-click the promotion folder and click New > Folder.
3. In the Folder name field, type propertiesViews. Click Finish.
4. Right-click the propertiesViews folder and click New > Folder.
5. In the Folder name field, type promotionTypes. Click Finish.
  Your directory structure should now look like this screen capture:
Create a new file to define the property group:
1. Right-click the promotionTypes folder.
2. Click New > Other.
3. Name your new file:
  1. ProductLevelFreeGiftProperties.lzx
  2. ProductLevelFreeGiftProperties.def
4. Click Finish to save the file.
  The file opens in the default XML editor.

Complete one of the following steps:

Option Description

Option	Description
ProductLevelFreeGiftProperties.lzx	In this new class file: Copy and paste the following code sample: <library> <!--Property group for the ProductLevelFreeGift promotion.--> <class name="extProductLevelFreeGiftProperties" extends="wcfPropertyGroup" collapsable="false"> <wcfEnablementCondition conditionId="promotionType" propertyName="promotionType" enablementValue="ProductLevelFreeGift"/> <wcfPropertyGroup name="purchaseConditionAndRewardGroup" groupTitle="${promotionResources.promotion_purchaseConditionAndRewardTitle.string}" open="true"> 1 <wcfPropertyGroup name="purchaseConditionGroup" collapsable="false" displayGrouping="true"> <wcfPropertyChildListEditor objectPath="ProductLevelFreeGiftPurchaseCondition" objectTypes="Identifier_CatalogEntry,Identifier_InheritedCatalogEntry" name="catalogEntry" listClass="proProductElementTypeGrid" required="true" promptText="${promotionResources.promotion_Select_Catalog_Entry.string}" helpText="${promotionResources.promotion_Product_Promotion_SKU_Search_helpText.string}"/> <wcfPropertyStepper objectPath="ProductLevelFreeGiftPurchaseCondition" propertyName="BaseItemTotalPrice" required="true" promptText="${extPromotionResources.promotion_Minimum_purchase_TotalPrice.string}" /> </wcfPropertyGroup> 2 <wcfPropertyGroup name="rewardGroup" collapsable="false" displayGrouping="true"> <wcfPropertyChildListEditor objectPath="ProductLevelFreeGiftPurchaseCondition" name="giftSKU" objectTypes="Identifier_GiftCatalogEntry,Identifier_InheritedGiftCatalogEntry" listClass="extProGiftRewardGrid" required="true" promptText="${promotionResources.promotion_Free_gift_sku.string}" helpText="${promotionResources.promotion_FreeGift_SKU_Search_helpText.string}"/> </wcfPropertyGroup> </wcfPropertyGroup> </class> </library> In this code sample, the property group is separated into two subgroups: 1 purchaseConditionGroup The first widget instantiated in this subgroup is a wcfPropertyChildListEditor widget. In the Management Center, business users use this widget to specify the catalog entry that must be purchased to qualify for the promotion. The `objectPath` specifies where in the model this input value will be stored. The `objectTypes` specify the types of objects that can be displayed in the list. The `listClass` specifies the class for this view. The second widget is a wcfPropertyStepper. In the Management Center, business users use this widget to select the total price threshold of catalog entries that must be purchased. 2 rewardGroup The wcfPropertyChildListEditor widget is instantiated in this subgroup. In the Management Center, business users use this widget to specify multiple catalog entries as gifts. In this section, observe the line in boldface text. The value for the `listClass` attribute is "extProGiftRewardGrid"; this is your customized gift reward grid. To allow business users to add additional rows to the gift reward grid, the line in boldface text does not include the attribute singleChild="true"; therefore this grid can have multiple rows. Take note of the line near the top of the snippet containing the <wcfEnablementCondition> element. This indicates whether the parent object is enabled. In this customization code, the new promotion type property group is enabled only when promotionType is ProductLevelFreeGift. Business users select the promotion type from the Promotion Type Selector window in the Promotions tool. Save and close the file.
ProductLevelFreeGiftProperties.def	In this new definition file: Copy and paste the following code sample: <Definitions> <!--Property group for the ProductLevelFreeGift promotion.--> <PropertyGroup definitionName="extProductLevelFreeGiftProperties" collapsable="false"> <EnablementCondition conditionId="promotionType" propertyName="promotionType" enablementValue="ProductLevelFreeGift"/> <PropertyGroup name="purchaseConditionAndRewardGroup" groupTitle="${promotionResources.promotion_purchaseConditionAndRewardTitle}" open="true"> 1 <PropertyGroup name="purchaseConditionGroup" collapsable="false" displayGrouping="true"> <PropertyChildListEditor objectPath="ProductLevelFreeGiftPurchaseCondition" objectTypes= "Identifier_CatalogEntry,Identifier_InheritedCatalogEntry" name="catalogEntry" listDefinitionName="proProductElementTypeGrid" required="true" promptText="${promotionResources.promotion_Select_Catalog_Entry}" helpText= "${promotionResources.promotion_Product_Promotion_SKU_Search_helpText}"/> <PropertyStepper objectPath="ProductLevelFreeGiftPurchaseCondition" propertyName="BaseItemTotalPrice" required="true" promptText= "${extPromotionResources.promotion_Minimum_purchase_TotalPrice}"/> </PropertyGroup> 2 <PropertyGroup name="rewardGroup" collapsable="false" displayGrouping="true"> <PropertyChildListEditor objectPath="ProductLevelFreeGiftPurchaseCondition" name="giftSKU" objectTypes= "Identifier_GiftCatalogEntry,Identifier_InheritedGiftCatalogEntry" listDefinitionName="extProGiftRewardGrid" required="true" promptText="${promotionResources.promotion_Free_gift_sku}" helpText= "${promotionResources.promotion_FreeGift_SKU_Search_helpText}"/> </PropertyGroup> </PropertyGroup> </PropertyGroup> </Definitions> In this code sample, the property group is separated into two subgroups: 1 purchaseConditionGroup The first widget instantiated in this subgroup is a wcfPropertyChildListEditor widget. In the Management Center, business users use this widget to specify the catalog entry that must be purchased to qualify for the promotion. The `objectPath` specifies where in the model this input value will be stored. The `objectTypes` specify the types of objects that can be displayed in the list. The `listDefinitionName` specifies the definition for this view. The second widget is a wcfPropertyStepper. In the Management Center, business users use this widget to select the total price threshold of catalog entries that must be purchased. 2 rewardGroup The wcfPropertyChildListEditor widget is instantiated in this subgroup. In the Management Center, business users use this widget to specify multiple catalog entries as gifts. In this section, observe the line in boldface text. The value for the `listDefinitionName` attribute is "extProGiftRewardGrid"; this is your customized gift reward grid. To allow business users to add additional rows to the gift reward grid, the line in boldface text does not include the attribute singleChild="true"; therefore this grid can have multiple rows. Take note of the line near the top of the snippet containing the <EnablementCondition> element. This indicates whether the parent object is enabled. In this customization code, the new promotion type property group is enabled only when promotionType is ProductLevelFreeGift. Business users select the promotion type from the Promotion Type Selector window in the Promotions tool. Save and close the file.

ProductLevelFreeGiftProperties.lzx

In this new class file:

Copy and paste the following code sample:

<library>
   <!--Property group for the ProductLevelFreeGift promotion.-->
   <class name="extProductLevelFreeGiftProperties" extends="wcfPropertyGroup" collapsable="false">
       <wcfEnablementCondition conditionId="promotionType" propertyName="promotionType" enablementValue="ProductLevelFreeGift"/>
       <wcfPropertyGroup name="purchaseConditionAndRewardGroup" groupTitle="${promotionResources.promotion_purchaseConditionAndRewardTitle.string}" open="true">
            1 <wcfPropertyGroup name="purchaseConditionGroup" collapsable="false" displayGrouping="true"> 
                 <wcfPropertyChildListEditor 
                     objectPath="ProductLevelFreeGiftPurchaseCondition"
                     objectTypes="Identifier_CatalogEntry,Identifier_InheritedCatalogEntry" name="catalogEntry"
                     listClass="proProductElementTypeGrid" required="true" promptText="${promotionResources.promotion_Select_Catalog_Entry.string}" 
                     helpText="${promotionResources.promotion_Product_Promotion_SKU_Search_helpText.string}"/>
                 <wcfPropertyStepper 
                     objectPath="ProductLevelFreeGiftPurchaseCondition" 
                     propertyName="BaseItemTotalPrice" 
                     required="true" promptText="${extPromotionResources.promotion_Minimum_purchase_TotalPrice.string}" />
            </wcfPropertyGroup>
            2 <wcfPropertyGroup name="rewardGroup" collapsable="false" displayGrouping="true">  
                 <wcfPropertyChildListEditor
                     objectPath="ProductLevelFreeGiftPurchaseCondition" name="giftSKU"
                     objectTypes="Identifier_GiftCatalogEntry,Identifier_InheritedGiftCatalogEntry" 
                     listClass="extProGiftRewardGrid" required="true" promptText="${promotionResources.promotion_Free_gift_sku.string}"                     
                     helpText="${promotionResources.promotion_FreeGift_SKU_Search_helpText.string}"/>      
              </wcfPropertyGroup>   
      </wcfPropertyGroup>
   </class>
</library>

In this code sample, the property group is separated into two subgroups:

1 purchaseConditionGroup: The first widget instantiated in this subgroup is a wcfPropertyChildListEditor widget. In the Management Center, business users use this widget to specify the catalog entry that must be purchased to qualify for the promotion. The objectPath specifies where in the model this input value will be stored. The objectTypes specify the types of objects that can be displayed in the list. The listClass specifies the class for this view. The second widget is a wcfPropertyStepper. In the Management Center, business users use this widget to select the total price threshold of catalog entries that must be purchased.
2 rewardGroup: The wcfPropertyChildListEditor widget is instantiated in this subgroup. In the Management Center, business users use this widget to specify multiple catalog entries as gifts. In this section, observe the line in boldface text. The value for the listClass attribute is "extProGiftRewardGrid"; this is your customized gift reward grid. To allow business users to add additional rows to the gift reward grid, the line in boldface text does not include the attribute singleChild="true"; therefore this grid can have multiple rows.

Take note of the line near the top of the snippet containing the <wcfEnablementCondition> element. This indicates whether the parent object is enabled. In this customization code, the new promotion type property group is enabled only when promotionType is ProductLevelFreeGift. Business users select the promotion type from the Promotion Type Selector window in the Promotions tool.

Save and close the file.

ProductLevelFreeGiftProperties.def

In this new definition file:

Copy and paste the following code sample:

<Definitions>
    <!--Property group for the ProductLevelFreeGift promotion.-->
    <PropertyGroup definitionName="extProductLevelFreeGiftProperties"
        collapsable="false">
        <EnablementCondition conditionId="promotionType" propertyName="promotionType"
            enablementValue="ProductLevelFreeGift"/>
        <PropertyGroup name="purchaseConditionAndRewardGroup"
            groupTitle="${promotionResources.promotion_purchaseConditionAndRewardTitle}"
            open="true">
            1 <PropertyGroup name="purchaseConditionGroup" collapsable="false"
                displayGrouping="true"> 
                <PropertyChildListEditor
                    objectPath="ProductLevelFreeGiftPurchaseCondition"
                    objectTypes=
                        "Identifier_CatalogEntry,Identifier_InheritedCatalogEntry"
                    name="catalogEntry"
                    listDefinitionName="proProductElementTypeGrid"
                    required="true"
                    promptText="${promotionResources.promotion_Select_Catalog_Entry}"
                    helpText=
                "${promotionResources.promotion_Product_Promotion_SKU_Search_helpText}"/>
                <PropertyStepper 
                    objectPath="ProductLevelFreeGiftPurchaseCondition" 
                    propertyName="BaseItemTotalPrice" 
                    required="true"
                    promptText=
                       "${extPromotionResources.promotion_Minimum_purchase_TotalPrice}"/>
            </PropertyGroup>
            2 <PropertyGroup name="rewardGroup" collapsable="false" displayGrouping="true">  
                <PropertyChildListEditor
                    objectPath="ProductLevelFreeGiftPurchaseCondition" name="giftSKU"
                    objectTypes=
                       "Identifier_GiftCatalogEntry,Identifier_InheritedGiftCatalogEntry" 
                    listDefinitionName="extProGiftRewardGrid" required="true"
                    promptText="${promotionResources.promotion_Free_gift_sku}"
                    helpText=
                        "${promotionResources.promotion_FreeGift_SKU_Search_helpText}"/>
            </PropertyGroup>   
        </PropertyGroup>
   </PropertyGroup>
</Definitions>

In this code sample, the property group is separated into two subgroups:

1 purchaseConditionGroup: The first widget instantiated in this subgroup is a wcfPropertyChildListEditor widget. In the Management Center, business users use this widget to specify the catalog entry that must be purchased to qualify for the promotion. The objectPath specifies where in the model this input value will be stored. The objectTypes specify the types of objects that can be displayed in the list. The listDefinitionName specifies the definition for this view. The second widget is a wcfPropertyStepper. In the Management Center, business users use this widget to select the total price threshold of catalog entries that must be purchased.
2 rewardGroup: The wcfPropertyChildListEditor widget is instantiated in this subgroup. In the Management Center, business users use this widget to specify multiple catalog entries as gifts. In this section, observe the line in boldface text. The value for the listDefinitionName attribute is "extProGiftRewardGrid"; this is your customized gift reward grid. To allow business users to add additional rows to the gift reward grid, the line in boldface text does not include the attribute singleChild="true"; therefore this grid can have multiple rows.

Take note of the line near the top of the snippet containing the <EnablementCondition> element. This indicates whether the parent object is enabled. In this customization code, the new promotion type property group is enabled only when promotionType is ProductLevelFreeGift. Business users select the promotion type from the Promotion Type Selector window in the Promotions tool.

Save and close the file.

Right-click the ProductLevelFreeGiftProperties.lzx file; then click Build OpenLaszlo Project on the context menu.
Register the ProductLevelFreeGiftProperties.lzx file in the promotion extensions library:
1. In the PromotionExtensionsLibrary.lzx file, which should still be open from a previous step, add the following include statement within the <library> element:
```
<include href="../../mycompany/promotion/propertiesViews/promotionTypes/ProductLevelFreeGiftProperties.lzx"/>
```
2. Save the file.
3. Right-click the PromotionExtensionsLibrary.lzx file; then click Build OpenLaszlo Project on the context menu.

Complete one of the following steps:

Option Description

Option	Description
Create an instance of your new property group	Instantiate the new property group within the overall promotions properties view class, proPromotionManageTabPaneContent, which is located in the PromotionPropertiesView.lzx file: In the Enterprise Explorer view, navigate to the LOBTools > WebContent > WEB-INF > src > lzx > commerce > promotion > propertiesViews directory. Open the PromotionPropertiesView.lzx file. Locate the section of the file where the other property groups are instantiated; here are a few examples: `<proCategoryLevelPerItemPercentDiscountProperties/> <proCategoryLevelPerItemValueDiscountProperties/> <proProductLevelPWPPercentDiscountProperties/>` Create an instance of your promotion property group at the bottom of the list by adding the following code: `<!-- Customization: Properties View for new Promotion Type --> <extProductLevelFreeGiftProperties /> <!-- Customization: End -->` Save and close the file. Right-click the PromotionPropertiesView.lzx file; then click Build OpenLaszlo Project on the context menu.
Add your new property group to the promotions properties view definition	Add the new property group to the property pane definition, proPromotionManageTabPaneContent, which is located in the PromotionPropertiesView.def file: In the Enterprise Explorer view, navigate to the LOBTools > WebContent > config > commerce > promotion > propertiesViews directory. Open the PromotionPropertiesView.def file. Locate the section of the file where the other property groups are instantiated; here are a few examples: `<PropertyGroup baseDefinitionName="proCategoryLevelFixedShippingDiscountProperties"/> <PropertyGroup baseDefinitionName="proProductLevelPWPPercentDiscountProperties"/> <PropertyGroup baseDefinitionName="proMultipleItemsPercentDiscountProperties"/>` Add your promotion property group to the bottom of the list by adding the following code: `<!-- Customization: Properties View for new Promotion Type --> <PropertyGroup baseDefinitionName="extProductLevelFreeGiftProperties"/> <!-- Customization: End -->` Save and close the file.

Create an instance of your new property group

Instantiate the new property group within the overall promotions properties view class, proPromotionManageTabPaneContent, which is located in the PromotionPropertiesView.lzx file:

In the Enterprise Explorer view, navigate to the LOBTools > WebContent > WEB-INF > src > lzx > commerce > promotion > propertiesViews directory.
Open the PromotionPropertiesView.lzx file.

Locate the section of the file where the other property groups are instantiated; here are a few examples:


 <proCategoryLevelPerItemPercentDiscountProperties/>
 <proCategoryLevelPerItemValueDiscountProperties/>
 <proProductLevelPWPPercentDiscountProperties/>

Create an instance of your promotion property group at the bottom of the list by adding the following code:

<!-- Customization: Properties View for new Promotion Type -->
<extProductLevelFreeGiftProperties />
<!-- Customization: End -->

Save and close the file.
Right-click the PromotionPropertiesView.lzx file; then click Build OpenLaszlo Project on the context menu.

Add your new property group to the promotions properties view definition

Add the new property group to the property pane definition, proPromotionManageTabPaneContent, which is located in the PromotionPropertiesView.def file:

In the Enterprise Explorer view, navigate to the LOBTools > WebContent > config > commerce > promotion > propertiesViews directory.
Open the PromotionPropertiesView.def file.

Locate the section of the file where the other property groups are instantiated; here are a few examples:

<PropertyGroup baseDefinitionName="proCategoryLevelFixedShippingDiscountProperties"/>
<PropertyGroup baseDefinitionName="proProductLevelPWPPercentDiscountProperties"/>
<PropertyGroup baseDefinitionName="proMultipleItemsPercentDiscountProperties"/>

Add your promotion property group to the bottom of the list by adding the following code:

<!-- Customization: Properties View for new Promotion Type -->
<PropertyGroup baseDefinitionName="extProductLevelFreeGiftProperties"/>
<!-- Customization: End -->

Save and close the file.

Results

So far in this tutorial, you have modeled the runtime promotion XML, planned the user interface, and created new resource bundles for custom text strings. You have also completed the properties view definition for the new promotion type and added it into the main properties view list. You have also completed the main user interface element definitions for the new promotion type, that is, the object definition, the template and the properties view. In the next lesson, you add your promotion type to the Promotion Type Selector window so that business users can select the new promotion type as a starting point for a promotion.