index.js

The complete code for index.js used in Adding embedded Screen Rules is:

  function log(msg) {

      var logPane = document.getElementById('log');

       logPane.innerHTML += msg + "<br/>";

       logPane.scrollTop = logPane.scrollHeight;

   }

  function clearlog() {

       document.getElementById('log').innerHTML = '';

   }

  var hs = new zScope.HostSurfer({

       term: {

           url: "http://zanywhere.cybelesoft.com/hsdemo/",

           float: { top: 5, right: 5, width: 600, height: 400 }

       },

       view: {

           id: "hs-view"

       }

   });

   hs.on('ready', function () { log('Ready!'); });

   hs.on('pageLocked', function () { log('Page locked.'); });

   hs.on('pageUnlocked', function () { log('Page unlocked.'); });

   hs.on('ruleSelected', function (value) {

      if (document.getElementById("showFields").checked) {

          for (field in hs.data) {

              if (hs.data[field] != "") {

                  if (typeof hs.data[field] == "object") {

                       log(field + ": " + JSON.stringify(hs.data[field]));

                   } else {

                       log(field + ": '" + hs.data[field] + "'");

                   }

               }

           }

       }

      if (value) {

           log('Rule selected: ' + value.id);

       } else {

           log('No matching rule');

       }

   });

   hs.register({

       id: 'cics',

       match: [{ text: "CICS", row: 5, col: 1 }],

       apply: {

           handler: function (hs) {

              if (hs.screens.length==1) { hs.enter(); }

           }

       }

   });

   hs.register({

       id: 'bluecardLogin',

       match: [

         { text: "USERNAME", row: 19, col: 55 },

         { text: "PASSWORD", row: 20, col: 55 }

       ],

       apply: {

           fields: [

               { name: 'shopsLastUpdate', row: 18, col: 29, len: 8 },

               { name: 'accountsLastUpdate', row: 18, col: 62, len: 8 },

               { name: 'username', row: 19, col: 67, len: 6 },

               { name: 'password', row: 20, col: 67, len: 6 },

               { name: 'newPassword', row: 21, col: 67, len: 6 }

           ],

     render: {

         view: {

             template: "<div style='font-size: 10pt; margin: 5px'>" +

                "<h1>Blue Card / User Login</h1>" +

                "<p>&nbsp;</p>" +

                "<p>SHOPS UPDATED UNTIL {{hs.data.shopsLastUpdate}} &mdash; " +

                "ACCOUNTS UPDATED UNTIL {{hs.data.accountsLastUpdate}}</p>" +

                "<p>&nbsp;</p>" +

                "<p>Username: <input type='text' size=13 maxlength=6 hs-field='hs.data.username'/></p>" +

                "<p>Password: <input type='password' size=13 maxlength=6 hs-field='hs.data.password'/></p>" +

                "<p>New Password: <input type='password' size=13 maxlength='6' hs-field='hs.data.newPassword'/></p>" +

                "<p>&nbsp;</p>" +

                "<p><button id='login_btn' tabindex=0 onclick='hs.navigate(\"main\")'>Sign in</button>&nbsp;" +

                "<button id='exit_btn' tabindex=0 onclick='hs.navigate(\"exit\")'>Exit</button></p></div>"

           }

       },

       actions: {

           main: function (hs) { hs.enter(); },

           exit: function (hs) { hs.pf1(); }

       }

   });