How to disable the Android back button?

2
I would like to block the Android back button. I can trap the event and show alerts when the button is pressed, but I have trouble actually stopping the application from navigating back. The default code used for phonegap solutions does not seem to work on a Mendix based application. Does anyone know how to do this?   The following code has been placed in a custom .js file inside the theme folder, which has been added to the components.js file. document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady(){ alert("On Load"); document.addEventListener("backbutton", didPressBackButton, false); } function didPressBackButton(event) { alert("go back!"); // event.preventDefault(); //Does not block the backbutton // event.stopPropagation(); //Does not block the backbutton // return false; //Does not block the backbutton }   p.s: There have been similar questions before on this forum, but they were never conclusively answered. By removing unnecessary info from the question, I am hoping to get an answer that is more to the point. :-) p.p.s: An additional question which I do have: Where do I place and call the javascript code? By placing it in a custom .js file, It is only loaded once. This works if I want the behaviour everywhere. But when I need the behaviour in specific pages, this will not suffice. Using html widgets does not work either, since this results in the 'go back!' alert showing multiple times when entering a page multiple times. The number of alerts shown increases by one every time I press the back button on that page an additional time. Feedback on where to place the code would also be highly appreciated! p.p.p.s: The following code can be found in cordova.js when using remote inspection on an Android device. I suspect Mendix is inserting their own code in between the application and the Cordova event handlers:
asked
8 answers
4

I have it working!

If you want the Android backbutton disabled in your app: https://www.npmjs.com/package/mendix-hybrid-app-custom

 

Summary:

I had contact with Mendix support, but as this is a customization of the Mendix phonegap package itself, it is not supported right now. I had to build my own npm module that overwrites the Mendix_hybrid_app_base. Combined with phonegap javascript calls  in the project itself, I am now able to block the Android backbutton inside a Mendix application.

With this solution:

- The backbutton can be blocked whenever the phone goes offline to prevent errors and protect the user.

- The backbutton can also be blocked permanently.

answered
2

Here is my method – I hope it will help You to solve this problem :) Using mendix-hybrid-app-custom is not required in this case. A big thanks for Wouter Scholtens and Vinod Davis. I used Your knowledge in my solution and it’s really help me. 
Enjoy :) 

Works on: Mendix Modeler 7.22.2

How to disable native back button 
Prerquisites:
    - Install npm
    - Instal PhoneGap
    - Install node js 
    - Install webpack 
    - Add mobile features widget to Your Mendix project 

How to install prerequistes (If not installed yet, one could check by typin "prerequist name" -v in cmd console  

    - Npm: npm install npm -g
    - Node: Please ensure you install the LTS version, 8.x.x. This is important. It will fail on older versions like Node 6.x.x
    - Webpack: npm install --global webpack,
    - Phone Gap: npm install -g phonegap

    1. On each page when button is required to be blocked the "mobile features" widged should be added 
    2. Commit all Your changes and run deploy to the cloud 
    3. Go to Mendix Developer Portal, then go to Your app, then deploy --> mobile app, and click "publish for mobile app stores" 
    4. Make sure that permissions for push notifications is not ticked if You don't have push notification widget installed and cofigured 
    5. Paste the line in the custom phonegap/cordova configuration field:
    <plugin name="cordova-plugin-app-version" source="npm" spec="0.1.8" />
    6. Choose android and click "publish for app stores" button and then choose "bulid in cloud" and then "Start PhoneGap Bulid job" 
    7. Download the phonegap package, create new directory on Your computer and extract files there 
    8. Open command console and go to this folder, then execute "npm install" inside this folder 
    9. When npm install is done You should have "node_modules" in Your folder 
    10. Execute "npm run package" in Your the main folder (the same You executed "npm install")
    11. Go to directory .mainFolder/dist - there should be newly created package 
    12. Create new folder and then extract newly created package 
    13. Go to www--> index.htm, open this file in text editor 
    14.  In the 68 line (may be other in Your case) after other scripts please paste following content:
    <script type="text/javascript">
            document.addEventListener("backbutton", function() {
                event.preventDefault();
            }, false);
        </script>
    15. IMPORTANT!!!: it should be inside of <body> so before the </body> If You paste the code after </body> It's not gonna work 
    
    16. If You use other features or modification You could create js file and include it here using. It's up to You 
    <script src="YourFileName.js"></script>
    
    17. After this modification please save file and create .zip package 
    18. Upload the package to phonegap online bulider 
    19. Download .apk and install the file on Your phone 

 

answered
1

Ask Mendix at support.mendix.com. Since this works at other other platforms, Mendix should also want to have it work in a mendix app.

answered
1

Try the following snippet in your phonegap > Index.html

<script type="text/javascript">
        document.addEventListener("backbutton", function() {
            event.preventDefault();
        }, false);
    </script>

answered
0

May you can use this, and then a javascrip widget to disable the back function?

https://cordova.apache.org/docs/en/5.4.0/cordova/events/events.backbutton.html

answered
0

Hi guys,

I just tried to turn off this using this instruction: https://www.npmjs.com/package/mendix-hybrid-app-custom

And unfourtunelly id doesn’t work :( There were some errors so I created the folder @mednix in node modules, then moved mendix-hybrid-app-base and mendix-hybrid-app-custom to this folder. After this the app was finally bulit when I open the app on mobile device there is “coul not load the app” message. 

I’m using modeler 7.22.2.

Maybe You have similar issues during bulding this app ? I will be gratefull for any help :) 

best
Michal 

answered
0

Hello, thanks for Your answers :) 
 

Here is my workflow (steps which I’ve done) with messages from command window. My full project path with name is replaced by “appFolder” 

 

1. install npm hybrid app custom in project folder 

AppFolder>npm i mendix-hybrid-app-custom
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> uglifyjs-webpack-plugin@0.4.6 postinstall AppFolder\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN i18n-webpack-plugin@0.3.0 requires a peer of webpack@>=0.10 <2 || ^2.1.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ mendix-hybrid-app-custom@1.0.18
added 670 packages from 513 contributors and audited 9324 packages in 27.563s
found 0 vulnerabilities

2. Replace lines in package json 

Open package.json
Under "dependencies", replace "mendix-hybrid-app-base" with "mendix-hybrid-app-custom" and set the version to 1.0.18 or the latest that is currently available on npm.
Save and exit package.json

3. Run npm install

AppFolder>npm install

> @mendix/mendix-hybrid-app-template@4.0.0 install \AppFolder
> npm run init


> @mendix/mendix-hybrid-app-template@4.0.0 init \AppFolder
> node init

cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/src/config.xml.mustache
cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/src/config.xml.mustache
cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/src/www/index.html.mustache
cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/src/www/index.html.mustache
cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/src/www/styles/index.css.mustache
cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/src/www/styles/index.css.mustache
cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/config/environments.json
cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/config/parameters.json
cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/config/resources.json
cp: no such file or directory: node_modules/@mendix/mendix-hybrid-app-base/config/texts.json
npm WARN i18n-webpack-plugin@0.3.0 requires a peer of webpack@>=0.10 <2 || ^2.1.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 900 packages from 599 contributors and audited 13398 packages in 28.394s
found 3 vulnerabilities (1 low, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

4. Move directories mendix-hybrid-app-custom and mendix-hybrid-app-base to created by me folder @mendix in node_modules directory (It’s my custom step not included in instruction, but without this step I cannot bulid the .zip package because of errors) 
5. Block button added to mendix project repository, project has been commited 
6. Changes in app.js made ( commented lines) 
7. Devpack installed
8. package has been bulit
9. App doesn't work well- there are some fields in the background, there are scheduled microflow errors 


 

answered
0

Thanks for all answers and help. 
It’s finally work :) Today afternoon I will upload small instruction how to do it :) 

answered