UI 2023 - forms

All forms in ScheduleInterpreter are following strict guidelines. Elements and forms themselves, their appearance and functionality are controlled through the set of JavaScript options.

Defining the form
<form id="dataEntryForm" class="si-form">
  <formcolumn id="dataEntryForm_col1">
    <!-- column content -->
  </formcolumn>
  <formcolumn id="dataEntryForm_col2">
    <!-- column content -->
  </formcolumn>
</form>

Every form must be accompanied by a special class si-form and can have single of multi-column layout. It is recommended to use single column layout for data entry forms and multi-column layout for settings and options.

Disable autofill

Autofill option can be turned off in all forms in the document. The process attaches attribute autocomplete to all text elements and sets its value to off.

<script>
	si_form.disableAutofill();
</script>
Checkboxes default values

ScheduleInterpreter is using custom attribute checked-value to pre-define the value of the checkboxes. When checkbox is checked off, the value is set to the content of the checked-value attribute.

<script>
	si_form.checkboxValue();
</script>
Form elements outline

All elements are wrapped inside the label tag, even if the content of the label is blank. Fields that require validation must be accompanied with instructions and a radar indicator to attract attention of a user to the form item.

<label >
	<!-- label text or blank -->
	<field />
	<fieldinstruction>
		<svg width="24px" height="24px" viewBox="0 0 24 24">
			<g transform="translate(12,12)">
				<circle class="si-core" cx="0" cy="0" r="2"></circle>
				<circle class="si-radar" cx="0" cy="0" r="2"></circle>
			</g>
		</svg>
		<!-- instructions to complete -->
	</fieldinstruction>
</label>

Instructions for each form field must be complete and provide user with simple steps to complete the entry. CSS will automatically lower case the entry. The entry must be single sentence without ending period. Other punctuation is allowed within the instructions. Example of a <fieldinstruction> content

entry must be between 5 and 20 characters, letters, numbers and special characters are allowed

All elements follow strict guidelines of formatting, layout and attributes. Validation of the elements is fully automated and is universal across the entire platform.

Checkbox input

Checkbox can be configured with several items that help to ensure UI consistency and form automation processes.

Attribute Description Notes
data-val Attribute allows to automatically validate the checkbox being checked-off. Works on blur and submit form actions. Best when configured together with checked-value and data-required attributes
checked-value Attribute stores value of the checkbox that will be used when the checkbox is checked off. Recommended for all checkboxes in the platform.
data-required Attribute defines what data is expected as a value of the checkbox. Helps to force expected value when checkbox is validated. For example, set to 1 when user is expected to check off the item or agree to conditions, before submitting the form. 
<label >
	I agree to the terms
	<input type="checkbox" name="checkbox" checked-value="1" data-val data-required="1" />
	<fieldinstruction>
		<svg width="24px" height="24px" viewBox="0 0 24 24">
			<g transform="translate(12,12)">
				<circle class="si-core" cx="0" cy="0" r="2"></circle>
				<circle class="si-radar" cx="0" cy="0" r="2"></circle>
			</g>
		</svg>
		help content
	</fieldinstruction>
</label>

image-1683983981828.png

Text input

Text input field has multiple components to predefine expected input from the user. This includes limitation of characters, type of characters expected, auto validation and other.

When data entry is required for he field, it is recommended to include class si-required in the label tag. This tag will be automatically placed when form automation code is executed.

Attribute Description Notes
data-val Attribute allows to automatically validate the entry. Works on blur and submit form actions. Can be removed and will not affect other custom attributes of the field.
minlength Defines minimum number of characters the entry must comply with. Modern browsers may display additional prompt for requirements when user is completing the entry.
maxlength Defines maximum number of characters the entry must comply with. Modern browsers may display additional prompt for requirements when user is completing the entry.
data-val-regexp Provides pattern match the entry will be validated against. This allows to have early content "sanity check" at the user's end. Server must complete secondary validation as browser content can be altered. 
<label class="si-required">
	First name
	<input type="text" name="firstName" id="firstName" data-val minlength="5" maxlength="15" data-val-regexp="^[a-zA-Z\s,\.\-'\(\)]+$">
	<fieldinstruction>
		<svg width="24px" height="24px" viewBox="0 0 24 24">
			<g transform="translate(12,12)">
				<circle class="si-core" cx="0" cy="0" r="2"></circle>
				<circle class="si-radar" cx="0" cy="0" r="2"></circle>
			</g>
		</svg>
		Please enter your first name
	</fieldinstruction>
</label>

image-1683984212037.png

Drop down or select input

ScheduleInterpreter is using combination of several technologies to achieve fully customizable dropdown functionality. If provides high speed, search, filter and color coding options.

<label class="">
	Select from the list
	<input type="text" name="meal" id="meal" class="si-noShow" data-val minlength="1">
	<div id="meal_container"></div>
	<fieldinstruction>
		<svg width="24px" height="24px" viewBox="0 0 24 24">
			<g transform="translate(12,12)">
				<circle class="si-core" cx="0" cy="0" r="2"></circle>
				<circle class="si-radar" cx="0" cy="0" r="2"></circle>
			</g>
		</svg>
		Make sure at least one meal is selected
	</fieldinstruction>
</label>
<details>
						<summary class="si-newFeature">
							New layout and features. Click here to learn more.
						</summary>
						<div class="si-cardNote si-50 si-expandableTransition">
							This feature has been updated to use ScheduleInterpreter&reg; Flow.<br><br>
							<h4>What's new</h4>
							<ul>
								<li>More space to see the content and no need to scroll. Controls on the right side of the table are replaced with right click of a mouse anywhere.</li>
								<li>Content-aware contextual menu with all available options.</li>
								<li>Quick search allows to filter the entire list across all columns.</li>
								<li>Faster column sorting.</li>
								<li>Column width resizing.</li>
								<li>Auto freeze for checkbox and ID columns to simplify horizontal scrolling.</li>
								<li>Non-intrusive, disappearing notifications and confirmations.</li>
								<li>Intelligent copy <code>CTRL + C</code> of the content for pasting into MS Excel.</li>
								<li>Advanced selection using Quick search.</li>
							</ul>
						</div>
					</details>

 

 

Back to top