Native Mobile Resources

Last modified: November 19, 2024

Introduction

The Native Mobile Resources module is a bundle of Mendix platform-supported widgets and nanoflow actions for building native mobile and hybrid applications. For more information on styling widgets, see the Native Mobile Styling Reference Guide.

For excellent deep-dive demonstrations of how to use these native mobile widgets, check out the videos below on the Carousel and Popup Menu widgets:

Native Widgets

These are the native widgets included in these resources along with links to the GitHub repositories where they are stored (with further documentation as necessary):

Widget Description
Accordion Allows users to toggle the display of groups of content.
Activity Indicator Displays a circular loading indicator.
Animation Provides default animations for contents and widgets.
App Events Triggers actions based on load, network status, and timer events.
Background Gradient Allows you to apply a background that transitions between multiple colors in a linear direction.
Background Image Allows you to layer other widgets on top of an image.
Badge Displays text or a value as a badge.
Bar Chart The bar chart widget renders a horizontal bar graph based on static and dynamic data sets.
Barcode Scanner Scans barcode and QR code values.
Bottom Sheet Creates a set of options while blocking interaction with the rest of the screen or a draggable surface anchored to the bottom of the screen.
Carousel Creates a carousel that can be swiped with free modeling.
Color Picker Allows the app end-user to select colors.
ColumnChart Renders a vertical bar graph based on static and dynamic data sets.
Feedback Allows the app end-user to submit feedback directly into the app.
Floating Action Button Displays a circular floating icon button.
Gallery A replacement for both the template grid and list view.
GalleryTextFilter A text filter for the gallery.
Image Displays static or dynamic images.
Intro Screen Shows swipeable containers to show contents as introductions.
Line Chart Renders a scalable line graph based on static and dynamic data sets.
List View Swipe Shows controls on swipe for an interactive list view.
Maps Shows locations on an interactive map.
Notifications Triggers actions based on incoming notifications.
Pie/Doughnut Chart Renders a dataset as a pie or doughnut chart (depending on configuration) based on static data sets.
Popup Menu Displays a context menu exactly where the user taps.
Progress Bar Displays progress in a horizontal bar.
Progress Circle Displays progress in a circle with enclosed text.
QR Code Displays a QR code based on a value.
Radio Buttons Offers flexible, accessible radio button functionality.
Range slider Changes a range of values using a slider.
Rating Gives a rating by selecting stars.
Repeater Iterates over a data source or nanoflow and repeats the content while changing the values assigned to it.
Safe Area View Prevents content from being rendered in unsafe areas (iOS only).
Signature Creates a canvas on which a user can draw. The drawing will be saved as a base64 string.
Slider Changes a numeric value using a slider.
Switch Changes a Boolean value using a switch.
Toggle Buttons Changes an enumeration value using a group of buttons.
Video Player Plays a video loaded from a URL.
Web View Displays an external web page or loads custom HTML.

Nanoflow Actions

This section contains information about the nanoflow actions included in the Native Mobile Resources module. For more information, see the JavaScript nanoflow actions source code in GitHub.

Client Activities Category

These are the nanoflow actions in the client activities category:

  • Download file – lets the user save a file to the device or cloud storage, or let the user open it in another app

Native Authentication Category

These are the nanoflow actions in the native authentication category:

  • Biometric authentication – uses FaceId or the fingerprint scanner to verify that the device owner is using the app
  • Is biometric authentication supported – checks if biometric authentication is supported

Native Camera Category

These are the nanoflow actions in the native camera category:

  • Save to picture library – offers the user to store a picture from the offline database in the device library
  • Take picture – opens the camera and let the user take a picture
  • Take picture (advanced) – opens the camera and let the user take a picture with advanced options

Native Clipboard Category

These are the nanoflow actions in the native clipboard category:

  • Get clipboard content – fetches the latest string from the device’s copy and paste clipboard
  • Set clipboard content – sets a string to the device’s copy and paste clipboard

These are the nanoflow actions in the native clipboard category:

  • Parse Url to object – parses a URL string into a Mendix object with the following attributes:

    • protocol: “https:”
    • hash: “top”
    • query: “?tag=networking&order=newest”
    • pathname: “/forum/questions/”
    • auth: “john.doe”
    • host: “www.example.com:123”
    • port: “123”
    • hostname: “www.example.com”
    • password: “secret”
    • username: “john.doe”
    • origin: “https://www.example.com:123”
    • href: “https://john.doe:secret@www.example.com:123/forum/questions/?tag=networking&order=newest#top”

    Dynamically based on the number of slashes in the paths:

    • path0: “forum”
    • path1: “questions”

    Dynamically based on the number of query keys:

    • tag: “networking”
    • order: “newest”

  • Register deep link – registers a nanoflow to handle all deep link requests

Native Network Category

These are the nanoflow actions in the native network category:

  • Is cellular connection – checks if the device is connected to a cellular network
  • Is connected – checks if the device is connected to a cellular network or a WiFi network
  • Is wifi connection – checks if the device is connected to a Wifi network

Native Mobile Category

These are the nanoflow actions in the native mobile category:

  • Change status bar – changes the styling of the device’s status bar

  • Get device info – gets information about the device as an object with the following attributes:

    • ApplicationName: the name of the app
    • BatteryLevel: the battery percentage (between 0 and 1)
    • Brand: the brand of the device (for example: Apple)
    • BuildNumber: the build number as set in Native Mobile Builder UI tool
    • BundleId: the application bundle identifier as set in Native Mobile Builder UI tool
    • Carrier: name of the network operator
    • DeviceCountry: the country of the device
    • DeviceId: an identifier for the device model (for example: iPhone7)
    • DeviceLocale: the locale of the device
    • FontScale: the device font scale (1 is normal)
    • FreeDiskStorage: the available storage size in bytes
    • Manufacturer: the device manufacturer (for example: Apple)
    • Model: the device model (due to reliability, Mendix recommends using DeviceId instead)
    • ReadableVersion: the application version and build number
    • SystemName: the operating system name (iOS or Android)
    • SystemVersion: the operating system version
    • Timezone: the time zone of the device
    • TotalDiskCapacity: the total storage capacity of the device in bytes
    • TotalMemory: the total memory capacity of the device in bytes
    • UniqueId: a unique identifier for the device
    • UserAgent: the user agent of the device’s web browser
    • Version: the application version as set in Native Mobile Builder UI tool
    • Is24Hour: checks if the device is using a 24h clock
    • IsEmulator: checks if the app is running on an emulator
    • IsTablet: checks if the app is running on a tablet
    • IsLandscape: checks if the device is currently in landscape mode
    • HasNotch: checks if the device has a notch

  • Hide keyboard – hides the onscreen keyboard

  • Open in app browser – opens a specific URL in an in app web browser

  • Play sound – plays a sound from a file stored in the offline database

  • Check generic permission – checks a current status of specific permission

  • Request generic permission – requests a specific permission

  • Vibrate – vibrates the device for a specific duration

Native Notifications Category

These are the nanoflow actions in the native notifications category:

  • Cancel all scheduled notifications – cancels all local notifications
  • Cancel scheduled notification – cancels a local notification by id
  • Clear all delivered notifications – clears all delivered push notifications
  • Display notification – creates and displays a local notification immediately
  • Get push notification token – creates and displays a local notification immediately
  • Has notification permission – checks if the user has given permission to send notifications
  • Request notification permission – requests permission to send notifications
  • Schedule notification – creates and schedules a new local notification
  • Set badge number – sets the number displayed in the application badge