Widgets resources

A bundle of R&D Platform supported widgets & nanoflow actions for building native mobile & hybrid apps.

Native widgets

Widget	Description
Activity indicator	Display a circular loading indicator.
App events	Trigger actions based on load, network status and timer events.
Badge	Display text or a value as a badge.
Barcode scanner	Scan barcode and QR code values.
Color Picker	Allows the user to select colors
Feedback	Allow users to submit feedback directly into the app project.
Floating action button	Display a circular floating icon button.
Maps	Show locations on an interactive map.
Notifications	Trigger actions based on incoming notifications.
Progress bar	Display progress in a horizontal bar.
Progress circle	Display progress in a circle with enclosed text.
QR code	Display a QR code based on a value.
Range slider	Change a range of values using a slider.
Rating	Give a rating by selecting stars.
Slider	Change a numeric value using a slider.
Toggle buttons	Change an enumeration value using a group of buttons.
Video player	Play a video loaded from a URL.
Web view	Display an external web page or load custom HTML.
Animation	Provides default animations for contents and widgets.
List view swipe	Show controls on swipe for an interactive list view.
Intro screen	Show swipeable containers to show contents as intros
Safe area view	Prevent content being rendered in unsafe areas (iOS only).

Web & Hybrid widgets

Widget	Description
Badge	Display text or a value as a badge.
Badge Button	Display a button with a badge.
Range Slider	Displays a slider with min and max.
Rich Text	Display a full text editor.
Signature	Displays a signature pad.
Slider	Display a slider.
Switch	Displays a switch.
Video player	Play a video loaded from a URL.

Included nanoflow actions

Category	Action
Authentication	Biometric authentication
	Is biometric authentication supported
Camera	Save to picture library
	Take picture
Clipboard	Get clipboard content
	Set clipboard content
Network	Is cellular connection
	Is connected
	Is wifi connection
Notifications	Cancel all scheduled notifications
	Cancel schedule notification
	Display notification
	Get push notification token
	Has notification permission
	Request notification permission
	Schedule notification
	Set badge number
Platform	Change status bar
	Get device info
	Hide keyboard
	Open in app browser
	Play sound
	Vibrate

Documentation

Please visit the Mendix Docs for more information on building native mobile apps.

Contributing

See CONTRIBUTING.md.

Developing

• npm install on root

For developing in packages-native:

• Create a simple Mendix project in Studio
• Copy all of it's contents to packages-native/test-project.
• Run npm run build on a desired widget folder. For ex: packages-native/badge/. This will build and copy the mpk to the test-project's correct widget folder.
• Open and run the project in packages-native/test-project with Mendix Studio

For developing in packages-web:

• Mendix projects for each widget already comes with repo with folder called packages-web/**WIDGETNAME**/tests/TestProjects/Mendix*
• Run npm run build on a desired widget folder. For ex: packages-web/badge. This will build and copy the mpk to each Mendix project's correct widget folder.
• Open and run the project in packages-native/test-project with Mendix Studio

For developing in packages-common/nanoflow-commons:

• Create a simple Mendix project in Studio.
• Copy all of it's contents to packages-common/nanoflow-commons/dist/mxproject.
• Run npm run build on packages-common/nanoflow-commons. This will build and copy the mpk to dist/mxproject's correct folder.

Please bear in mind that when you develop JSActions, creation process is not automatically picked up by Modeler. Which means:

• First you have to create the ts file in nanoflow-commons/src/.../ExampleName.ts with desired content. Please take a look at examples in src/client.
• Second you have to create a JsAction with name ExampleName and parameters in Studio.
• Then every time npm run build is run, the code piece between // BEGIN USER CODE and // END USER CODE will be changed. After you close and open the JSAction in Studiom changes will be picked up automatically.