Skip to main content

Paging Icons are Not Being Displayed

Abraham Hardjana
  • Updated

Overview

After upgrading from an older version of Aurea Process, you are experiencing issues in your applications where an Ext grid is not displaying the paging icons for First, Next, Previous, Last and Refresh Buttons like shown below:

EXT_GRID_ICON_Missing_Issue.png

The icons are not being displayed, but when you click where the icon should be the functionality is working as expected.  The Browser Console is not displaying Javascript errors or warnings that would be associated with the Ext grid not display the paging icons.

Prerequisites

  • Access to modify the ext-all.js file on the BPM Portal Server in the <Aurea Process Install Directory>/bpmportal/javascript/ext4x/ directory.

Solution

This is most likely caused by the use of a different font that does not have the required icons used by the Ext JS.  To correct this issue you will need to do the following:

  1. Using a text editor, open the ext-all.js file on the BPM Portal server found in the <Aurea Process Install Directory>/bpmportal/javascript/ext4x/ directory.
  2. Make the following changes in the getPagingItems function in ext-all.js (a copy of an ext-all.js file with changes applied is attached to this article):
    • In code block with the itemId: "first" change the iconCls from "fa fa-step-backward fa-dark-m" to Ext.baseCSSPrefix + "tbar-page-first"
    • In code block with the itemId: "next" change the iconCls from "fa fa-chevron-right fa-dark-m" to Ext.baseCSSPrefix + "tbar-page-next"
    • In code block with the itemId: "prev" change the iconCls from "fa fa-chevron-left fa-dark-m" to Ext.baseCSSPrefix + "tbar-page-prev"
    • In code block with the itemId: "last" change the iconCls from "fa fa-step-foreward fa-dark-m" to Ext.baseCSSPrefix + "tbar-page-last"
    • In code block with the itemId: "refresh" change the iconCls from "fa fa-refresh fa-dark-m" to Ext.baseCSSPrefix + "tbar-loading"
  3. Save the file.
  4. Clear your browser cache and then reload the page.

Testing

After modifying the ext-all.js file and clearing your browser cache, once you reload the page the paging icons will be displayed.