Widgets resources

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

Native widgets

Please visit the Mendix Docs for more information on list of available native widgets on Native Mobile Resources module.

Web & Hybrid widgets

Widget	Description
Badge	Display text or a value as a badge.
Badge Button	Display a button with a badge.
Fieldset	Group form widgets.
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
	Take picture advanced
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

In order to use our mono repo, please make sure you are using Node.JS v14 and NPM v6 (Use npm i -g npm@latest-6).

As we are using node-gyp in our dependencies, please make sure to install the requirements for this library according to your OS.

• Windows

• Mac OS

• Linux/Unix

• Execute npm install on root

Requirements

• For this repository you need npm version 6 or below. Version 7 and above are unsupported.

For developing native widgets in packages/pluggableWidgets:

• 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/pluggableWidgets/badge-native/. 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 web widgets in packages/pluggableWidgets:

• Mendix projects for each widget already comes with repo with folder called packages/pluggableWidgets/<widgetName>/tests/testProject.
• Run npm run pretest:e2e to initialize Mendix project.
• Run npm run build on a desired widget folder. For ex: packages/pluggableWidgets/badge-web. This will build and copy the mpk to each Mendix project's correct widget folder.
• Open and run the project in <widgetName>/tests/testProject with Mendix Studio.
• If you want to override your local test project with a test project from GitHub, execute the test:e2e npm script with the following command: npm run test:e2e -- --update-test-project.

Adding new test project to the repo

• Go to https://github.com/mendix/testProjects and create an appropriate branch name from master
• Add your .mpr files, commit and push (remember your branch name)
• Go to widgets-resources monorepo and in the package.json of the widget insert the branch name in the test project section.

For developing in packages/jsActions:

• Create a simple Mendix project in Studio.
• Copy all of it's contents to packages/jsActions/nanoflow-actions-native/dist/mxproject.
• Run npm run build on nanoflow-actions-native. 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-actions-native/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.

Releasing Native Mobile Resources

• Bump the version of the necessary widget by running npm run version your-widget-name desired-version
• Create draft tag in github repo which will also create release mpk for the necessary widget npm run publish your-widget-name
• Add notes to your draft
• Update the necessary widgets to the Mendix Native Mobile Resources app and push the changes
• Export the module, include every dependency
• Create a manual tag for the exported module "Native Mobile Resources - AppStore release vx.x.x" and add the Exported Module as asset

Raising problems/issues

• We encourage everyone to open a Support ticket on Mendix Support in case of problems with widgets or scaffolding tools (Pluggable Widgets Generator or Pluggable Widgets Tools)

Troubleshooting

1. If you are having problems with the GIT hooks, where it says that the command npm can not be found, try adding this file to the root of your user folder.

# ~/.huskyrc
# This loads nvm.sh and sets the correct PATH before running hook
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"