Develop > Presentation layer > Management Center framework > Customize the Management Center user interface > Customizing an existing Management Center tool

Add a column to a list view

You can add a new table column to an existing Management Center list view.

Before you begin

Tip: This task file provides the generic steps for adding a column to a list view. For a tutorial that includes this topic, refer to Add a new column to the product list view.

You can add a column to a list view to display a business object property. If you are creating a new property for an object, ensure that you have completed the following tasks to customize the persistence layer and the Business Object Manager before you customize the user interface:

1. Created a new WebSphere Commerce table in the schema.

2. Generated object relational metadata and the physical SDO.

3. Configured the Business Object Manager to include new properties in user data.

4. Updated query templates for read and update.

To add a new column to an existing list view within the Management Center:

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 > commerce > Management_Center_component > listViewDefinitions, where Management_Center_component is the name of the tool to customize.

3. Determine the type of list view you are updating and locate the class name that defines that type of list view. All list view classes follow this naming convention: the name begins with a three-character Management Center component code, followed by the type of object, and then the type of list view. For example, class name="catCatalogEntryGrid" defines a list view for a catalog entry object within the catalog (cat) tool in the Management Center.

   Tip: A list views always extends wcfObjectGrid. For example catCatalogEntryGrid extends wcfObjectGrid.

4. Determine the location in which to place the new column in relation to other columns in the list view for the object. The columns are displayed in the order that they are defined.

5. Add a tag to define a new column to the list view. Columns are defined by classes that extend wcfGridColumn. The naming convention for these classes include the widget that is displayed in the column cells. For example, the wcfGridText class is used to define a column that displays text editors in the cells, and the lzx/commerce/foundation/restricted/ComboBox.lzx/wcfGridComboBox class is used to define a column that displays combination boxes.

   1. To add a simple text column as the first column in a list view, add a <wcfGridText> tag as the first column tag in the list view class:

      <class extends="wcfObjectGrid" name="catCatalogEntryGrid">
      <wcfGridText name="column_ID" objectPath="object_path" propertyName="property_name" 
      editable="true_or_false" text="column_heading" visible="true_or_false" width="pixels"/>
      

      The following example shows how to use the <wcfGridText> tag to add a simple 90 pixel column, called Price, to an editable list view:

      <wcfGridText name="price" objectPath="Product/ProductDescription" propertyName="x_product_price" editable="true" text="Price" visible="true" width="90"/>
      

   2. To add a column that supports a combination box in a list view (that is, users can select values for the column from a list), add a <wcfGridComboBox> tag.

      To use wcfGridComboBox, the wcfPropertyDefinition class (which defines the options list for the property) must already be defined in the object definition class. The following example demonstrates the declaration of a combination box column that you can use to choose the type of merchandising association:

      <wcfGridComboBox propertyName="name" name="merchandisingAssocType" required="true" editable="true" text="${catalogResources.merchandisingAssociationAssocType_ColumnHeader.string}" width="120"/>   
      

What to do next

After you complete the customization:

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

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

3. Deploy your changes to the production environment.

Related concepts

Management Center shell

Management Center user interface

+

Search Tips   |   Advanced Search