M213: Guidance Descriptions on the Operating Screen (HTML/JavaScript)

Avatar
Hirotaka NISHI
  • Updated
Follow

By writing a [Description] for Data Items within the Process Modeller, you can display notes beneath the Data Items in the Input form. Since you can set HTML and JavaScript as well as plain text, various things that enhance business efficiency such as emphasising "business precautions", displaying URLs to related sites, and displaying counters for the number of input characters, etc. can be realised.

 

1. Usage Example of the Description (Input hint)

a. Indicate Input Examples
Control variations in the input format by giving input examples
b. Indicate Reference Value
Reduce variation due to the subjectivity of the operator by describing a judgement or selection criteria
c. Warning and Reminder
Instil operational policies and annual goals within the organisation
  • As a way to reduce input mistakes it is also effective to set an [Initial value] that automatically enters default data (M207)

2. Overview of Description Mechanisms at each Step

a. Description of each Data item
An explanatory note of the editable item displayed on the form will be posted directly beneath the item
b. Description of Guide Panel type Data Item
The Guide Panel is a Data Item specifically for descriptions and notes. It can be set as either visible or non-visible at each Step
  • [Guide Panel] is a special Data Item for showing a description (M205)

3. Setting up Description

a. Post static tips
Describe information to help the business operation in plain text or HTML
b. Post External Information
Display information from an external website with the "iframe" HTML tag
c. Post Descriptions Dynamically
Change the contents of the description by referring to data being input using JavaScript
  • Setting display changes or data communications using JavaScript is done at your own risk
  • The JavaScript library jQuery is also available
  • When referring to the input element in HTML using jQuery, refer to it by searching the name attribute
  • Please see the Workflow-sample, etc. for a more concrete JavaScript configuration example

R2130: Making the Operations of DOM element(input tag, etc.) Easier with jQuery

X. Workflow-Sample

Z. More Info: Example of Decoration Using HTML

a. UI Decorator
You can easily create HTML for [Guide Panel] to decorate the interface with.
Guide Panel Decorator

Z. More Info: Example of Decoration Using JavaScript

Please note;） Simple operational verification has been conducted on exemplified codes, but operation in every environment is not guaranteed. Be sure to use it at your own risk when using it. Please also use it after acknowledging in advance the possibility that it will stop working in future product updates.Decoration Samples (2017-02-03)

a. jQuery LibraryWhen describing the "Input Hints" in JavaScript, the library of "jQuery" are available. (It is not guaranteed that all behavior of operations are properly.)

b. Characteristic of jQueryjQuery is a library that can simplify the coding of JavaScript. (first edition 2006) Since it is easily to configure the input screen change depending on the situation, such as a "input into form" or "operation of clicking", it allows you to pursue the improvement of the input efficiency in accordance with your business. It is described in the syntax, i.e. jQuery("div.column").click(function(){ jQuery(this).css( "background-color", "lightgray") }); (Basic knowledge of JavaScript will be needed.)

c. Notes in "Input Hint"Although all of HTML / JavaScript in the [Description] of each data item will be loaded, [Description] will not be loaded if the permission of the Task has been set as [display only] or [hide] in the Process. (However, HTML / JavaScript in the [Description] of a Guide panel type data item will be loaded if set as [Display only].) There is a possibility that the input screen becomes unstable by improper JavaScript / jQuery. $ cannot be used as alias. As a rule, meta-characters such as "[" (bracket) and "(" (parenthesis) are needed to be escaped with "\\" (two backslashes)（Official Selectors）

d. Functions and Sample Codes that would Help Your Business♦ Event = Specify with Attribute Selector, Class SelectorID Slector, etc.[accordion][accordion_item title="jQuery('input[name="data\\[♦\\].input"]').on('keyup',function(){ ♦♦ }); // If a change occurred in the form (Attribute Selector) (Single line Form)"]

jQuery('input[name="data\\[3\\].input"]').on('keypress keyup change',function(){ // If there is a change in the input value of the third item
//Detects an input of alphanumeric by keypress, detects an input of the delete key and the backspace key by keyup
// Detects focusout by change
myfunc(); 
});

[/accordion_item][accordion_item title="jQuery('textarea[name="data\\[♦\\].input"]').on('keyup',function(){ ♦♦ }); // If a change occurred in the form (Attribute Selector) (Multiple line Form)"]

jQuery('textarea[name="data\\[4\\].input"]').on('keypress keyup change',function(){ // If there is a change in the input value of the 4th item
// Detects an input of alphanumeric by keypress, detects an input of the delete key and the backspace key by keyup
// Detects focusout by change
var thisValueLength = jQuery(this).val().length; // Count the number of characters
jQuery('#mycounter').html(thisValueLength + "characters"); // Rewrite the HTML inside <p id="mycounter"></p> 
});

[/accordion_item][accordion_item title="jQuery('input[name="data\\[♦\\].input"], textarea[name="data\\[♦\\].input"]').on('keyup',function(){ ♦♦ }); // If there is a change in any one of the Form"]

jQuery('input[name="data\\[3\\].input"], textarea[name="data\\[4\\].input"]').on('keypress keyup change',function(){ 
// If there is a change in the input value of the 3rd or 4th item (Enumerate the selectors separating with a comma)
// Detects an input of alphanumeric by keypress, detects an input of the delete key and the backspace key by keyup
// Detects focusout by change
myFunc(); 
});

[/accordion_item][accordion_item title="jQuery('.myButton').on('click',function(){ ♦♦ }); // If any one of the buttons is clicked (Class Selector)"]

jQuery('.myButton').on('click',function(){ // If <input type="button" value="Google Map" class="myButton"> is clicked
myFunc(); 
});

[/accordion_item]♦ Retrieving = Within a Form:val() Within a Tag:text() html()[accordion_item title="string jQuery(this).val(); // During input in the Form in which Event occurs (input, textarea, select, etc.) value"]

var textStr = jQuery(this).val();

[/accordion_item][accordion_item title="string jQuery("input[name='data\\[♦\\].input']").val(); // During input in the Form value (Attribute Selector) (String type single line, Numeric type, Date type)"]

var textStr = jQuery("input[name='data\\[9\\].input']").val();

[/accordion_item][accordion_item title="string jQuery("textarea[name='data\\[♦\\].input']").val(); // During input in the Form value (Attribute Selector) (String type multiplelines)"]

var textStr = jQuery("textarea[name='data\\[9\\].input']").val();

[/accordion_item][accordion_item title="string jQuery("♦♦♦[name='data\\[♦\\].♦♦♦']:♦♦♦").val(); // During input in the Form value (Attribute Selector) (Select type)"]

var textStr = jQuery("select[name='data\\[9\\].selects']").val(); // Select-box
var textStr = jQuery("select[name='data\\[9\\].selects'] option:selected").text(); // Select-box (label)
var textStr = jQuery("input[name='data\\[9\\].selects']:checked").val(); // Radio button
var textStr = jQuery("input[name='data\\[9\\].selects']").val(); // Search select (id)
var textStr = jQuery("input[name='data\\[9\\].dummy']").val(); // Search select (label)

[/accordion_item][accordion_item title="string jQuery("#readonly_♦").text(); // Text within Tag (ID Selector) (Numeric type [display only], etc.)"]

var textStr = jQuery("#readonly_9").text(); 
// <div id="readonly_9" class="fit"><div class="auto-link" id="ext-gen1193">Hello hello</div></div>
// → Hello hello

[/accordion_item][accordion_item title="string jQuery("#readonly_♦" > li).html(); // HTML in the <ul> Tag of 1 hierarchy down from a Tag (ID Selector) (Options [display only], etc.)"]

var htmlStr = jQuery("#readonly_9 > ul").html(); 
// <div id="readonly_7" class="fit"><ul class="readonly-select"><li>sample choice true</li></ul></div>
// → <li>sample choice true</li>

[/accordion_item]♦ Rewriting = Within the Form:val(textStr) within the Tag:text(textStr) html(htmlStr)[accordion_item title="jQuery("input[name='data\\[♦\\].input']").val( textString ); // Rewrites the input in the Form its own (Attribute Selector)"]

<script type="text/javascript">
jQuery('input[name="data\\[1\\].input"]').on('change',function(){ 
// If there is a change in the input Text value in the Form of the data item number "1"
// (Detects focusout by change)

var thisValue = jQuery(this).val();

 var myRegex = /^https:\/\/|^http:\/\//; // Begins with "http://" or "https://" (Regex)
var newValue = thisValue.replace( myRegex, "" ); // Delete matched part
// ex) "http://www.questetra.com" → "www.questetra.com"

 var newValueLc = newValue.toLowerCase(); // Lowercasing * Note that it is applied also on other than domain part

jQuery('input[name="data\\[1\\].input"]').val( newValueLc );
});
</script>

[/accordion_item][accordion_item title="jQuery("input[name='data\\[♦\\].input']").val( textString ); // Rewrite input in the other Form Attribute Selector)"]

<script type="text/javascript">
jQuery('input[name="data\\[1\\].input"]').on('keypress keyup change',function(){ 
// If there is a change in the input Text value in the Form of the data item number "1"
var thisValue = jQuery(this).val();
// Split the string if the number of characters is 13 or more digits
if( thisValue.length > 13 ){
 jQuery('input[name="data\\[2\\].input"]').val( thisValue.substr(0, 6) );
 jQuery('input[name="data\\[3\\].input"]').val( thisValue.substr(6, 13) );
});
</script>

[/accordion_item][accordion_item title="jQuery( '#idStr' ).html( htmlString ); // Rewrite the HTML within a Tag (ID selector)"]

<script type="text/javascript">
jQuery('input[name="data\\[1\\].input"]').on('keypress keyup change',function(){ 
// If there is a change in the input Text value in the Form of the data item number "1"
//  Detects an input of alphanumeric by keypress, detects an input of the delete key and the backspace key by keyup
// Detects focusout by change
var thisValueLength = jQuery(this).val().length;

// Calculating the check digit if the number of characters is 13 digits
if( thisValueLength == 13 ){
 var mysum = 0;
 var thisValue = jQuery(this).val();

 for( i=1; i < 13; i++){
 mysum += parseInt( thisValue.charAt(i) ) * (i % 2 + 1);
 }

 var checkdigitnum = 9 - mysum % 9;
 var typedcd = parseInt( thisValue.charAt(0) );

// Rewriting the HTML within <p id="mymessage1"></p>
if( typedcd == checkdigitnum ){
 jQuery( '#mymessage1' ).html("OK");
 } else {
 jQuery( '#mymessage1' ).html("<font color=red>NG</font>");
 }
} else {
 jQuery( '#mymessage1' ).html("<font color=blue>Please enter 13-digit number</font>");
}
});
</script>

[/accordion_item] [/accordion]

Articles in this section

See more

Comments

0 comments

Please sign in to leave a comment.

Related articles