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

Prerequisites

In order to use our mono repo, please make sure you are using the LTS version of Node.js.

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

Execute npm install on the root folder of this repo.

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.

Manually releasing Native Mobile Resources (NMR)

Note: for an automated approach (preferred), see scripts/release/README.md. Note: this applies to NMR for latest Studio Pro (currently 9.X)

• With correct node version (see .nvmrc) in repo root, run lerna clean -y && npm i.
• Ensure your current git branch includes all changes intended to be released.
  • Including updates to widgets' changelogs and semver version in package.json and package.xml.
• Build all widgets in release mode; in root of repo run npm run release:native.
• Copy each widgets' .mpk to the NMR project's /widgets directory, overriding any existing .mpks.
• (conditional) If the widget is new, it needs to be listed on the NMR project page NativeModileResources._WidgetExport.
  • Configure the widget with basic minimum requirements (e.g. datasource), enough to avoid any project errors.
• Ensure monorepo's mobile-resources-native package has correct changelog and package.json version.
• cd to packages/jsActions/mobile-resources-native and run npm run release.
• Delete contents of NMR project's javascriptsource/nativemobileresources/actions.
• Copy-and-paste files and folders inside monorepo packages/jsActions/mobile-resources-native/dist/ to NMR project's javascriptsource/nativemobileresources/actions/.
• Update the version in NMR project's themesource/nativemobileresources/.version.
• Commit any changes to NMR project and push using git.
• Export the NMR project's module called "NativeMobileResources"; right-click the module then "export module package".
  • Exclude everything inside userlib/ and resources/.
• Create a GitHub release (see previous releases for example release notes and title, etc.) and add the exported .mpk.
  • By aggregating the widgets' changelogs and the mobile-resources-native package's changelog, you can create detailed release notes.
• Create a Mendix Marketplace release and add the exported .mpk; follow the release-wizard, ensuring each field is correct.
  • Make sure the target Mendix version is correct.
  • Most of the time you just need to update the module's version, attach a .mpk and add release notes.

To release NMR for Studio Pro 8.X, most of the steps are the same, except take note of: https://paper.dropbox.com/doc/Native-Content-Wiki--Bbd0Jfqo9nAEbmkpowVg5n3bAg-3h3CBZeVHXw8dJ1IY9xhJ#:uid=742445305119695634661853&h2=Update-NativeComponentsTestPro.

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"