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
) or latest versions.
As we are using node-gyp in our dependencies, please make sure to install the requirements for this library according to your OS.
-
Execute
npm install
on root
packages/pluggableWidgets
:
For developing native widgets in - 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
packages/pluggableWidgets
:
For developing web widgets in - 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 thepackage.json
of the widget insert the branch name in the test project section.
packages/jsActions
:
For developing in - 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
onnanoflow-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 insrc/client
. - Second you have to create a JsAction with name
ExampleName
andparameters
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, runlerna 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
andpackage.xml
.
- Including updates to widgets' changelogs and semver version in
- 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.mpk
s. - (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 andpackage.json
version. - cd to
packages/jsActions/mobile-resources-native
and runnpm 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'sjavascriptsource/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/
andresources/
.
- Exclude everything inside
- 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.
- By aggregating the widgets' changelogs and the
- 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
- 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"