Skip to Main Content

Wednesday, March 7, 2012

Change APEX interactive report links to jQuery UI button

APEX and jQuery

Here is how you can convert interactive report links to jQuery UI buttons.

Edit page where you have interactive report and add to page HTML header:

<link type="text/css" rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8.14/themes/base/minified/jquery.ui.button.min.css" />
<script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8.14/ui/minified/jquery.ui.button.min.js"></script>

If you like use another jQuery UI theme, change CSS file you load.

Next edit interactive report link column and to Link Attributes:

class="ui-button"

Change Link Icon to some text or column substitution string.

Create dynamic Action. Select Advanced

  • Name: Set jQuery UI button
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code:
    $(this.triggeringElement).find("a.ui-button").button({
     icons:{secondary:"ui-icon-zoomin"}
    });
    
  • Selection Type: None

Now when you run page link column is converted to jQuery button.

See working example.

See jQuery UI button options from documentation.

Pagination

Comments

No comments yet on this post