Creating an HTML template

The HTML template is a Handlebars template that includes data binding to terminal screen content. When a screen rule is selected, HostSurfer will load and process this template. The resulting HTML is inserted into HTML element passed as "view" container.

You can bind output fields using the standard Handlebars syntax ie.

 <p>{{hs.data.R18C9}} {{hs.data.commerceLastUpdate}} &mdash; {{hs.data.R18C39}} {{hs.data.accountsLastUpdate}}</p>

where "hs.data" is the node exposed by HostSurfer as root of both dynamic and custom screen fields.

To bind input fields, you must use the "hs-field" attribute like this:

 <input type="text" size="13" maxlength="6" hs-field="hs.data.username"/>

This attribute will link the HTML input element with the terminal screen field, allowing for a two-way data binding.

The HTML template will be processed upon screen identification, replacing the Handlebars expressions and HostSurfer attributes with the corresponding screen information. Please note that we have combined dynamic and user defined fields.

Also, we have two "actions", each one associated to a "button" click event handler:

 <span class="button" id="login_btn" tabindex=0 onclick="hs.navigate('main')">Sign in</span>    

 <span class="button" id="exit_btn" tabindex=0 onclick="hs.navigate('exit')">Exit</span>

Actions are a great ally to control the application screen flow, because all actions with the same name are linked across the different screens and will be executed in chain while the action exists for the current screen.

We create the HTML template inside a hidden div:

<div id="login" style="display:none">

  <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>

</div>