This discussion is archived
1 2 Previous Next 15 Replies Latest reply: May 4, 2013 11:29 AM by AshPatel2 RSS

Notification icon with number of notifications waiting

AshPatel2 Newbie
Currently Being Moderated
Application Express 4.2.1.00.08
Internet Explorer - 8
Oracle Database 11g Enterprise Edition Release 11.2.0.3.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 APEX

Regards
ASh
  • 1. Re: Notification icon with number of notifications waiting
    fac586 Guru
    Currently Being Moderated
    AshPatel2 wrote:
    Application Express 4.2.1.00.08
    Internet Explorer - 8
    Oracle Database 11g Enterprise Edition Release 11.2.0.3.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
    Yes.
    and how in APEX
    It depends.

    What are "message notifications"? How do they "come in"? What identifies them as "waiting to be read"?

    Where would this be shown?

    Create a sample app on apex.oracle.com and post guest developer credentials to the workspace and we can take a look.
  • 2. Re: Notification icon with number of notifications waiting
    AshPatel2 Newbie
    Currently Being Moderated
    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.


    Regards
    Ash
  • 3. Re: Notification icon with number of notifications waiting
    fac586 Guru
    Currently Being Moderated
    AshPatel2 wrote:
    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.
    Do you have a notification icon? What kind of number will the count be: 5? 15? 50? 500?
  • 4. Re: Notification icon with number of notifications waiting
    AshPatel2 Newbie
    Currently Being Moderated
    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. Thanks

    Regards
    Ash

    Edited by: AshPatel2 on Apr 29, 2013 4:47 PM
  • 5. Re: Notification icon with number of notifications waiting
    Hari_639 Guru
    Currently Being Moderated
    Hello Ash,

    See this. If this is what you need..

    In Navigation bar entry -> Entry Label, you can refer application/page item value as follows..
    Open Issues (&OPEN_ISSUE_COUNT.)
    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.
    SELECT COUNT(1)
     INTO :OPEN_ISSUE_COUNT
     FROM EBA_IT_issues 
    WHERE STATUS = 'Open'
    That't it :)

    Regards,
    Hari
  • 6. Re: Notification icon with number of notifications waiting
    AshPatel2 Newbie
    Currently Being Moderated
    Hi thanks for the reply, I was hoping to use an icon and the count appear at the top right of the icon, just like facebook do on their website where if you have a freind request waiting the freind request icon has a 1 in top corner, or if 2 then 2.

    Regards
    Ash
  • 7. Re: Notification icon with number of notifications waiting
    fac586 Guru
    Currently Being Moderated
    AshPatel2 wrote:
    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.
    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).
    I assumed that updating the notification count on every page view is sufficient, and use of .

    Option 1 as you suggests uses a nav bar entry. There are a couple of issues with this. The nav bar area in theme 26 already displays a "user" icon with the current username. This icon is only 12&times;12px. Following this style it isn't feasible to display a similarly sized icon with an overlay showing the number of notifications: to be legible the overlay is going to be larger than the icon and completely obscure it. I'd therefore suggest that the correct approach here is to match the appearance of the user information and display the number of notifications to the side of a mini icon. For convenience I wanted to put all of the HTML and CSS required for this into the nav bar entry. This leads to the second problem: the length of a nav bar entry is very short in HTML terms, making it difficult to get everything in. It's just possible using a very short name for the referenced application item:
    // 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>
    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.

    Option 2 overlays a badge showing the number of new notifications on a larger version of the icon. As it's too big for the nav bar, the right side of the tab area seems like a good location. This can be implemented using a global page (page zero) HTML region:

    Title: Notification Status
    Type: HTML Text
    Display Point: Page Template Region Position 8
    Template: DIV Region with ID
    Static ID: notification-status
    Region Attributes:
    // Position icon at right of tab area
    style="position: absolute; right: 18px; top: 12px;"
    Region Source:
    <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>
    Again, inline CSS has been used for convenience, and a separate style sheet is recommended for production use.

    This doesn't look at its best in IE8 as there's no support for <tt>border-radius</tt>, making the badge overlay a boring rectangular box instead of a nice rounded one. It's also a considerable effort to go to for a pretty limited result. I think the more basic nav bar idea is the way to go.
  • 8. Re: Notification icon with number of notifications waiting
    007.lalit Newbie
    Currently Being Moderated
    Hi Ash,

    May Following demo you want:

    http://apex.oracle.com/pls/apex/f?p=37687:1:0::NO:

    Thanks,
    Lalit Pandey
  • 9. Re: Notification icon with number of notifications waiting
    AshPatel2 Newbie
    Currently Being Moderated
    Hi Lalit any chance I can get access to the code for the demo

    Regards
    Ash
  • 10. Re: Notification icon with number of notifications waiting
    fac586 Guru
    Currently Being Moderated
    007.lalit wrote:

    May Following demo you want:

    http://apex.oracle.com/pls/apex/f?p=37687:1:0::NO:
    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.
  • 11. Re: Notification icon with number of notifications waiting
    AshPatel2 Newbie
    Currently Being Moderated
    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

    Regards
    Ash
  • 12. Re: Notification icon with number of notifications waiting
    fac586 Guru
    Currently Being Moderated
    AshPatel2 wrote:
    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
    Please create an example on apex.oracle.com with the required region and icon.
  • 13. Re: Notification icon with number of notifications waiting
    AshPatel2 Newbie
    Currently Being Moderated
    Hi Fac586, ok I have created an app, I have placed the notification on page zero, using your code I have also figured out how to position it, only thing I cannot do is get the icon to fit, if I make the image are larger than it seems to show 4 images next to each other and if I make it small it only shows part icon as it does now. See link and login details below. Thanks

    http://apex.oracle.com/pls/apex/f?p=40439

    Username: DemoUser
    Password: notification1
    Workspace: ws_ash

    App number 40439

    Thanks and Regards
    Ash

    Edited by: AshPatel2 on May 3, 2013 5:00 PM
  • 14. Re: Notification icon with number of notifications waiting
    fac586 Guru
    Currently Being Moderated
    Various tweaks needed to due to using a larger icon that isn't from a CSS sprite, and creating it as a subregion.

    Region Template: DIV Region with ID

    You have to use this minimal region template. Other templates (like the "Region without Title" one you were using) include additional mark-up and get conflicting CSS applied. "DIV Region with ID" is just a basic container.

    Region Attributes:
    // Position icon at top right of parent region
    style="float: right; margin: -30px 8px;"
    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.

    Region Source:
    <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>
    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.
1 2 Previous Next