• If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

Announcement

Collapse
No announcement yet.

Web Page (URL) fails to launch on Android device (Samsung Tablet)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Web Page (URL) fails to launch on Android device (Samsung Tablet)

    ​I have created an app - Web Page (URL) using portal admin. The app works fine on my desktop (Windows), iOS (iPad or iPhone) but fails to launch on Android (Samsung Tablet). The URL should start a CGIDEV4 program.

    Android Launch Failure.jpg

    I have successfully used the Web Page (URL) lo launch other sites (not all sites work). What is causing the ERROR - Launchpad message.​

  • #2
    The framework used on this version of the mobile portal has become outdated. We are currently in the development phase of a new mobile portal which will address this issue. This will be available sometime in 2021.

    Comment


    • #3
      Interesting.

      I was able to launch: https://www.easy400.net/ and run Giovanni's CGIDEV2 programs. In this scenario, it hits a home page first and uses a link to launch the app inside webView.

      I have created a web page to launch my failing app and it now runs successfully if inside a web page.

      So the Android launch failure is caused by calling the CGIDEV2 app directly. This works fine on iOS.

      With this additional information, can CNX now address the launch failure.

      Comment


      • #4
        For the time being since we are actively working on the new Mobile portal below is HTML that you could use to load your application.

        Source "urlLoader.html"
        Code:
        <!DOCTYPE HTML>
        <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
            <title>Title</title>
            <script type="text/javascript" src="/resources/valence.js"></script>
            <script>
                /**
                 * document is ready load the URL in the iframe
                 */
                var onReady = function() {
                    var params = Valence.getUrlParam(),
                        frame  = document.querySelector('#valenceFrame'),
                        url    = params.url;
        
                    // set the title
                    //
                    if (!Valence.isEmpty(params.title)) {
                        document.title = params.title;
                    }
        
                    if (!Valence.isEmpty(url)) {
                        // set the frame source
                        //
                        frame.setAttribute('src', url);
                    } else {
                        Valence.util.Helper.showDialog('Error', 'URL not passed', 'OK');
                    }
                };
        
                // call onReady when the document is ready
                //
                if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
                    onReady();
                } else {
                    document.addEventListener('DOMContentLoaded', onReady);
                }
            </script>
            <style>
                iframe {
                    border-top: 1px solid #eee;
                }
            </style>
        </head>
        <body>
        <iframe id="valenceFrame" width="100%" height="100%" style="position:absolute;top:0;left:0;" frameborder="0"></iframe>
        </body>
        </html>
        Steps on using this:
        1. Create a new file on the IFS in your Valence instance within resources/utils named urlLoader.html and past the above source into it
        2. Add a new app record within Portal Admin with an app type of "Valence Application", path of "/resources/utils/urlLoader.html" and optional parameters passing the URL you want to load. For example "url=http://cgidev2.easy400.net/js2p/getacar.pgm?action=d"
        In the next Valence 6.0 update urlLoader.html will be available within resources/utils.

        Example App Definition:

        Screen Shot 2021-02-05 at 9.40.27 PM.png
        Screen Shot 2021-02-05 at 9.40.38 PM.png

        Running on Android Phone

        CGI Virtual Car.png
        Attached Files

        Comment


        • #5
          NAB URL Widget
          If you use the NAB URL Widget instead of Portal Admin URL widget, the URL will successfully launch for Windows, iOS and Android. However, my HTML output has 2 tables side by side. As Android does not does not shrink the page, the right table does not fit, requiring you to slide across to see the rightmost data.

          The iPad experience is worse. It displays the tables side by side closer to 60/40%. Therefore you need to vertically scroll to see the right side of tale 2.

          The best presentation is where you display an html style index and click a link to launch the cgidev2 program. HTML will shrink or grow the page as required so you get the correct outcome.

          Comment


          • #6
            Test results for urlLoader.html

            The solution is unsuccessful on the desktop. You receive: ERROR. URL not received.

            Android. Runs successfully. Unable to fully test as urlLoader does not support arguments.

            iOS. Runs successfully. Unable to fully test as urlLoader does not support arguments.

            Comment


            • #7
              Below is an update so that any parameters on the app will be passed to the url within urlLoader.html. The url parameter should only contain the url with no parameters then add addition parameters as you normally would do to the app;

              Two base valence params will always be passed to the url which would be the environment "env" & session id "sid".

              Code:
              <!DOCTYPE HTML>
              <head>
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
                  <title>Title</title>
                  <script type="text/javascript" src="/resources/valence.js"></script>
                  <script>
                      /**
                       * document is ready load the URL in the iframe
                       */
                      var onReady = function() {
                          var baseParams    = Valence.getUrlParam(),
                              frame         = document.querySelector('#valenceFrame'),
                              excludeParams = ['app', 'key', 'lang', 'theme', 'url', 'deviceType', 'native'],
                              url           = baseParams.url,
                              addtParams    = false,
                              params        = {},
                              param, paramString;
              
                          // add parameters if any are passed that are not found in the excludeParams
                          //
                          for (param in baseParams) {
                              if (excludeParams.indexOf(param) === -1) {
                                  addtParams = true;
                                  params[param] = baseParams[param];
                              }
                          }
              
                          if (addtParams) {
                              paramString = Valence.toQueryString(params);
                              if (!Valence.isEmpty(paramString)) {
                                  url = url + '?' + paramString;
                              }
                          }
              
                          // set the title
                          //
                          if (!Valence.isEmpty(baseParams.title)) {
                              document.title = baseParams.title;
                          }
              
                          if (!Valence.isEmpty(url)) {
                              // set the frame source
                              //
                              frame.setAttribute('src', url);
                          } else {
                              Valence.util.Helper.showDialog('Error', 'URL not passed', 'OK');
                          }
                      };
              
                      // call onReady when the document is ready
                      //
                      if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
                          onReady();
                      } else {
                          document.addEventListener('DOMContentLoaded', onReady);
                      }
                  </script>
                  <style>
                      iframe {
                          border-top: 1px solid #eee;
                      }
                  </style>
              </head>
              <body>
              <iframe id="valenceFrame" width="100%" height="100%" style="position:absolute;top:0;left:0;" frameborder="0"></iframe>
              </body>
              </html>
              Example App with optional parameters - this will pass action equal to 'd' to the url "http://cgidev2.easy400.net/js2p/getacar.pgm" along with the valence environment "env" & session id "sid".

              The final url would look something like this "http://cgidev2.easy400.net/js2p/getacar.pgm?sid=ABC123...&env=1010&action=d"

              Screen Shot 2021-02-07 at 9.32.12 AM.png

              Comment


              • #8
                The urlLoader is now working better but the arguments don't appear to be flowing through to my CGIDEV2 program. They are coming up blank.

                Can you please confirm there is no issue with the urlLoader.

                Comment


                • #9
                  We are not seeing an issue with parameters passed not getting then forwarded to the url that urlLoader is loading

                  Below is example HTML the urlLoader loads that displays the passed params:
                  HTML Code:
                  <!DOCTYPE HTML>
                  
                  <head>
                      <meta http-equiv="X-UA-Compatible" content="IE=edge">
                      <meta charset="UTF-8">
                      <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
                      <title>Title</title>
                      <script>
                          /**
                           * document is ready load the URL in the iframe
                           */
                          var onReady = function() {
                              var getUrlParam = function(param) {
                                      var url = decodeURIComponent(window.location.search.substring(1)),
                                          urlParams = url.split('&'),
                                          allParams = {},
                                          lParameter;
                  
                                      if (window.location.search.length > 0) {
                                          for (var i = 0; i < urlParams.length; i++) {
                                              lParameter = urlParams[i].split('=');
                  
                                              if (param && lParameter[0] === param) {
                                                  return lParameter[1] === undefined ? true : lParameter[1];
                                              } else if (!param) {
                                                  allParams[lParameter[0]] = lParameter[1];
                                              }
                                          }
                                      }
                  
                                      if (!param) {
                                          return allParams;
                                      }
                                  },
                                  params = getUrlParam(),
                                  list = document.createElement('ul'),
                                  item;
                  
                              if (Object.keys(params).length > 0) {
                                  Object.keys(params).forEach(function(key) {
                                      item = document.createElement('li');
                                      item.appendChild(document.createTextNode(key + ' : ' + params[key]));
                                      list.appendChild(item);
                                  });
                                  document.getElementById('foo').appendChild(list);
                              } else {
                                  item = document.createElement('li');
                                  item.appendChild(document.createTextNode('*None'));
                                  list.appendChild(item);
                                  document.getElementById('foo').appendChild(list);
                              }
                          };
                  
                          // call onReady when the document is ready
                          //
                          if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
                              onReady();
                          } else {
                              document.addEventListener('DOMContentLoaded', onReady);
                          }
                      </script>
                  </head>
                  
                  <body>
                      <div>Params Received</div>
                      <div id="foo"></div>
                  </body>
                  
                  </html>
                  Of course if this doesn't work we are currently working on a brand new mobile portal for iOS & Android and it will be available this year.

                  Comment


                  • #10
                    This is now working as expected. Thanks Johnny.

                    When you specify the parameter list, all parameters are passed with & including the first parameter

                    Instead of specifying for example:
                    "url=http://cgidev2.easy400.net/js2p/getacar.pgm?action=d&param2=2&param3=3"

                    you specify:
                    "url=http://cgidev2.easy400.net/js2p/getacar.pgm&action=d&param2=2&param3=3"

                    Note: The ? is replaced with &

                    Comment

                    Working...
                    X