This post focuses on adding onclick events to anchor links in our sidebar report/list(s) that will set our search page item and reload our grid with the new filter condition via AJAX.

The required ingredients are:

1. We create our sidebar report using the “Sidebar Region” template and set the report template to “One column unordered list”
2. The sidebar report contains the following SQL and CSS class setting for identifying the anchor link to transform…

   SELECT '<a href="#" class="ext-grid-reload">'||
          name ||'</a><br />Downloaded '||nvl(downloads_total,0)||' times' plugin
   FROM apr_plugins
   

3. We create a htmldb_get call to update session state, as when we perform the grid reload, it will execute our report query and filter based on our search item e.g. “P4_REPORT_SEARCH”

   // Used for setting application level items
   Ext.app.apexHttpPost = function (pAppProcess, pItems, pItemValues) {
      var get = new htmldb_Get(null, $v('pFlowId'), 'APPLICATION_PROCESS=' + pAppProcess, $v('pFlowStepId'));
      if (typeof(pItems) == 'object') {
         for (var i = 0, len = pItems.length; i < len; ++i) {
            try {
               get.add(pItems[i], pItemValues[i]);
            } catch(e) {}
         }
      } else { if (pItems) {
            try {
               get.add(pItems, pItemValues);
            } catch(e) {}
         }
      }
      gReturn = get.get();
      get = null;
      return gReturn;
   }
   

4. We create our javascript transform function….

   Ext.app.anchorGridReloadTransformById = function (pRegionId, pGridId, pItem) {
      Ext.get(pRegionId).select("a[class*=ext-grid-reload]").on('click', function (e) {
         e.stopEvent();
         var el = Ext.get(e.getTarget('a'))
         if (pItem) Ext.get(pItem).dom.value = el.dom.firstChild.data;
         Ext.app.apexHttpPost('Do Nothing', pItem, el.dom.firstChild.data);
         Ext.getCmp(pGridId).getStore().reload();
      });
   }
   

5. We then update our Grid events “load” and “columnmove” to apply our jQuery star rating transform “Ext.app.starRatingInit(‘grid’ + pRegionID);”
6. Finally we add to our sidebar report region footer the following….

   <script>
   Ext.onReady(function() {Ext.app.anchorGridReloadTransformById('#REGION_ID#','gridR4352428247890296','P&APP_PAGE_ID._REPORT_SEARCH');});
   </script>
   

The only limitation we have is that we need to hard code the grid ID in our sidebar report region footer, however as this is very customized functionality and implemented only for specific components it’s of no major concern, of course unless your grid ID changes. There’s probably a better solution than to hard code it but for now its staying.

The end result is that we can filter our Grid simply by clicking on anchor links on the page and we negate the need to submit/refresh the page so we get an improved response time and improved usability.