Customizing Column Content

The data renderer page displays the content to render within the column.

Column Content using Dojo Grids

By default, the data renderer page is called for each column when the grid items are iterated. The following parameters are passed to the data renderer page:

Parameter

Description

field

The string identifier of the column to render as defined in the ColumnConfiguration object.

colIndex

The zero-based index of the column.

[bean]

The object(s) containing the data for the grid item. They will vary depending on the data being rendered. For an order, the item is a single orderItemMap bean.

The following is an example from the /web-apps/DCS-CSR/include/order/columnRenderer.jsp file:

<dsp:getvalueof var="field" param="field"/>
<dsp:getvalueof var="colIndex" param="colIndex"/>
<dsp:getvalueof var="orderItemMap" param="orderItemMap"/>

<c:choose>
<c:when test="${field == 'id'}">
  "id":"${orderItemMap.id}",
</c:when>

<c:when test="${field == 'viewLink'}">
  <fmt:bundle basename="atg.commerce.csr.Messages">
    "viewLink":"<a href=\"#\" class=\"blueU\" title=\"
    <fmt:message key="view-order"/>\"
    onclick=\"atg.commerce.csr.order.viewExistingOrder(\'${orderItemMap.id}\',\
    '${orderItemMap.state}\');return false;\">${orderItemMap.id}</a>"
  </fmt:bundle>
</c:when>

...
Column Content using HTML Tables

The data renderer page displays the content to render within the column. By default, the data renderer page is called for each column heading and data cell. The following parameters are passed to the data renderer page:

Parameter

Description

field

The string identifier of the column to render as defined in the ColumnConfiguration object

customerItemMap

The current customer item being rendered

resourceBundle

The resource bundle that defines the resource keys

resourceKey

The key that maps to the resource string

isPopup

Identifies if the search table is a pop up. For example, the customer search from the Shopping Cart page is a pop up table

isHeading

Identifies if a heading should be rendered

Configuring Column Content

The data renderer page displays the content to render within the column. By default, this page is called for each column when the grid items are iterated. The following parameters are passed to the data renderer page each time it is included:

Before customizing the data renderer page, perform the following steps:

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

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

  3. Inside the customization module, create an empty properties file at the corresponding path.

Customizing the Data Render Page

  1. Create a new JSP file in the module that will render the customized data.

  2. In this module, create a new PageFragment properties file under /atg/commerce/custsvc/ui/tables. For example, create a NewColumnRendererPage.properties file.

  3. In the properties file for the page fragment, set the URL and servletContext to reference the JSP page created in the customization module. For example:

    # @version $Id: //application/DCS-CSR/atg/commerce/custsvc/ui/tables/
    order/NewColumnRendererPage.properties#1 $$Change: 523100 $
    $class=atg.web.PageFragment

    URL=/include/order/newColumnRenderer.jsp
    servletContext=DCS-CSR

  4. In the properties file for the column or grid, update the dataRendererPage property to point to the PageFragment properties file. For example:

    dataRendererPage=NewColumnRendererPage

Example: Customizing Column Content

This example replaces the Origin column in the default application with a Last Modified column in the Order History grid.

  1. In the resource bundle at /acme/resources/Resources.property, add a new key for the column title.

    lastModifiedDate=Last Modified

    To avoid a recompile of the JAR, add the new resource bundle and key into your <ATG9dir>/locallib directory. A server restart is required once you have created the key.

  2. In the sample application, create a grid properties file at /atg/commerce/custsvc/
    ui/tables/order/OrderHistoryGrid.properties     to override the default file. Override the columns property with the new columns; however, ensure that the invisible columns are included so that the order links work correctly:

    invisible data columns: DBState

    columns=\
    /atg/commerce/custsvc/ui/tables/order/Toggle,\
    /atg/commerce/custsvc/ui/tables/order/ViewLink,\
    /atg/commerce/custsvc/ui/tables/order/Total,\
    /atg/commerce/custsvc/ui/tables/order/ItemCount,\
    /atg/commerce/custsvc/ui/tables/order/ItemSummary,\
    /atg/commerce/custsvc/ui/tables/order/SubmittedDate,\
    /atg/commerce/custsvc/ui/tables/order/LastModified,\
    /atg/commerce/custsvc/ui/tables/order/State,\
    /atg/commerce/custsvc/ui/tables/order/SelectLink,\
    /atg/commerce/custsvc/ui/tables/order/DBState

  3. In the sample application, create the properties file for the column at /atg/commerce/custsvc/ui/tables/order/LastModified.properties that contains the configuration for the new column:

    $$Change: 523100 $
    $class=atg.svc.agent.ui.tables.ColumnConfiguration

    field=lastModified
    width=5em
    resourceBundle=acme.resources.Resources
    resourceKey=lastModifiedDate
    defaultSort=descending
    isVisible=true

    dataRendererPage=/atg/commerce/custsvc/ui/tables/order/
      LastModifiedRendererPage

  4. In the sample application, create the properties file for the content page at /atg/commerce/custsvc/ui/tables/order/
    LastModifiedRendererPage.properties    :

    $class=atg.web.PageFragment
    URL=/panels/order/lastModifiedRenderer.jsp
    servletContext=/Sample-DCS-CSR-App

  5. In the sample application, create a JSP page at the location referred to by the page configuration. The JSP renders the last modified date property from the order:

    <%@ include file="/include/top.jspf"%>
    <dsp:page>
    <fmt:bundle basename="acme.resources.Resources">
      <dsp:getvalueof var="field" param="field"/>
      <dsp:getvalueof var="colIndex" param="colIndex"/>
      <dsp:getvalueof var="orderItemMap" param="orderItemMap"/>
      <c:choose>
      <c:when test="${field == 'lastModified'}">
        "lastModified":"${orderItemMap.lastModifiedDate}"
      </c:when>
      <c:otherwise>
      </c:otherwise>
      </c:choose>
    </fmt:bundle>
    </dsp:page>

  6. Test and verify that the last modified date column is rendered in the grid.

    Note: Default date formats can be modified using the webAppResources.properties file in the /WEB-INF directory.

Example: Creating Calculated Content

The following provides an example that returns calculated content.

  1. Follow the steps for creating customized content, as outlined in the Customizing Column Content section.

  2. Create a JSP page that returns a calculation of one or more data items. For example:

    <%@ include file="/include/top.jspf"%>
    <dsp:page>
    <fmt:bundle basename="acme.resources.Resources">
      <dsp:getvalueof var="field" param="field"/>
      <dsp:getvalueof var="colIndex" param="colIndex"/>
      <dsp:getvalueof var="orderItemMap" param="orderItemMap"/>
      <c:choose>
    <c:when test="${field == 'totalNoTax'}">
    <dsp:tomap var="priceInfo" value="${orderItemMap.priceInfo}"/>
    <c:set var="totalValue"><dsp:valueof converter="currency"
    value="${priceInfo.amount+priceInfo.shipping}"/></c:set>
    "totalNoTax":"${totalValue}",
    </c:when>
    ...

  3. Test and verify that the calculation is rendered in the grid.

 
loading table of contents...