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

Procedure

  1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
  2. Complete one of the following steps:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1In 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 you want to customize.
    • Introduced in Feature Pack 2In the Enterprise Explorer view, expand LOBTools > WebContent > config > commerce > Management_Center_component > listViewDefinitions, where Management_Center_component is the name of the tool you want to customize.
  3. Complete one of the following steps:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1Determine 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.
    • Introduced in Feature Pack 2Determine the type of list view you are updating and locate the definition name that defines that type of list view. All list view definitions 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, definitionName="catCatalogEntryBrowseGrid" defines a list view for a catalog entry object within the catalog (cat) tool in the Management Center.
      Tip: List view definitions are always instances of wcfObjectGrid. For example catCatalogEntryBrowseGrid is an instance of wcfObjectGrid.
  4. Determine the location in which you want 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 definition classes all 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.
    OptionDescription
    WebSphere Commerce Version 7.0.0.0Feature Pack 1Add a simple text column as the first column in a list view WebSphere Commerce Version 7.0.0.0Feature Pack 1Add 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"/>
    
    Introduced in Feature Pack 2Add a simple text column as the first column in a list view Introduced in Feature Pack 2Add a <GridText> tag as the first column tag in the list view definition:
    <GridComboBox propertyName="name" name="merchandisingAssocType"
    	required="true"
    	editable="true"
    	text="${catalogResources.merchandisingAssociationAssocType_ColumnHeader}"
    	width="120"/>
    WebSphere Commerce Version 7.0.0.0Feature Pack 1Add a column that supports a combination box in a list view (that is, users can select values for the column from a list) WebSphere Commerce Version 7.0.0.0Feature Pack 1Add 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"/>   
    Introduced in Feature Pack 2Add a column that supports a combination box in a list view (that is, users can select values for the column from a list) Introduced in Feature Pack 2Add a <GridComboBox> tag. To use wcfGridComboBox, the wcfPropertyDefinition class (which defines the options list for the property) must already be defined in the object definition. The following example demonstrates the declaration of a combination box column that you can use to choose the type of merchandising association:
    <GridComboBox propertyName="name" name="merchandisingAssocType"
    	required="true"
    	editable="true"
    	text="${catalogResources.merchandisingAssociationAssocType_ColumnHeader}"
    	width="120"/>

What to do next

After you complete your customization:
Version Steps
  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 setting is the default environment setting.
  2. Test your changes by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.
  3. Deploy your changes to your production environment.
Introduced in Feature Pack 2
  1. Test your changes by viewing them in the Management Center, using this URL: https://hostname:8000/lobtools.
  2. Deploy your changes to your production environment.