A bundle of R&D Platform supported widgets & nanoflow actions for building native mobile & hybrid apps.
| 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). |
| 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. |
| 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 |
Please visit the Mendix Docs for more information on building native mobile apps.
See CONTRIBUTING.md.
npm installon root
- Create a simple Mendix project in Studio
- Copy all of it's contents to
packages-native/test-project. - Run
npm run buildon 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-projectwith Mendix Studio
- Mendix projects for each widget already comes with repo with folder called
packages-web/**WIDGETNAME**/tests/TestProjects/Mendix* - Run
npm run buildon 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-projectwith Mendix Studio
- Create a simple Mendix project in Studio.
- Copy all of it's contents to
packages-common/nanoflow-commons/dist/mxproject. - Run
npm run buildonpackages-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.tswith desired content. Please take a look at examples insrc/client. - Second you have to create a JsAction with name
ExampleNameandparametersin Studio. - Then every time
npm run buildis run, the code piece between// BEGIN USER CODEand// END USER CODEwill be changed. After you close and open the JSAction in Studiom changes will be picked up automatically.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent