By setting [Description] in Data items, you can indicate "notes" beneath the Input form. Since you can set HTML and JavaScript as well as plane text, you can realize a variety of ideas to increase the operational efficiency, e.g. emphasizing the "Note on a business operation", or indicating an URL of hyperlink to "Related website", or indicating a "Counter for the number of input characters ".
1. Usage Example of Decoration (Input hint)
- a. Indicate Input Examples
- Control the fluctuations of the inputting format by enumerating "Input examples"
- b. Indicate Reference Value
- Reduce the variation due to subjective of the operator by describing a judgment criteria or a selection criteria
- c. Warning and Reminder
- Sharing business policy or annual target within the organization
- As a way to reduce input mistakes, it is also effective to set [Initial value] that realizes "pre-entered" (M207)
2. Overviews of Mechanism of Decoration at each Step
- a. Description on each Data item
- Description about the Item that is shown as Data input form (editable) will be displayed
- b. Description on Guide panel type data item
- Descriptions which are set as "Display" in the Task property will be indicated
- [Guide Panel] is a special data item for showing "description" (M205)
3. Set up Decoration (Description)
- a. Indicate Descriptions Statically
- Describe information to help the business operation in plain text or HTML
- b. Indicate External Information
- Indicate information on external website capturing with "iframe" of HTML tag
- c. Indicate Descriptions Dynamically
- indicate a Description that varies referring to data in during entering, by using JavaScript, etc.
- Setting display changes or data communications using JavaScript is at your own risk
- JavaScript library "jQuery" is also available
- If you want to make a reference to "input" elements in HTML with jQuery, for example, set up a searching in "name" attribute
- Please see Workflow-sample, etc. for more particular Javascript configuration example
R2130: Making the Operations of DOM element(input tag, etc.) Easier with jQuery
X. Workflow-Sample
- 2017-09-25 (Credit Card Info Reception: Episode 554: Web Reception, But No Card Information
- 2017-05-15 (Hours Worked Report): Episode 535: True Work Style Reformation is to Improve the System Continuously
- 2017-05-08 (Date Input Form Test): Episode 534: Devising to Prevent Date Input Errors
- 2017-05-01 (Numeric Input Form Test): Episode 533: Devising to Prevent Numeric Input Errors
- 2017-02-27 (Hours-worked report -Hours and minutes): Episode 524: Automation of Work with Server-side JavaScript
- 2017-02-20 (Hours-worked report): Episode 523: Tracking the Hours Worked on Cloud
- 2017-02-13 (Lending Management): Episode 522: Want to Manage "Long-term Lending" of Companies Belongings
- 2016-12-26 (Contract Approval Process): Episode 515: Approval on Contract through Workflow! (Improved version)
- 2016-12-12 (Article Creation process): Episode 513: Business Process to Ensure Quality of Posted Articles
- 2016-11-07 (Customer Master Appending): Episode 508: Officialize Corporate Names in "Customer Master" by Corporate Number API
- 2016-07-11 (Activity Log Registration): Episode 491: Bank CSV Data into Google SpreadSheet
- 2016-07-04 (Test flow for Input Form): Episode 490: Placing a Button for Automatic Password Generation
- 2016-06-27 (Translation flow): Episode 489: Placing A Button for Measuring the Work Time Automatically
- 2016-05-02 (Test flow for Input form): Episode481: Devising of "Button Input" to Input Form"
- 2016-01-18 (Travel Request): Episode 466: Approval of Travel Request is a Job of "Deputy Manager"
- 2015-12-28 (Procurement Request): Episode 463: Procurement Request (Starter Template)
- 2015-11-16 (General-purpose work request): Work-Request Flow for Recording the Actual Work Cost
- 2015-11-02 (Personal information databasing): Be Accurate in Inputting Address! (Zip code data utilization)
- 2015-10-19 (Daily Sales Report flow (Geolocation)): GPS Recording in Daily Report Process
- 2015-10-13 (Inquiry Correspondence process): Complaint Management that Refers to Customer Master
- 2015-10-05 (Daily Sales Report flow): Daily Sales Report Referring to Customer Master Data
- 2015-09-14 (Trade Account Opening): Management of Customer Master Data Using Corporation Number (Updating for addition)
- 2015-09-07 (Credit Management flow): Management of Client Master Using Corporation Number
- 2015-08-31 (Check Digit sample): The Function of the "Check Digit" in the Individual Number System
- 2015-07-13 (Individual Number Application flow): National Identification Number in Workflow (5)
- 2015-07-06 (Individual Number Application flow): National Identification Number in Workflow (4)
- 2015-06-29 (Individual Number Application flow): National Identification Number in Workflow (3)
- 2015-06-22 (Individual Number Application flow): National Identification Number in Workflow (2)
- 2015-06-15 (Individual Number Application flow): National Identification Number in Workflow (1)
- 2015-03-16: Teleworking System, You can Achieve This Far with Free Cloud!
- 2014-10-27: How to 'Start Temporary' Own Application by Email
- 2014-10-20: Sometimes, 'Proposal' must be Forced for Continuous Improvement
- 2014-10-14: Business Process for Business Process Improvement!?
- 2014-05-12: Select from Main Class, Narrowed Down Choices
- 2014-03-03: Utilizing Workflow for Smooth Web Site Operation
- 2014-02-10: Take Advantage of the Exhibition Questionnaire
- 2013-09-30: Embed Manual to Operating Screen of Workflow with Google Drive (Stamp and shipment flow)
- 2013-11-25: Google Map for the 'Pathway' in Business Trip Application (Business Trip Approval flow)
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 (UI 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]
Comments
0 comments
Please sign in to leave a comment.