Badges are crucial for many apps on iOS and Android. Badges differ in appearance based on platform, and often indicate important information in applications. For example with messaging applications, it is good practice to employ badges which alert users to new messages.
You will need to build badge functionality into your app so that when a user gets a notification, the app shows a badge on its app’s icon. Also, badges are not automatically decreased or removed when a user checks an app. These two functions must be built manually by a developer.
In this document you will learn to add badge functionality to your app, as well as how to remove a badge.
Before starting this how-to, make sure you have completed the following prerequisites:
- Review the basic differences between local notifications and push notifications
- Install the Make it Native app on your mobile device
- Complete the preceding tutorial in this Use Local Notifications series
3 Setting a Badge Number
Since you know how to send a simple local notification, you can now set the badge number by following these steps:
- Open ACT_CreateAndSendNotification.
Drag and drop a Create variable activity to the right of the three string variables you made:
Double-click the variable activity and select Data type > Integer/Long.
Type 1 into the expression value field.
Type badge_number into the variable name field:
Double-click the badge number activity.
Set the value of Badge number to $badge_number
Start and load the app on your mobile device and tap the button which calls your nanoflow. You will see a notification. Go to your device’s start screen to see the notification badge on your app:
4 Reducing a Badge Number
To make your badge disappear after your user opens your app, follow the instructions below.
Drop an App events widget onto Home_Native (you have this widget because it is included in the Native Mobile Quickstart app):
Double-click your App events widget.
Select On load > Call a nanoflow.
Click New and make a new nanoflow: ACT_ClearBadge.
Go to ACT_ClearBadge.
Drag and drop a Set badge number activity onto your nanoflow:
Double-click your Set badge number activity.
Click Badge number > Edit.
Type 0 and click OK.
Set Use Return Value to No:
Drag and drop a Log message activity onto your microflow.
Double-click your Log message activity, write Your notification has been cleared into Template, and click OK:
Go back to your Home_Native page and double-click your App events activity.
Make sure Page load > On load is set to Call a nanoflow, and specify that nanoflow as ACT_ClearBadge. This will make sure your badge clears on page load.
Set App resume > On resume is set to Call a nanoflow, and specify that nanoflow as ACT_ClearBadge. This will make sure your badge clears when your app is resumed:
Click OK and save your changes.
You can now test your badge clearing.
- Start and load the app on your mobile device and tap the button which calls your nanoflow. You will see a notification.
Go to your device’s start screen to see the notification badge on your app:
Tap your app again to open it.
Navigate to your device’s home screen and see that your Make It Native app has no more badge:
Check your Studio Pro Console to read the Your notification has been cleared text you set up.
Congratulations! You successfully implemented basic badge clearing. Next, in How to Use Local Notifications Part 3: Actions, you will learn how to configure a notification so that when a user taps a notification, they are brought to a page.