Defining a properties view for a business object

A properties view shows all of the details for a business object. You can edit an existing object, or create a new instance of one (for example, a detailed view of all the criteria for a promotion) within a properties view.A properties view can contain multiple tabs, and within these tabs, there can be various user interface widgets, such as entry fields, check boxes, radio buttons, lists, tables, combination boxes. A properties view can also contain one or more property groups (wcfPropertyGroup) to help organize the details of the business object. To access a properties view, use the toolbar or menu to create a new object or navigate to an existing object and select the open action.

Before you begin

Before you define a properties view for a business object, ensure that you have defined the new object.

Procedure

Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
Complete one of the following steps:
- In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > lzx > your_company_name > Management_Center_component > propertiesViews, where Management_Center_component is the name of your new custom tool.
- In the Enterprise Explorer view, expand LOBTools > WebContent > config > your_company_name > Management_Center_component > propertiesViews, where Management_Center_component is the name of your new custom tool.

Create a properties view file:

Option	Description
OpenLaszlo properties view library file	Use the following syntax to create this file: `Business object name in camel casePropertiesView.lzx`. For example, ProductPropertiesView.lzx.
Properties view definition file	Use the following syntax to create this file: `Business object name in camel casePropertiesView.def`. For example, ProductPropertiesView.def.

Within this new properties view file:

Option Description

Option	Description
OpenLaszlo properties view library file	Define a class that extends wcfPropertyPane for each tab within the properties view. Name each class using a three-character Management Center component code (in lowercase), the business object name, and `TabPaneContent`. For example, if you are working with a product and this tab includes pricing information for the product, name the tab class catProductPriceTabPaneContent. Add property groups (wcfPropertyGroup) and user interface widgets (wcfPropertiesComponent) to the property pane class (wcfPropertyPane). For a list and details about the widgets that a properties view supports, refer to the OpenLaszlo API documentation for wcfPropertiesComponent and lzx/commerce/foundation/restricted/PropertiesComponent.lzx/wcfPropertyEditor Define a class that extends wcfObjectProperties. Name the class using a three-character Management Center component code (in lowercase), the business object name, and Properties. For example, catProductProperties. Add the tabs to the properties view class by declaring an instance of wcfPropertyTabs that includes instances of wcfPropertyTabPane. Instantiate the property pane classes that are defined in the previous steps as a child of the tab panes. The following example demonstrates the declaration of a properties view that has two tabs: `<class extends="wcfObjectProperties" name="catProductProperties"> <wcfPropertyTabs> <wcfPropertyTabPane text="${catalogResources.manageProductTab.string}"> <catManageProduct/> </wcfPropertyTabPane> <wcfPropertyTabPane text="${catalogResources.descriptiveAttributesTab.string}"> <catCatalogEntryDescriptiveAttributes/> </wcfPropertyTabPane> </wcfPropertyTabs> </class>` Specify the name of the properties view class as the propertiesClass attribute of the object definition (wcfObjectDefinition) for which this properties view is being declared.
Properties view definition file	Create a definition that extends wcfPropertyPane for each tab within the properties view. Name each definition using a three-character Management Center component code (in lowercase), the business object name, and TabPaneContent. For example, if you are working with a product and this tab includes pricing information for the product, name the tab definition catProductPriceTabPaneContent. Add property groups (wcfPropertyGroup) and user interface widgets (wcfPropertiesComponent) to the property pane class (wcfPropertyPane). For a list and details about the widgets that a properties view supports, refer to the OpenLaszlo API documentation for wcfPropertiesComponent and wcfPropertyEditor. Create a definition that extends wcfObjectProperties. Name the definition using a three-character Management Center component code (in lowercase), the business object name, and Properties. For example, catProductProperties. Add the tabs to the properties view by adding a wcfPropertyTabs element that includes wcfPropertyTabPane elements. Add the property pane definitions that are defined in the previous steps as a child of the tab panes. The following example demonstrates the declaration of a properties view that has two tabs: `<ObjectProperties definitionName="catProductProperties"> <PropertyTabs> <PropertyTabPane text="${catalogResources.manageProductTab}"> <PropertyTabPane baseDefinitionName="catManageProduct"/> </PropertyTabPane> <PropertyTabPane text="${catalogResources.descriptiveAttributesTab}"> <PropertyPane baseDefinitionName="catCatalogEntryDescriptiveAttributes"/> </PropertyTabPane> </PropertyTabs> </ObjectProperties>` Specify the name of the properties view definition as the propertiesDefinitionName attribute of the object definition (wcfObjectDefinition) for which this properties view is being declared.

OpenLaszlo properties view library file

Define a class that extends wcfPropertyPane for each tab within the properties view. Name each class using a three-character Management Center component code (in lowercase), the business object name, and TabPaneContent. For example, if you are working with a product and this tab includes pricing information for the product, name the tab class catProductPriceTabPaneContent.
Add property groups (wcfPropertyGroup) and user interface widgets (wcfPropertiesComponent) to the property pane class (wcfPropertyPane). For a list and details about the widgets that a properties view supports, refer to the OpenLaszlo API documentation for wcfPropertiesComponent and lzx/commerce/foundation/restricted/PropertiesComponent.lzx/wcfPropertyEditor
Define a class that extends wcfObjectProperties. Name the class using a three-character Management Center component code (in lowercase), the business object name, and Properties. For example, catProductProperties. Add the tabs to the properties view class by declaring an instance of wcfPropertyTabs that includes instances of wcfPropertyTabPane. Instantiate the property pane classes that are defined in the previous steps as a child of the tab panes.
The following example demonstrates the declaration of a properties view that has two tabs:
```
<class extends="wcfObjectProperties" name="catProductProperties">

  <wcfPropertyTabs>

    <wcfPropertyTabPane text="${catalogResources.manageProductTab.string}">
      <catManageProduct/>
    </wcfPropertyTabPane>

    <wcfPropertyTabPane text="${catalogResources.descriptiveAttributesTab.string}">
      <catCatalogEntryDescriptiveAttributes/>
    </wcfPropertyTabPane>

  </wcfPropertyTabs>

</class>	   
```
Specify the name of the properties view class as the propertiesClass attribute of the object definition (wcfObjectDefinition) for which this properties view is being declared.

Properties view definition file

Create a definition that extends wcfPropertyPane for each tab within the properties view. Name each definition using a three-character Management Center component code (in lowercase), the business object name, and TabPaneContent. For example, if you are working with a product and this tab includes pricing information for the product, name the tab definition catProductPriceTabPaneContent.
Add property groups (wcfPropertyGroup) and user interface widgets (wcfPropertiesComponent) to the property pane class (wcfPropertyPane). For a list and details about the widgets that a properties view supports, refer to the OpenLaszlo API documentation for wcfPropertiesComponent and wcfPropertyEditor.
Create a definition that extends wcfObjectProperties. Name the definition using a three-character Management Center component code (in lowercase), the business object name, and Properties. For example, catProductProperties. Add the tabs to the properties view by adding a wcfPropertyTabs element that includes wcfPropertyTabPane elements. Add the property pane definitions that are defined in the previous steps as a child of the tab panes.
The following example demonstrates the declaration of a properties view that has two tabs:
```
<ObjectProperties definitionName="catProductProperties">
  <PropertyTabs>
    <PropertyTabPane text="${catalogResources.manageProductTab}">
      <PropertyTabPane baseDefinitionName="catManageProduct"/>
    </PropertyTabPane>

    <PropertyTabPane text="${catalogResources.descriptiveAttributesTab}">
      <PropertyPane baseDefinitionName="catCatalogEntryDescriptiveAttributes"/>
    </PropertyTabPane>
  </PropertyTabs>
</ObjectProperties>
```
Specify the name of the properties view definition as the propertiesDefinitionName attribute of the object definition (wcfObjectDefinition) for which this properties view is being declared.

Optional: Use the wcfViewOption class to declare a view option that business users can use to toggle between different views within the properties view of an object. You can use enablement conditions that reference view options to control the visibility of property groups and property tab panes. You can declare more than one instance of wcfViewOption as a child of wcfPrimaryObjectDefinition. When the properties view of the primary object is visible, the view options are enabled in the View menu.

What to do next

After you complete your customization:


Version	Steps
	Right-click LOBTools Project; then click Build OpenLaszlo Project to produce an updated ManagementCenter.swf file under the `workspace_dir`\LOBTools\WebContent directory. This setting is the default environment setting. Test your changes by viewing them in the Management Center, using this URL: https://`hostname`:8000/lobtools. Deploy your changes to your production environment.
	Test your changes by viewing them in the Management Center, using this URL: https://`hostname`:8000/lobtools. Deploy your changes to your production environment.