| title | url | weight | description | tags | |||||
|---|---|---|---|---|---|---|---|---|---|
Part 2: Badges |
/howto8/mobile/local-notif-badges/ |
20 |
A tutorial for setting up badges for local push notifications. |
|
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
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 a Create variable activity to the right of the three string variables you made:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/new-variable-badge.png" alt="new create variable" width="500" class="no-border" >}}
-
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:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/badge-1.png" alt="badge number" width="400" class="no-border" >}}
-
Click OK.
-
Drag a Set badge number JavaScript action to the right of your merge activity:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/set-badge-act.png" alt="drag set badge number" class="no-border" >}}
-
Double-click the badge number activity.
-
Set the value of Badge number to $badge_number
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/badge-input.png" alt="value badge number" class="no-border" >}}
-
Click OK.
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:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/badge-mobile.png" alt="badge number on mobile" width="300" class="no-border" >}}
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 Blank Native Mobile App):
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/app-events.png" alt="app event widget" class="no-border" >}}
-
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 a Set badge number activity into your nanoflow:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/clear-set-badge.png" alt="set badge activity" class="no-border" >}}
-
Double-click your Set badge number activity.
-
Click Badge number > Edit.
-
Type 0 and click OK.
-
Set Use Return Value to No:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/clear-badge-settings.png" alt="return value" width="400" class="no-border" >}}
-
Drag a Log message activity into your microflow.
-
Double-click your Log message activity, write Your notification has been cleared into Template, and click OK:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/clear-text-log.png" alt="clear text" width="500" class="no-border" >}}
-
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:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/app-event-final-settings.png" alt="app event final settings" width="300" class="no-border" >}}
-
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:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/badge-mobile.png" alt="badge number on mobile" width="300" class="no-border" >}}
-
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:
{{< figure src="/attachments/howto8/mobile/native-mobile/notifications/local-notif-parent/local-notif-badges/cleared-badge-icon.png" alt="cleared-badge-icon.png" width="300" class="no-border" >}}
-
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.