Input fields and the Mobile Device Keyboard

Overview

Neptune introduced a new Launchpad in the Planet 8, version 5.3 series.  The unified "NEPTUNE_STANDARD_LAUNCHPAD" replaced individual mobile and desktop launchpads.  Recently we've had reports of fields not scrolling into the visible area of the screen when the mobile device's keyboard opens.  This means that the field that you are trying to type on is invisible, hidden behind the keyboard.


The issue is different depending on whether you run an Android or an IOS device.


iOS

BlueWorx users running Neptune Mobile applications created with the new unified launchpad had an issue when entering time confirmations.  The time confirmation field wasn't scrolling into view and could be hidden by the keyboard.  This was due to a piece of code in BlueWorx which previously brought the field into view on Android devices.  This code has been removed in BlueWorx Support Pack 06, Update 07.  See the Update 07 release post at https://blueworx.freshdesk.com/discussions/topics/19000028007.


Android

With the initial release of the unified launchpad all input fields on Android devices sometimes failed to scroll into position above the on screen keyboard.  Neptune released a partial fix (input fields in forms) for this at some point in later updates to Planet 8.  We have not confirmed exactly when, but we do know that the partial fix is in place in our development system on Neptune Planet 8 version 5.4.7.  The fix has both an mobile application component and a server side component.


Following support calls from the BlueWorx community and discussion with Neptune the following changes can be made to the mobile application build to provide a fix that extends the original fix to input fields contained in any type of control, including tables.  Note that the server side code is required, so this fix will not work for Neptune Planet 8 versions that don't have this code.  We only know that this code exists in 5.4.7 and later, but it may exist in earlier versions in the Planet 8 5.3 and 5.4 series.


Config.xml

  • Remove the plugin "cordova-plugin-ionic-keyboard" unless it has been added for a customer specific reason in your build.  If the plugin is retained then there is an extra piece of code to remove from index.html.


Index.html


Find the code block:


        appShell.addPage(pageShell);

        var splitterShell = new sap.ui.layout.Splitter("splitterShell", {

            orientation: "Vertical"

        });

        

Directly after this code add the following:


     // ZAG - Handle Android input fields in newest Neptune 5.4.X+ versions

        splitterShell.attachResize({}, function() {

            var domRef;

            // activeField is only a global in 5.4.X

            if (typeof activeInputField !== "object" || activeInputField === null || typeof activeInputField.getDomRef !== "function") {

                return;

            }

            domRef = activeInputField.getDomRef();

            if (typeof domRef !== "object" || domRef === null || typeof domRef.scrollIntoViewIfNeeded !== "function") {

                return;

            }

            activeInputField.getDomRef().scrollIntoViewIfNeeded();

        });

        // ZAG - End


The splitterShell control is new to the unified launchpad.  When the android keyboard slides up the splitterShell resize event is fired and the code above scrolls the required field into view.  Note the value in the variable activeInputField is provided by the server side code when the Neptune application (e.g. BlueWorx) is generated.


Index.html (optional - if plugin "cordova-plugin-ionic-keyboard" is retained)

If the keyboard plugin is retained then the code in function keyboardDidShow must be commented out as shown below:


        function keyboardDidShow(event) {

            // if (activeInputField && activeScrollContainer) {

            //     // give Android time to do whatever it is NOT doing correct... then scroll input field into focus.

            //     setTimeout(function() {

            //         try {

            //             var scroller = activeScrollContainer.getScrollDelegate();

            //             var scrollerTop = scroller.getScrollTop();

            //             var inputTop = $("#" + activeInputField.getId()).position().top;

            //             var scrollerHeight = $("#" + scroller._sContainerId).height();

            //             var inputHeight = $("#" + activeInputField.getId()).height();

            //             var scrollInputTo = scrollerTop + inputTop - scrollerHeight / 2 - inputHeight / 2;

            //             // Android is trying to scroll so that the input field is placed in the middle of the scroll area, we do the same incase Android gets it right...

            //             activeScrollContainer.scrollTo(scrollInputTo);

            //             activeInputField = null;

            //             activeScrollContainer = null;

            //         } catch (e) {}

            //     }, 200);

            //  }

        }


The keyboardDidShow function itself should be retained as it is called by the keyboard plugin.


Alternative Fix

As the issue was introduced with the unified launchpad, an alternative fix is to build your mobile application using the deprecated "NEPTUNE_LAUNCHPAD_MOBILE".


Summary

These updates where made in consultation with Neptune Software based on Neptune Planet 8 version 5.4.7.  The exact code may vary with different versions.  As all BlueWorx customers are Neptune customers specific fixes can also be checked with them of in the Neptune Software Community at  https://community.neptune-software.com.


Login or Signup to post a comment

Site Data and Privacy Policy