Mobile Web Wearable Web

Badge: Displaying the Notification (Badge) Count on the Home Screen

This tutorial demonstrates how you can manage home screen badges.

The Badge API is mandatory for both Tizen mobile and wearable profiles, which means that it is supported in all mobile and wearable devices. All mandatory APIs are supported on the Tizen Emulators.

Warm-up

Become familiar with the Badge API basics by learning about:

Managing Badges

Getting and setting the badge number is a useful UI management skill:

Note
To perform these operations, your application must have the http://tizen.org/privilege/notification privilege.
  1. Retrieve application identifier using the getCurrentApplication() method:

    var appId = tizen.application.getCurrentApplication().appInfo.id;
  2. To check the badge number of the current application, use the getBadgeCount() method of the BadgeManager interface (in mobile and wearable applications):

    var count = tizen.badge.getBadgeCount(appId);
    console.log("Badge count of " + appId + " is " + count);
    
  3. To change the badge of the current application, use the setBadgeCount() method:

    var appId = tizen.application.getCurrentApplication().appInfo.id;
    tizen.badge.setBadgeCount(appId, 82);
  4. To hide the badge of the current application, use the setBadgeCount() method to set the number to 0:

    tizen.badge.setBadgeCount(appId, 0);
    

Receiving Notifications on Badge Changes

Registering a listener for badge count changes to react to new badges and display your badges is a useful UI management skill:

Note
To perform these operations, your application must have the http://tizen.org/privilege/notification privilege.
  1. To register an event handler for receiving a notification about badge changes, use the addChangeListener() method of the BadgeManager interface (in mobile and wearable applications), specifying a list of application IDs:

    function watcher(appId, count)
    {
       console.log(appId + ' badge number were updated : ' + count);
    }
    
    tizen.badge.addChangeListener(["BDb5tZJe47.TestSample"], watcher);
    

    BDb5tZJe47.TestSample is the application ID of the application to monitor. The first argument of the addChangeListener() method is an array of application identifiers. This allows you to bind the listener to several applications at same time.

  2. To stop receiving notification about badge changes, use the removeChangeListener () method:

    tizen.badge.removeChangeListener(["BDb5tZJe47.TestSample"]);
Go to top