Part 3 - Screen HTML Template

In last part we will describe how to create UI template for modernized screens.

There are two steps involved in screen templating:

HTML template with templating engine
HTML design according to used framework

Templating engine

We use Template7 as our HTML rendering engine. All documentation can be found on engine site so we will not describe templating engine. It is enough to know we are using it to generate HTML UI representing terminal screens.

Templating engine use combination of HTML codes and templating engine instructions to insert data from JSON data structure exported from screen.

All interactions are based on "click events" on elements containing "data-type" attribute. Different actions will be applied based on "type" of action.

List of all action types:

data-type	Description	event
cursor	place cursor to screen row / col	onClick
export	export screen to "excel" or "word" or "screen"	onClick
submit	transfer all fields from UI to terminal	onClick
action	transfer selected field from UI to terminal	onClick
select	same as action, used for SEELCT tag	onChange

NOTE: All types except "export" use data-cmd to submit screen with requested terminal keyboard command as PFn, ENTER, RESET, ATTN, SYSREQ etc.

NOTE: For "export", valid values for data-cmd are "word" or "excel" or "screen".

List of all attributes:

Attribute	Description
data-row	set cursor to row
data-col	set cursor to column
data-cmd	terminal keyboard command to send
data-auto	if true, disable auto enter on field
data-id	target field
data-val	set value to target field
data-opt	find field at position instead using data-id

Attribute combinations table

data-type	action	select	submit	cursor
data-row	*	*		*
data-col	*	*		*
data-cmd	*	*	*	*
data-auto	*	*	*
data-id	*	*	*
data-val	*	*
data-opt	*	*

Examples

Add basic data to HTML (add title to document):

<div>{{data.title}}</div>

Add field (will set field default data from field value):

<input type="text" name="f1" data-id="1" 
       maxlength="{{this.$fields.f1.len}}" 
       value="{{data.fld1}}">

Add submit button (will iterate over all fields, validate them, update values from UI and submit terminal screen) :

<a href="#" data-id="1" data-type="submit" data-cmd="ENTER">
    CONFIRM
</a>

Add action button (will focus on field 1 [data-id] and press F4 [data-cmd]) :

<a href="#" data-id="1" data-type="action" data-cmd="PF4">
    FILTER
</a>

Add action button (will focus on row /col and press ENTER [data-cmd]) :

<a href="#" data-row="1" data-col="20" data-type="cursor" data-cmd="ENTER">
    SELECT
</a>

Add option button (will focus on field 1 [data-id], populate field with 99 [data-val] and press ENTER [data-cmd]).

<a href="#" data-type="action" data-id="1" data-cmd="ENTER" data-val="90">
    SIGN OFF
</a>

Add option button (will focus on field if found at [data-opt], populate field with wrkactjob [data-val] and press ENTER [data-cmd]).

<a href="#" data-type="action" data-opt="[[19,6],[20,6]]" data-cmd="ENTER" data-val="wrkactjob">
    SIGN OFF
</a>

Template engine add-on functions

We added our own function to Tempalte7 rendering engine to improve integration with 5250 terminal:

Escape helper

Used to escape text that contains html codes.

{{escape this.title}}

Field helper

Safe way to get field object information. If field does not exist, template will not break. Can be easily used for example to define input field max length etc.

maxlength="{{fld 'f10' 'len'}}"

If Field helper

Safe way to create field based condition rendering. If field is missing, template will not break.

Here is an example to generate editable or readonly input field based on field type.

{{#iffld 'f1' 'isBypass'}} readonly {{else}} maxlength="{{fld 'f1' 'len'}}" {{/iffld}}

Temp variable helper

Used for complex iterative operations when we need to use tep variable for intermediate data storage.

{{set "a" this.title}}, then use as {{ @root.title}} from for/each statement.

Select and check box helpers

Used on "select" and "check box" input type html elements. Helpers will return selected or checked html attributes.

<select data-id="{{js '@index+1' }}" data-type="select" data-cmd="ENTER">
    
    <option value="" {{isSelected '' this}}></option>
    
    {{#each @root.$options}}
    <option value="{{this.v}}" {{isSelected this.v @root.tmp}}>
      {{this.v}}
    </option>
    {{/each}}
    
</select>

UI framework

As this is pure web technology, which framework will be used is up to developer and its preference. In our modernization process we use 2 frameworks - Framework7 for mobile UI development and modified Bootstrap 4 for browser interface.

Base idea is to create index.html page which will load all required resources like framework, CSS and base page structure.

Second step is to add DIV element with specific ID. That ID should be set in screen mapping definition object as shown below. In this case target DIV is a #wrapper element. In other words, every HTML generated from template will be injected inside target DIV.

{
  "templates": {
    "default" : {
      "output": "#wrapper"
    }
  }
 }

Subfile support

To add mouse scroll, touch swipe or screen scroll to send page-up and page-down subfile actions, one should add data-type=subfile to the table containing terminal screen subfiles. When this option is used, additional on-screen actions for subfile scrolling is not needed.

<table data-type="subfile"> ....