Customizing Column Configuration

The ColumnConfiguration object is located in Service Agent.

Column Configuration with Dojo

The properties for ColumnConfiguration within Dojo are:

Property

Description

cellRendererPage

The page fragment component that can contain a client-side JavaScript function to render the cell contents. Includes the full Nucleus path to the component

dataRendererPage

The page fragment component that returns server-side data in JSON that inserts a cell. Includes the full Nucleus path to the component

defaultSort

Is set to either ascending or descending sorting or left blank for no sorting.

field

The field name identifier for the data to render in the column from the data model. UI-only columns without a backing data representation should leave the field parameter undefined.

sortField

The name of the data model field on which to sort, which is different than field. If this property is undefined and sorting is enabled using defaultSort, the data is sorted on the field property. If this property is defined and sorting is enabled using defaultSort, the data is sorted on the sortField property. This property allows a column to contain rendering and markup that does not interfere with the sorting of the field. For example, the ViewLink column can have a link to view an item where the column is not sorted on the link markup, but on a separate corresponding data value.

isVisible

Whether to display the column in the UI or only to send back the data for the column. This is useful for JavaScript widgets that store invisible column data for other columns. For example, an onClick function in the ID field can use an invisible DBState field to identify what to do when an order is opened.

resourceBundle

The resource bundle that contains the column display name

resourceKey

The key that references the column display name in the resource bundle

width

The extent of the column using the Dojo grid syntax (e.g. ‘5em’ or ‘auto’)

styles

The column CSS styles. Note: Styles are not modifiable for tables.

The following is an example of the /atg/commerce/custsvc/ui/tables/order/
ViewLink.properties column configuration:

$class=atg.svc.agent.ui.tables.ColumnConfiguration

defaultSort=ascending
field=viewLink
sortField=id
width=4em
resourceBundle=atg.commerce.csr.Messages
resourceKey=view-order
isVisible=true

cellRendererPage=/atg/commerce/custsvc/ui/tables/order/ViewLinkPage
dataRendererPage=/atg/commerce/custsvc/ui/tables/order/ColumnRendererPage
Column Configuration using an HTML Table

The properties for ColumnConfiguration using an HTML table are:

Property

Description

dataRendererPage

The page fragment component that returns server-side data in JSON that inserts a cell. Includes the full Nucleus path to the component

field

The field name identifier for the data to render in the column from the data model. UI-only columns without a backing data representation should leave the field parameter undefined.

isVisible

Whether to display the column in the UI or only to send back the data for the column. This is useful for JavaScript widgets that store invisible column data for other columns. For example, an onClick function in the ID field can use an invisible DBState field to identify what to do when an order is opened.

resourceBundle

The resource bundle that contains the column display name

resourceKey

The key that references the column display name in the resource bundle

width

The extent of the column using the Dojo grid syntax (e.g. ‘5em’ or ‘auto’)

The following is an example of the /atg/svc/agent/ui/tables/customer/LastName.properties column configuration:

$class=atg.svc.agent.ui.tables.ColumnConfiguration

field=lastName
resourceBundle=atg.svc.agent.WebAppResources
resourceKey=customer.results.lastName
isVisible=true

dataRendererPage=/atg/svc/agent/ui/tables/customer/ColumnRendererPage
Customizing Column Attributes

The steps for customizing column title, sorting and width are similar in that they update properties in the column configuration component. Note: Do not use quotes when setting values in this map.

To begin customization, override the column configuration by performing the following:

  1. Create a new application module for customizations. Include this module when starting JBoss. Refer to the ATG Installation and Configuration Guide for information on creating new application modules and starting JBoss.

  2. Locate the properties file that defines the appropriate column configuration.

  3. Inside the customization module, create a properties file at the corresponding path that contains no properties.

Customizing a Column Title

  1. Create or edit a resource bundle for customized strings in the customization module.

  2. In the properties file for the column, update the resourceBundle and resourceKey properties to point to the corresponding resource bundle and key that contain the customized string. This overrides the default values for these properties. For example:

    defaultSort=ascending
    field=viewLink
    sortField=id
    width=4em
    resourceBundle=atg.commerce.csr.newMessages
    resourceKey=new-view-order
    isVisible=true

Configuring Column Sorting

  1. In the appropriate properties file for the column, set the defaultSort property to either ascending or descending. Removing the property or setting the property to an empty string will remove sorting. For example:

    defaultSort=ascending
    field=viewLink
    sortField=id
    width=4em
    resourceBundle=atg.commerce.csr.Messages
    resourceKey=view-order
    isVisible=true

  2. To configure a Dojo-grid column to sort on a field other than the data field that is rendered in the column, set the sortField to any field in the data model.

    For example, your column might display a data field containing an HTML link or JavaScript, such as viewLink, which is not appropriate for sorting. By setting the sortField property to ID, the column can still be sorted by the corresponding ID property.

  3. Configure an HTML-grid column by configuring the /atg/svc/agent/ui/
    CustomerProfileSearchUIConfiguration.properties     or /atg/commerce/custsvc/order/OrderSearchUIConfiguration.properties files.

Customizing a Column Width

  1. In the properties file for the column, update the width property to the desired CSS width specification, for example. 4em.

  2. To set the column width to fill the remaining space on the screen, set the width to auto.

 
loading table of contents...