M213: Guidance Descriptions on the Operating Screen (Markdown)

 

By writing a [Description] for Data Items within the Workflow App, you can display notes beneath the Data Items in the Input form. Since you can use JavaScript as well as Markdown text and HTML, 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)

Tutorial: Design a User-Friendly Input Form

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 Markdown text or HTML

b. 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
• Use the Questetra Form JavaScript API to get / set the values of the input fields.
• To avoid conflicts with what is used in Questetra, define your own function's name/element ID to start with "user_".

R1020: Markdown Samples (for beginners)
R1021: Markdown Samples (for experts)
R2131: HTML Elements Available in Markdown
R2132: Questetra Form JavaScript API
Get/Set Data Item Values on the Form Screen

---

X. Workflow-Sample

• Travel Request Flow
• Hours-worked Report Flow
• Inquiry Handling App
• Translation-Time Measurement
• Article Creation Flow
• Contract Approval App
• Lending Management App

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  

a. Decoration Examples

It supports user input and screen display, such as simple input by clicking a button, display according to options, and unique input check.
Decoration Examples (2022-08)

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.