Develop > Presentation layer > Management Center framework > Customize the Management Center user interface > Create a new tool for the Management Center > Define OpenLaszlo classes instantiated in a tool definition class > Defining views for a Management Center object

Define 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, and so on. 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 you have defined the new object.

To define a properties view for a business object:

Procedure

1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.

2. 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 the new custom tool.

3. Create an OpenLaszlo class file with this syntax: Business object name in camel casePropertiesView.lzx. For example, ProductPropertiesView.lzx.

4. Within the properties view class 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 lower case), 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.

5. 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.

6. Define a class that extends wcfObjectProperties. Name the class using a three-character Management Center component code (in lower case), 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 defined in the previous steps as children 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>       
   

7. Name of the properties view class as the propertiesClass attribute of the object definition (wcfObjectDefinition) for which this properties view is being declared.

8. 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 the work:

1. Right-click LOBTools Project; then click Build OpenLaszlo Project to produce an updated ManagementCenter.swf file under the WCDE_INSTALL\workspace\LOBTools\WebContent directory. This is the default environment setting.

2. Test the work by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.

3. Deploy your files to the production environment.

Related concepts

Management Center user interface

Related tasks

Create a new tool for the Management Center

Define OpenLaszlo classes instantiated in a tool definition class

Define views for a Management Center object

+

Search Tips   |   Advanced Search