Universal Theme sidebar menu tooltip

If your sidebar text is too long, APEX truncates it to some fixed width. Here comes the use of Tool Tip option for the side bar. Also if you make the sidebar navigation menu collapsed by default and when only the icons are displayed, This Tool Tip will be helpful to understand the menu better.

Here are the simple steps to achieve this tool-tip functionality.

1) Create an Global Page (Page 0) if its not already present.
2) In Page 0, Create a Dynamic Action on Page Load.
3) Select Action as "Execute JavaScript Code" and paste the below code in its source.

//Tooltip for Menu Text
$("#t_TreeNav").treeView("option", "tooltip", {
    content: function(cb, node) {
        return node.label;
    }
} );
 //This tells the tooltip to show up for the whole node content including the icon.
$("#t_TreeNav").tooltip("option", "items", ".a-TreeView-content");

In the above piece of code "t_TreeNav" is the ID of the sidebar navigation tree which is set by default in Universal Theme.

Once the Dynamic Action is created, Run the application and hover the mouse through Sidebar menu to see the Tool Tip in action.

Below is the sample application which demonstrates the use of tool-tip.
https://apex.oracle.com/pls/apex/f?p=83384

Cheers!!!!

Interactive Grid - Remove Default First Row Selected

APEX 5.1 has an very powerful reporting feature called Interactive Grid (IG).
When you create an Interactive Grid with RowSelector, you might have noticed that by default the the first row gets selected. This is how the Interactive Grids are designed.

But there might be an requirement where none of the check-box must be selected on landing to the screen. Hence we need to remove the first row default selection in Interactive Grid.

This can be achieved from below simple code:

Use the below code when the page loads. You can either create an Dynamic Action or add this code in "Execute when Page Loads" section of the page Javascript

var ig$ = apex.region("emp").widget();

ig$.interactiveGrid("getViews", ig$.interactiveGrid("getCurrentViewId")).setSelection($());

Change "emp" to whatever your Interactive Grid static id is.

This should remove your default first row selection from your IG. Hope this helps.

Refer Packaged Application Icons in APEX 5.0

Here is an easiest way to use some of the packaged application icons for your applications.

This can be done by including the packaged applications CSS file in your application, and reference the appropriate CSS class for the icon you need.

1) Navigate to Edit Application Definition -> User Interface, and edit the interface for your application.

2) Under Cascading Style Sheets add the this CSS file: #IMAGE_PREFIX#pkgapp_ui/css/5.0#MIN#.css

In your application create a div with a height and width, and include one of the icon classes to display the icon.

<div style="height: 100px; width: 100px;" class="app-application-standards-tracker"></div>

Here are the available packaged application icons: