Application Express 4.2.1.00.08
Internet Explorer - 8
Oracle Database 11g Enterprise Edition Release 18.104.22.168.0 - 64bit Production
Theme - Productivity - 26
Hi I am wondering if the following is available somewhere in APEX or as a plugin -
I want a message notification icon in my app where when a notification comes in the icon shows the number of notifications that are waiting, its something like facebook do on their website, the messages icon has the number of messages that are waiting to be read.
Is this possible
and how in APEXIt depends.
AshPatel2 wrote:Do you have a notification icon? What kind of number will the count be: 5? 15? 50? 500?
Hi thanks for the reply sorry didnt explain properly, the notifications I am talking about are in a table on the database, they are messages added by administrators of the our system, to pull a count of the messages I will just write some plsql but not sure how to do the icon thing like facebook where the count appears on the icon. I want the icon to be in the navigation bar, where the logout icon sits another option is to have it on page zero, so its visible to users all the time.
Here OPEN_ISSUE_COUNT is an application item. And I have created "on load- before header" application process which will populate correct value into this item.
Open Issues (&OPEN_ISSUE_COUNT.)
That't it :)
SELECT COUNT(1) INTO :OPEN_ISSUE_COUNT FROM EBA_IT_issues WHERE STATUS = 'Open'
AshPatel2 wrote:I've explored a couple of options. To start with, you need to create an application item to hold the number of notifications, and a Before Header application computation with a query to set the value. I used an item called <tt>MSGS</tt> (the reason for the short name will become apparent).
Hi no we do not have a notification icon that is why it's hard to create a demo app, I'm exploring the options. The count won't be more than 20.
Here <tt>MSGS</tt> is the application item containing the notification count, and the CSS sprite technique is used to show a mini "comment" icon which is the closest metaphor to "notification" I could find in the required style. There isn't much opportunity make changes to this. You can only fit another 5 characters into the nav bar entry. For serious production use you should pull the CSS out into a style sheet and add it to the required page templates.
// Expanded for easy viewing: enter all this in the nav bar "Entry Label" property with no space between the elements <abbr title="&MSGS. new notifications" style="cursor:pointer"> <img src="#IMAGE_PREFIX#f_spacer.gif" class="navIcon" alt="" style="margin-left:0;background:url(&IMAGE_PREFIX.themes/theme_25/images/app_sprite_4_2.png) -114px -58px"> <b>&MSGS.</b> </abbr>
// Position icon at right of tab area style="position: absolute; right: 18px; top: 12px;"
Again, inline CSS has been used for convenience, and a separate style sheet is recommended for production use.
<a href="#"> <abbr title="15 new notifications" style="display: block; position: relative; border: none; cursor: pointer;"> <img src="/i/f_spacer.gif" style="width: 20px; height: 20px; background: url(/i/apex_ui/apex_ui.png) -100px -1000px;" alt=""> <b style="display: inline-block; position: absolute; top: -8px; right: -10px; border: 1px solid #fff; border-radius: 4px; padding: 0 2px; background: #6a9cda; color: #fff; font-size: x-small; font-weight: 400; line-height: 1.3;">15</b> </abbr> </a>
007.lalit wrote:This does not appear to be a conforming use of the <tt>sup</tt> element; <tt>font</tt> was deprecated many years ago, and is now obsolete and must not be used.
May Following demo you want:
AshPatel2 wrote:Please create an example on apex.oracle.com with the required region and icon.
Thanks Fac586, I have one more question,
I tried the code you posted which is great, I implemented option 2 works great in the nav bar area. Is it possible for you to post the same code for it to work on a region on a page. I tried it but wasnt sure what to do the icon and the count ended up on opposite sides on the region. I wanted to use your code on a region on a page with a bigger icon, can you help
Changed this as it's more appropriate to position a subregion relative to its parent rather than the viewport. If you're going to treat this as a subregion, then I suggest using the parent region only as a container. Make the icon region the first subregion, and make the "main" content another subregion after it. Then the icon can be positioned naturally, without recourse to negative margins.
// Position icon at top right of parent region style="float: right; margin: -30px 8px;"
Width and height increased to show all of the larger icon. As this icon is a single image rather than a CSS sprite containing various images, the background positioning is unnecessary, <tt>no-repeat</tt> ensures that multiple copies of the image do not appear. Positioning of the badge overlay modified due to increased icon size.
<a href="#"> <abbr title="&MSGS. new notifications" style="position: relative; border: none; cursor: pointer;"> <img src="/i/f_spacer.gif" style="width: 32px; height: 32px; background: url(#IMAGE_PREFIX#menu/db_32.gif) no-repeat;" alt=""> <b style="display: inline-block; position: absolute; top: -22px; right: -6px; border: 1px solid #9bbae6; border-radius: 4px; padding: 0 2px; background: #3768a8; color: #fff; font-size: x-small; font-weight: 400; line-height: 1.3;">&MSGS.</b> </abbr> </a>