Part 1: Local Notifications

Last modified: February 7, 2024

1 Introduction

This guide teaches you how to build local notifications for native mobile applications. Local notifications will only allow you to schedule and send notifications confined to one mobile device. These notifications do not use an internet connection. One use of a local notification might be an alarm app which sends a notification after an amount of time has elapsed.

This guide teaches you how to do the following:

  • Build a button connected to a nanoflow which calls a local notification
  • Make your notification nanoflow request device permission for local notifications

2 Prerequisites

Before starting this guide, make sure you have completed the following prerequisites:

3 Creating an App and Configuring Notifications

Follow the instructions below to set up your first local notification:

  1. Open Mendix Studio Pro.

  2. Select File > New App.

  3. Select the Blank Native Mobile App (also available online here):

    Blank Native Mobile App
  4. Click Use this starting point.

  5. Click Create App to close the dialog box:

    app settings
  6. Make sure you have a Native phone profile enabled:

    app settings
  7. Drag a Call nanoflow button onto your app’s home page, then click New to make a new nanoflow (note: you may wish to rename this button Send Notification):

    app settings
  8. Name the nanoflow ACT_CreateAndSendNotification and click OK:

    app settings
  9. In ACT_CreateAndSendNotification, drag three Create variable activities into your nanoflow and set them as string variables titled Title, Subtitle, and Body:

    app settings
  10. Double-click your Title activity and then configure it:

    1. Make sure Data type is set to String.
    2. Click Generate.
    3. Type Title into the Constant field.
    4. Type Title into Output > Variable.
    5. Click OK:
    app settings
  11. Double-click your Subtitle activity and configure similarly to your Title activity.

  12. Double-click your Body activity and configure similarly to your Title activity.

Now you will set up the final logic necessary for your app to display a notification. A user must give permission for an app to send notifications. You will include a Request notification permission activity in your nanoflow to account for this, and include a few other activities.

  1. Drag a Has notification permission activity into your nanoflow:

    app settings
  2. Double-click your Has notification permission activity, type NotificationPermission into Variable, then click OK:

    app settings
  3. Drag a decision after your Has notification permission activity into your nanoflow:

    app settings
  4. Double-click that decision and give it the Caption Permission:

    app settings
  5. Click Expression wizard, select Variable > NotificationPermission (Boolean), and then click OK until you are back at your nanoflow:

    app settings
  6. Drag a Request notification permission activity into your nanoflow:

    app settings
  7. Double-click your Request notification permission activity and set Output > Variable to PermissionGranted:

    app settings
  8. Drag a decision next to your Request notification permission activity.

    app settings
  9. Connect your activities and decisions, and set those connections’ values like so:

    app settings
  10. Double-click the decision, then set the Caption as Permission?.

  11. Click Expression wizard

  12. Select Value > Variable > Permission (Boolean) from the drop-down menu. When finished, your Decision should look like this:

    app settings
  13. Navigate back to your nanoflow.

  14. Drag a Show message activity into your nanoflow and connect it like this:

    app settings
  15. Double-click your Show message activity, then do the following:

    1. Select Type > Error from the drop-down menu.
    2. Into Template type No notification permissions, go to your app permission settings to grant permission.
    3. Click OK.
  16. Drag an End event under your Show message and connect them like this:

    app settings

Now you will set up the final piece of your nanoflow’s logic.

  1. Delete the end event in the upper-right corner of your nanoflow, drag and drop a Merge in its place, and rebuild your connections:

    app settings
  2. Drag and drop a Display Notification activity and connect it to your merge like this:

    app settings
  3. Set its Body, Title, and Subtitle to the variables that you created in the same nanoflow:

    app settings
  4. Set Play sound to true.

    app settings
  5. Set Action name and Action guid to empty:

    app settings
  6. Select Use return value > no:

    app settings
  7. Click OK, then navigate back to your nanoflow.

  8. Add a final End event next to your Display notification activity and connect it like this:

    app settings
  9. When you are all finished, your nanoflow will look like this:

    app settings

Now you can run your app and see if your notification works.

  1. Start and load your app in your mobile device, then tap Send Notification:

    app settings
  2. When prompted to Allow notifications, tap OK.

  3. After you allow notifications, you will receive a notification:

    app settings

    If you did not see a notification, try clicking Run Locally to reload your app. Then, tap the Send Notification button again.

Congratulations! You can now see local notifications on your device. Next, in How to Use Local Notifications Part 2: Badges, you will learn how to configure notification badges.

4 Read More