MS3 Sample Site

View
Rendered webpage	APL code

Introduction
getting started
recommendationsTutorial
visual approach to
common tasksSamples
pages and mini-apps
each uses just a few controlsControls
list of all supported controls
links to samples using themReference
general information
technique descriptions

MiServer is a free, open-source web server implemented in Dyalog APL. It enables the APL user to build sophisticated websites with little to no knowledge of the web technologies like HTML, JavaScript, etc. We hope that you will enjoy MiServer; join the forums🔗, and contribute via GitHub🔗.

This website serves as guide to MiServer 3 – providing documentation, samples, and advice. At the same time, it showcases many of MiServer's capabilities. If you are just getting started with MiServer 3, check out the Tutorial tab. Look through the Samples to get an idea of of the variety of web content that MiServer can generate.

Explore the tabs for documentation, the broad selection of available controls, and the vast collection of sample pages and mini-apps. See the source of any page by clicking the MS3 logo in the top left corner and access other resources by clicking the Resources link in the top right corner.

JavaScript DataTable sample — JavaScript DataTable: Search almost 1500 idioms in an instant.

Dyalog ListManager sample — Dyalog ListManager: Move fruits between lists with streamlined interface.

HTML form sample — HTML form: Arrange many interactive elements together.

Dyalog RadioButtonGroup sample — Dyalog RadioButtonGroup: Create an entire group of radio buttons at once.

Syncfusion ejTreeGrid sample — Syncfusion ejTreeGrid: View and collapse a structured spreadsheet.

Syncfusion ejMenu sample — Syncfusion ejMenu: Build a menu from external data.

jQuery UI Spinner sample — jQuery UI Spinner: (Pre-) select values with spinners.

HTML video sample — HTML video: Specify a list of alternate video sources.

Creating a MiSite
Creating a Widget
Creating Content
Event Handling
Testing with Selenium
Install and Config
- Configuration
- Installation
References
- Function Reference
- Terminology

In the tabs below, you will find categorized examples of webpage content. Click any element for more information.

Common elementsFormattingPositioningEmbeddingInteractionWindows & Popups

This div is the main container of this tab.

This is the beginning of a paragraph, but this phrase is a separate piece of text inside the paragraph.

StackPanel

Number Input:

CheckBoxes

	Checked
	Unchecked

RadioButtonGroup

	Selected
	Unselected

Slider

Primaries
- Cyan
- Magenta
- Yellow
Key
- Black

Color	RGB
aqua	#00FFFF
black	#000000
blue	#0000FF
fuchsia	#FF00FF
gray	#808080
green	#008000
lime	#00FF00
maroon	#800000
navy	#000080
olive	#808000
purple	#800080
red	#FF0000
silver	#C0C0C0
teal	#008080
white	#FFFFFF
yellow	#FFFF00

This div has inner padding and gradient backround

Bold indented text which has to be extremely long in order to show that only the first line is being indented.

Huge text with outer marginExpanded and underlined

Blue box with shadow

Centered text with shadow

White text on image background

Surrounded by borders and top-right corner is round

Inline paragraph with limited width and single line height.

Monospace, Sans-Serif, and Serif.

Parent element with "relative" position so we can align vertically

Default position and text alignment

Centered text

Right-aligned text

Centered element

Right-aligned element

Bottom-aligned text

Bottom-aligned element

Movable (drag me!)

Choose a color to get a matching notification:

CSS to give floating impression

Content of dialog box widget

Browse Examples Directory

Task demonstrated	Type	Main controls used documentation links
Insert a link	simple	A
Nested custom themed tabs with complex titles	advanced	Accordion
Dyalog collapsing interface with four pseudo-language sections	simple	Accordion
Play an audio file	simple	Audio
Button with callback	simple	Button
Variably tristate check-box	advanced	CheckBox
Optionally tristate check-box	simple	CheckBox
An auto-completeable drop-down	simple	Datalist
Collect input and echo it on a button press	simple	EditField, Button, label
Enter first and last name in a FieldSet (reacts to each keystroke)	simple	Fieldset, label, EditField
Figure with caption	simple	Figure
Explain about Forms	simple	Form
Simple accelerometer interaction (use it from a platform which responds to movement)	simple	Gyro
Advanced ways to use icons by combining/transforming them	advanced	Icon
Icon-Finder for FontAwesome-Icons	advanced	Icon, , , DataTable
Icons from FontAwesome, Syncfusion, and Google	simple	Icon
Date/time, email, URL, file, and submit Input elements	advanced	Input, InputSubmit
Input-control to handle file-uploads	simple	InputFile, , , Input
Various costumizations of grid-aligned inputs	advanced	InputGrid
Enter first, last name and birthdate	simple	InputGrid
Text, number, password, and range Input elements	simple	Input, Table
Nested (multi-level) lists	advanced	List
Move fruits between lists with streamlined interface	simple	ListManager
Lists of fruits and clickable links	simple	List
Use markdown to generate HTML	simple	Markdown
Insert an ordered list of links based on an array of texts and links, and add callbacks on mouse movements	advanced	Ol
Lists of fruits and clickable links	simple	Ol
Demonstrates options for customization of Panels	advanced	Panel
Display information, warnings, errors or success-message	simple	Panel
Special options for RadioButtonGroup	advanced	RadioButtonGroup
Create an entire group of radio buttons at once	simple	RadioButtonGroup
Clear a form with a ResetButton	simple	ResetButton, SubmitButton, Fieldset
Insert reference to JavaScript from a file	advanced	Script
Insert inline JavaScript and make a button to run it	simple	Script
Select one or more fruits from a list.	advanced	Select
Pick fruits from a simple drop-down	simple	Select
Nested StackPanels provide flexible layout control.	advanced	StackPanel
Vertical and Horizontal "stacking" of content.	simple	StackPanel
Color headings red using an external style sheet	simple	StyleSheet
Color headings red using an internal style element	simple	Style
Use a SubmitButton to POST a form, rather than use an AJAX callback	simple	SubmitButton, ResetButton, Fieldset
Display tabular data with a bit of styling	advanced	Table
Automatically display a matrix as a table	simple	Table
Nested custom themed tabs with complex titles	advanced	Tabs
Dyalog tabbed interface with four pseudo-language tabs	simple	Tabs
Interactive control of multiple timers	advanced	Timer
Signal timed events to the server	simple	Timer
Insert an unordered list of links based on an array of texts and links, and add callbacks on mouse movements	advanced	Ul
Lists of fruits and clickable links	simple	Ul
jQuery UI collapsing interface with four pseudo-language sections	simple	jqAccordion
Add a class during callback	simple	jqAddClass, head
Grouped sets of buttons	simple	jqButtonset
Take a div for a drag	simple	jqDraggable
Make elements accept draggable content	simple	jqDroppable
Build a vertical (drop-down) menu from external data	advanced	jqMenu
Insert a vertical (drop-down or context) menu	simple	jqMenu
Remove a class during callback	simple	jqRemoveClass, head
Resize a Div	simple	jqResizable
Using one slider to set the bounds of another	advanced	jqSlider
Single and Ranged Sliders	simple	jqSlider
Grid of reorderable boxes	advanced	jqSortable
List of items that can to be dragged to rearrange in a new order	simple	jqSortable
Select and preselect values with spinners	simple	jqSpinner
Interchange classes during callback	simple	jqSwitchClass, head
jQuery UI tabbed interface with four pseudo-language tabs	simple	jqTabs
Toggle a class during callback	simple	jqToggleClass, head
Toggle, show, and hide an element during callback	simple	jqToggle, jqHide, jqShow, head
Pick method of transportation from multiple Select-Controls (for different levels of the hierarchy)	advanced	ChainedSelect
Pick your favorite car with linked select-controls	simple	ChainedSelect
Select one or more fruits or vegetables from a list which might be updated with a button-click	advanced	Chosen
Pick fruits from a simple drop-down	simple	Chosen
A DataTable enhanced with the "buttons"-Plugin	advanced	DataTable
Simple Example slightly advanced with zebra-striping and highlighted search-terms	advanced	DataTable
A DataTable with the a responsive layout	advanced	DataTable
A DataTable with the "yadcf"-Filters enabled	advanced	DataTable
DataTable showing an analysis about presendential endorsements of top 100 US Newspapers (yadcf, custom rendering)	advanced	DataTable
The simplest use case of a DataTable	simple	DataTable
Dimple data chart	simple	dimple
An example of what "dimple" can do	simple	Script, div
Dimple line plot chart	simple	dimple
Dimple line plot chart	simple	, dimple, , div
Advanced jBox-Tooltips	advanced	jBox
Using jBox in callback-functions to display notices or modal popups	advanced	jBox
jBox-confirmations triggered from APL-Callback (tight integration of APL and JS-Callbacks)	advanced	jBox
Confirmation Dialog on PageLoad	advanced	jBox
Image-galleries with jBox	advanced	jBox
jBox provides several style of popups	simple	jBox
simple Confirmation-Dialogs with limited interaction	simple	jBox
JavaScript library that implements SHA-based hashing algorithms	simple
Accordion which calls back to the server on open/close	advanced	ejAccordion
Syncfusion collapsing interface with four pseudo-language sections	simple	ejAccordion
Show information as barcodes	simple	ejBarcode
Customized ruler-style indicator	advanced	ejBulletGraph
Ruler-style indicator of two related values	simple	ejBulletGraph
Toggle availablility of one button with another	advanced	ejButton
Illustrates a simple push-button	simple	ejButton
Simple pie chart of workspace object sizes	simple	ejChart
Callback interconnect two checkboxes	advanced	ejCheckBox
Checkbox with callback	simple	ejCheckBox
Formatted circular indicator gauge with multiple pointers	advanced	ejCircularGauge
Speedometer style display	simple	ejCircularGauge
Insert a basic color picker with preset palettes	simple	ejColorPicker, Select
Insert mutually interdependant calendars	advanced	ejDatePicker
Pick a date in yyyy/MM/dd format	simple	ejDatePicker
Let user select dates/times and display the difference	advanced	ejDateTimePicker
Insert an interface to select date and time	simple	ejDateTimePicker
Interdependant multi-modal dialog boxes	advanced	ejDialog
Simple dialog box	simple	ejDialog
Various digital segment (LCD style) displays	advanced	ejDigitalGauge
Digital (LCD-style) display	simple	ejDigitalGauge
Make an element draggable	simple	ejDraggable
Make elements accept draggable content	simple	ejDroppable
An editable grid	advanced	ejGrid
Read-only grid with formatting and alignment	simple	ejGrid
Linear gauge with custom scale (Fahrenheit thermometre)	advanced	ejLinearGauge
Linear gauge (thermometre style)	simple	ejLinearGauge
Listbox of reorderable options for selection	advanced	ejListBox
Listbox of options for selection	simple	ejListBox
Build a horizontal menu (bar) from external data	advanced	ejMenu
Demonstrate the Syncfusion ejMenu widget with databinding	advanced	ejMenu
Horizontal (application or navigation ) menu bar with background image	simple	ejMenu
Open Rich-Text Editor and retrieve document	simple	ejRTE
Rating	simple	ejRating
Single and Ranged Sliders	simple	ejSlider
Tabbed interface with tabs on the left	advanced	ejTab
Syncfusion tabbed interface with four pseudo-language tabs	simple	ejTab
Display a tag cloud of object sizes in MiServer's workspace	simple	ejTagCloud
Validate numbers, currency and percentages	simple	ejTextBox
Button with two states	simple	ejToggleButton
View and collapse a structured spreadsheet	simple	ejTreeGrid
TreeView with checkable nodes and ability to add and delete nodes	advanced	ejTreeView
Build a simple tree with a node selection callback	simple	ejTreeView
Insert styled toggleable pop-up with arbitrary web content	advanced	ejWaitingPopup
Insert the three basic forms of toggleable "please wait" indicator	simple	ejWaitingPopup
Insert a hyperlink	simple	a
Display definition when hovering over an abbreviation	simple	abbr
Add contact information	simple	address
Mark an independent section	simple	article
Insert a sidebar with related information	simple	aside
Specify a list of alternate audio sources	advanced	audio, source
Embed an audio stream	simple	audio
Make text bold	simple	b
Set document base URI for relative links	simple	base, a
Isolate text that should be displayed with a reading order that is different from the surrounding text	simple	bdi
Override the inherent directionality of text, i.e. the left-to-right or right-to-left reading order	simple	bdo
Insert a long quotation of text	simple	blockquote
Insert a line break	simple	br
Insert a push button	simple	button
Bitmap image canvas and draw a picture using JavaScript	simple	canvas, script
Inform where a text was quoted from	simple	cite
Embed a code fragment	simple	code
Add a predefined list of options for later use in a control	simple	datalist, input, option
Mark deleted text	simple	del
Make an expandable menu	advanced	details, summary
Add a summary with revealable details	simple	details, summary
Reveal the definition of a term (here a function name) when the mouse hovers over the term	simple	dfn
Add interactivity to a division	simple	div
Create a list of descriptions for several terms	simple	dl, dt, dd
Emphasize text	simple	em
Embed an external application, i.e. a plug-in	simple	embed
Group form controls	simple	fieldset, legend
Insert a figure with a caption	simple	img, figure, figcaption
Section footer following run of paragraphs	simple	footer
Arrange many interactive elements together	simple	form, input, textarea, select, option, optgroup, fieldset, label, keygen, legend
Insert all possible levels of header	simple	h1, h2, h3, h4, h5, h6
Insert a header with introductory content	simple	header
Draw a horizontal dividing line	simple	hr
Italicize text	simple	i
Embed another webpage	simple	iframe
Mark inserted text	simple	ins
Indicate user input	simple	kbd
Allow clicking somewhere else to interact with controls	advanced	label, form
Include text in controls' clickable area	simple	label, form
Add nested lists of varying types	advanced	li, ol, ul
Add ordered and unordered lists	simple	li, ol, ul
Embed raw image data in the page itself	advanced	link
Include an external resource; here an icon	simple	link
Image (in this case a map) with clickable areas	simple	img, map, area
Highlight text	simple	mark
Create a context menu	simple	menu, menuitem, div
Display a gauge for measurement within a given range	simple	meter
Mark the main navigation controls	simple	nav, a
Add alternative content for when JavaScript is turned off or not supported	simple	noscript, script
Embed a PDF file	simple	object
Insert an expression's result value	simple	output, form, input
Three simple paragraphs	simple	p
Define the parameters for a en embedded object	simple	object, param
Block of text preserving linebreaks and multiple spaces	simple	pre
Graphically display time using progress bars	simple	progress
Mark text as a quotation inside the containing text	simple	q
Add nested ruby text and an alternative for non-supporting browsers	advanced	ruby, rt, rp
Add pronunciation and explanation as ruby text (5.5pt) over the line	simple	ruby, rt
Strike-through text	simple	s
Indicate computer output	simple	samp
Embed JavaScript	simple	script
Define a section in a document	simple	section
Make text smaller	simple	small
Delimit inline content for later manipulation	simple	span
Mark important text	simple	strong
Embed a style sheet	simple	style
Make text subscript	simple	sub
Make text superscript	simple	sup
Use SVG to draw	simple	svg, circle, ellipse, polyline, polygon, rect, line, path
Insert an interactive table with column-wise formatting	advanced	table, tbody, thead, tfoot, colgroup, col, tr, td, th, caption
Manually display a matrix as a table	simple	table, tr, td
Insert a multi-line text control	simple	textarea
Indicate a time	simple	time
Set the document title in the browser's tab or title bar	simple	title
Specify subtitles (closed captions)	simple	track, video
Underline text	simple	u
Indicate a variable	simple	var
Specify a list of alternate video sources	advanced	video, source
Embed a video	simple	video
Indicate where to break a work if it must be broken	simple	wbr
Use external code to style and touch-enable uppercase-lowercase alphabet pairing game	mini-app	jqDroppable, jqDraggable, jqAddClass, Script, StyleSheet
John Conway's "Game of Life" (interactive)	mini-app	Table, RadioButtonGroup, Timer
Search the Dyalog, FinnAPL, and APL2 idiom lists	mini-app	DataTable
Children's educative application for Yiddish alphabet and keyboard	mini-app	Button, span
Simple mortgage calculation application	mini-app	EditField, Form, InputGrid
Classic Snakes and Ladders Game	mini-app	svg, StackPanel, style
Simple version of the addictive "2048" sliding game	mini-app	Table
Vector graphics Tic Tac Toe game	mini-app	svg, Table, StyleSheet
Tube/Metro/Subway planner for multiple cities	mini-app	Chosen
SVG turtle graphics	mini-app	svg, line, Input
Whack-A-Duck: Shrinking button that jumps away progressively faster when you click it	mini-app	img, script, img, style

Control documentation link	Description	Relevant samples	Library
A	Dyalog Hyperlink widget based on the HTML a tag	Insert a link	Dyalog
APL			Dyalog
Accordion	Dyalog Accordion widget	Dyalog collapsing interface with four pseudo-language sections Nested custom themed tabs with complex titles	Dyalog
Audio	Same as base HTML5 audio element but sets default message for browsers that don't support it	Play an audio file	Dyalog
Button	Used to initiate actions	Button with callback Children's educative application for Yiddish alphabet and keyboard Collect input and echo it on a button press	Dyalog
ChainedSelect	Implements a hierarchical select across multiple levels	Pick your favorite car with linked select-controls Pick method of transportation from multiple Select-Controls (for different levels of the hierarchy)	JavaScript
CheckBox	Dyalog checkbox widget with tristate support	Optionally tristate check-box Variably tristate check-box	Dyalog
Chosen	Enhanced HTML selects with search-box and improved multi-select	Pick fruits from a simple drop-down Tube/Metro/Subway planner for multiple cities Select one or more fruits or vegetables from a list which might be updated with a button-click	JavaScript
DataTable	Enhanced searchable and reorderable HTML table	The simplest use case of a DataTable Search the Dyalog, FinnAPL, and APL2 idiom lists A DataTable enhanced with the "buttons"-Plugin Simple Example slightly advanced with zebra-striping and highlighted search-terms A DataTable with the a responsive layout A DataTable with the "yadcf"-Filters enabled DataTable showing an analysis about presendential endorsements of top 100 US Newspapers (yadcf, custom rendering) Icon-Finder for FontAwesome-Icons	JavaScript
Datalist	Dyalog improved HTML5 datalist element	An auto-completeable drop-down	Dyalog
DirectoryBrowser			Dyalog
EditField	Dyalog text input field widget	Collect input and echo it on a button press Simple mortgage calculation application Enter first and last name in a FieldSet (reacts to each keystroke)	Dyalog
Fieldset	Same as base HTML5 fieldset, but accepts the legend for the fieldset as an argument	Enter first and last name in a FieldSet (reacts to each keystroke) Clear a form with a ResetButton Use a SubmitButton to POST a form, rather than use an AJAX callback	Dyalog
Figure	Same as base HTML5 figure, but with Caption and CaptionPos attributes	Figure with caption	Dyalog
Form	Same as the base HTML5 form element, but sets the action and method attributes	Explain about Forms Simple mortgage calculation application	Dyalog
Grid	Grid - like _.Table but with borders - accepts matrix of data		Dyalog
Gyro	create a gyroscopic listener (e.g. for use with mobile phones or tablets)	Simple accelerometer interaction (use it from a platform which responds to movement)	Dyalog
Icon	Dyalog Icon widget	Icons from FontAwesome, Syncfusion, and Google Advanced ways to use icons by combining/transforming them Icon-Finder for FontAwesome-Icons	Dyalog
Input	Dyalog input widget	Text, number, password, and range Input elements Date/time, email, URL, file, and submit Input elements SVG turtle graphics Input-control to handle file-uploads	Dyalog
InputFile	Dyalog input file widget	Input-control to handle file-uploads	Dyalog
InputGrid	Dyalog Widget - produce a 2-column (or 2-row) grid of labels and inputs	Enter first, last name and birthdate Various costumizations of grid-aligned inputs Simple mortgage calculation application	Dyalog
InputSubmit	Dyalog input submit button widget	Date/time, email, URL, file, and submit Input elements	Dyalog
List	Enhanced HTML ul	Lists of fruits and clickable links Nested (multi-level) lists	Dyalog
ListManager	Dyalog ListManager widget using Syncfusion ListBoxes	Move fruits between lists with streamlined interface	Dyalog
Markdown	Insert rendered Markdown content (using MarkAPL from APL Team/Kai Jaeger)	Use markdown to generate HTML	Dyalog
Ol	Enhanced HTML ol	Lists of fruits and clickable links Insert an ordered list of links based on an array of texts and links, and add callbacks on mouse movements	Dyalog
Panel	Panel widget	Display information, warnings, errors or success-message Demonstrates options for customization of Panels	Dyalog
RadioButtonGroup	Dyalog Radio Button Group widget	Create an entire group of radio buttons at once Special options for RadioButtonGroup John Conway's "Game of Life" (interactive)	Dyalog
Redirect			Dyalog
ResetButton	Dyalog Reset Button widget	Clear a form with a ResetButton Use a SubmitButton to POST a form, rather than use an AJAX callback	Dyalog
Script	Dyalog Script widget - embeds JavaScript in page	Insert inline JavaScript and make a button to run it An example of what "dimple" can do Insert reference to JavaScript from a file Use external code to style and touch-enable uppercase-lowercase alphabet pairing game	Dyalog
Select	Dyalog Enhanced HTML select	Pick fruits from a simple drop-down Select one or more fruits from a list. Insert a basic color picker with preset palettes	Dyalog
StackPanel	Dyalog control to emulate WPF StackPanel	Vertical and Horizontal "stacking" of content. Nested StackPanels provide flexible layout control. Classic Snakes and Ladders Game	Dyalog
Style	Dyalog Style widget - makes for easier programatic setting of CSS styles	Color headings red using an internal style element	Dyalog
StyleSheet	Dyalog StyleSheet widget - creates a link to a stylesheet	Color headings red using an external style sheet Vector graphics Tic Tac Toe game Use external code to style and touch-enable uppercase-lowercase alphabet pairing game	Dyalog
SubmitButton	Dyalog Submit Button widget	Use a SubmitButton to POST a form, rather than use an AJAX callback Clear a form with a ResetButton	Dyalog
Table	Improved html table - accepts matrix of data	Automatically display a matrix as a table John Conway's "Game of Life" (interactive) Simple version of the addictive "2048" sliding game Display tabular data with a bit of styling Text, number, password, and range Input elements Vector graphics Tic Tac Toe game	Dyalog
Tabs	Dyalog Tabs widget	Dyalog tabbed interface with four pseudo-language tabs Nested custom themed tabs with complex titles	Dyalog
Textarea	Dyalog widget to enhance the HTML textarea element		Dyalog
Timer	Dyalog JavaScript Timer	Signal timed events to the server Interactive control of multiple timers John Conway's "Game of Life" (interactive)	Dyalog
Ul	Enhanced HTML ul	Lists of fruits and clickable links Insert an unordered list of links based on an array of texts and links, and add callbacks on mouse movements	Dyalog
a	Hyperlink	Insert a hyperlink Set document base URI for relative links Mark the main navigation controls	Base HTML
abbr	Abbreviation	Display definition when hovering over an abbreviation	Base HTML
address	Contact information	Add contact information	Base HTML
area	Image map region	Image (in this case a map) with clickable areas	Base HTML
article	Independent section	Mark an independent section	Base HTML
aside	Auxiliary section	Insert a sidebar with related information	Base HTML
audio	Audio stream	Embed an audio stream Specify a list of alternate audio sources	Base HTML
b	Bold text	Make text bold	Base HTML
base	Document base URI	Set document base URI for relative links	Base HTML
bdi	Isolates a part of text that might be formatted in a different direction from other text outside it	Isolate text that should be displayed with a reading order that is different from the surrounding text	Base HTML
bdo	Bi-directional text override	Override the inherent directionality of text, i.e. the left-to-right or right-to-left reading order	Base HTML
blockquote	Long quotation	Insert a long quotation of text	Base HTML
body	Main content		Base HTML
br	Line break	Insert a line break	Base HTML
button	Push button control	Insert a push button	Base HTML
canvas	Bitmap canvas	Bitmap image canvas and draw a picture using JavaScript	Base HTML
caption	Table caption	Insert an interactive table with column-wise formatting	Base HTML
circle	Defines a circle	Use SVG to draw	Base HTML
cite	Citation	Inform where a text was quoted from	Base HTML
code	Code fragment	Embed a code fragment	Base HTML
col	Table column	Insert an interactive table with column-wise formatting	Base HTML
colgroup	Table column group	Insert an interactive table with column-wise formatting	Base HTML
d3			JavaScript
datalist	Predefined control values	Add a predefined list of options for later use in a control	Base HTML
dd	Description description	Create a list of descriptions for several terms	Base HTML
del	Deletion	Mark deleted text	Base HTML
details	Additional information	Add a summary with revealable details Make an expandable menu	Base HTML
dfn	Defining instance of a term	Reveal the definition of a term (here a function name) when the mouse hovers over the term	Base HTML
dialog	Conversation		Base HTML
dimple		Dimple data chart Dimple line plot chart Dimple line plot chart	JavaScript
div	Generic division	Add interactivity to a division An example of what "dimple" can do Create a context menu Dimple line plot chart	Base HTML
dl	Description list	Create a list of descriptions for several terms	Base HTML
dt	Description term	Create a list of descriptions for several terms	Base HTML
ejAccordion	Syncfusion Accordion widget	Syncfusion collapsing interface with four pseudo-language sections Accordion which calls back to the server on open/close	Syncfusion
ejAutocomplete			Syncfusion
ejBarcode	Syncfusion Barcode widget	Show information as barcodes	Syncfusion
ejBulletGraph	Syncfusion Bullet Graph widget	Ruler-style indicator of two related values Customized ruler-style indicator	Syncfusion
ejButton	Syncfusion Button widget	Illustrates a simple push-button Toggle availablility of one button with another	Syncfusion
ejCaptcha			Syncfusion
ejChart	Syncfusion Chart widget	Simple pie chart of workspace object sizes	Syncfusion
ejCheckBox	Syncfusion Checkbox widget	Checkbox with callback Callback interconnect two checkboxes	Syncfusion
ejCircularGauge	Syncfusion Circular Gauge widget	Speedometer style display Formatted circular indicator gauge with multiple pointers	Syncfusion
ejColorPicker	Syncfusion ColorPicker widget	Insert a basic color picker with preset palettes	Syncfusion
ejCurrencyTextbox			Syncfusion
ejDatePicker	Syncfusion DatePicker widget	Pick a date in yyyy/MM/dd format Insert mutually interdependant calendars	Syncfusion
ejDateTimePicker	Syncfusion DateTimePicker widget	Insert an interface to select date and time Let user select dates/times and display the difference	Syncfusion
ejDiagram			Syncfusion
ejDialog	Syncfusion Digital Gauge widget	Simple dialog box Interdependant multi-modal dialog boxes	Syncfusion
ejDigitalGauge	Syncfusion Digital Gauge widget	Digital (LCD-style) display Various digital segment (LCD style) displays	Syncfusion
ejDraggable	Syncfusion Draggable widget	Make an element draggable	Syncfusion
ejDropDownList	Syncfusion DropDownList widget		Syncfusion
ejDroppable	Syncfusion Droppable widget	Make elements accept draggable content	Syncfusion
ejGantt			Syncfusion
ejGrid		Read-only grid with formatting and alignment An editable grid	Syncfusion
ejLinearGauge	Syncfusion Linear Gauge widget	Linear gauge (thermometre style) Linear gauge with custom scale (Fahrenheit thermometre)	Syncfusion
ejListBox	Syncfusion ListBox widget	Listbox of options for selection Listbox of reorderable options for selection	Syncfusion
ejLocale			Syncfusion
ejMap			Syncfusion
ejMaskEdit			Syncfusion
ejMenu	Syncfusion Menu widget	Horizontal (application or navigation ) menu bar with background image Build a horizontal menu (bar) from external data Demonstrate the Syncfusion ejMenu widget with databinding	Syncfusion
ejNavigationDrawer			Syncfusion
ejNumericTextbox			Syncfusion
ejPercentageTextbox			Syncfusion
ejProgressBar			Syncfusion
ejRTE	Syncfusion Rich-Text Editor	Open Rich-Text Editor and retrieve document	Syncfusion
ejRadioButton			Syncfusion
ejRangeNavigator			Syncfusion
ejRating	Syncfusion Rating widget	Rating	Syncfusion
ejResizable			Syncfusion
ejRotator			Syncfusion
ejSchedule			Syncfusion
ejScroller			Syncfusion
ejSlider	Syncfusion Slider widget	Single and Ranged Sliders	Syncfusion
ejSplitButton			Syncfusion
ejSplitter			Syncfusion
ejSpreadsheet			Syncfusion
ejSymbolPalette			Syncfusion
ejTab	Syncfusion Tab widget	Syncfusion tabbed interface with four pseudo-language tabs Tabbed interface with tabs on the left	Syncfusion
ejTagCloud	Syncfusion TagCloud widget	Display a tag cloud of object sizes in MiServer's workspace	Syncfusion
ejTextBox		Validate numbers, currency and percentages	Syncfusion
ejTile			Syncfusion
ejTimePicker			Syncfusion
ejToggleButton	Syncfusion ToggleButton widget	Button with two states	Syncfusion
ejToolbar			Syncfusion
ejTreeGrid	Syncfusion TreeGrid widget Formats data in a grid with tree-based collapsibility	View and collapse a structured spreadsheet	Syncfusion
ejTreeMap			Syncfusion
ejTreeView	Syncfusion TreeView widget	Build a simple tree with a node selection callback TreeView with checkable nodes and ability to add and delete nodes	Syncfusion
ejUploadbox			Syncfusion
ejWaitingPopup	Syncfusion WaitingPopup widget	Insert the three basic forms of toggleable "please wait" indicator Insert styled toggleable pop-up with arbitrary web content	Syncfusion
ellipse	Defines an ellipse	Use SVG to draw	Base HTML
em	Stress emphasis	Emphasize text	Base HTML
embed	Embedded application	Embed an external application, i.e. a plug-in	Base HTML
fieldset	Form control group	Group form controls Arrange many interactive elements together	Base HTML
figcaption	Defines a caption for a figure element	Insert a figure with a caption	Base HTML
figure	Figure with caption	Insert a figure with a caption	Base HTML
footer	Section footer	Section footer following run of paragraphs	Base HTML
form	Form	Arrange many interactive elements together Include text in controls' clickable area Insert an expression's result value Allow clicking somewhere else to interact with controls	Base HTML
h1	Heading level 1	Insert all possible levels of header	Base HTML
h2	Heading level 2	Insert all possible levels of header	Base HTML
h3	Heading level 3	Insert all possible levels of header	Base HTML
h4	Heading level 4	Insert all possible levels of header	Base HTML
h5	Heading level 5	Insert all possible levels of header	Base HTML
h6	Heading level 6	Insert all possible levels of header	Base HTML
head	Document head	Add a class during callback Remove a class during callback Interchange classes during callback Toggle a class during callback Toggle, show, and hide an element during callback	Base HTML
header	Section header	Insert a header with introductory content	Base HTML
hr	Separator	Draw a horizontal dividing line	Base HTML
html	Document root		Base HTML
i	Italic text	Italicize text	Base HTML
iframe	Inline frame	Embed another webpage	Base HTML
img	Image	Insert a figure with a caption Image (in this case a map) with clickable areas Whack-A-Duck: Shrinking button that jumps away progressively faster when you click it	Base HTML
input	Form control	Add a predefined list of options for later use in a control Arrange many interactive elements together Insert an expression's result value	Base HTML
ins	Insertion	Mark inserted text	Base HTML
jBox	jBox widget	jBox provides several style of popups simple Confirmation-Dialogs with limited interaction Advanced jBox-Tooltips Using jBox in callback-functions to display notices or modal popups jBox-confirmations triggered from APL-Callback (tight integration of APL and JS-Callbacks) Confirmation Dialog on PageLoad Image-galleries with jBox	JavaScript
jqAccordion	jQueryUI Accordion widget	jQuery UI collapsing interface with four pseudo-language sections	jQueryUI
jqAddClass	jQueryUI AddClass effect	Add a class during callback Use external code to style and touch-enable uppercase-lowercase alphabet pairing game	jQueryUI
jqAutocomplete			jQueryUI
jqButton	jQueryUI Sortable widget/interaction		jQueryUI
jqButtonset	jQueryUI Sortable widget/interaction	Grouped sets of buttons	jQueryUI
jqDatePicker			jQueryUI
jqDialog			jQueryUI
jqDraggable	jQueryUI Draggable interaction	Take a div for a drag Use external code to style and touch-enable uppercase-lowercase alphabet pairing game	jQueryUI
jqDroppable	jQueryUI Droppable interaction	Make elements accept draggable content Use external code to style and touch-enable uppercase-lowercase alphabet pairing game	jQueryUI
jqHide	jQueryUI Hide effect	Toggle, show, and hide an element during callback	jQueryUI
jqMenu	jQueryUI Menu widget	Insert a vertical (drop-down or context) menu Build a vertical (drop-down) menu from external data	jQueryUI
jqProgressbar			jQueryUI
jqRemoveClass	jQueryUI RemoveClass effect	Remove a class during callback	jQueryUI
jqResizable	jQueryUI Resizable interaction	Resize a Div	jQueryUI
jqSelectable			jQueryUI
jqShow	jQueryUI Show effect	Toggle, show, and hide an element during callback	jQueryUI
jqSlider	jQueryUI Slider widget	Single and Ranged Sliders Using one slider to set the bounds of another	jQueryUI
jqSortable	jQueryUI Sortable widget/interaction	List of items that can to be dragged to rearrange in a new order Grid of reorderable boxes	jQueryUI
jqSpinner	jQueryUI Spinner widget	Select and preselect values with spinners	jQueryUI
jqSwitchClass	jQueryUI SwitchClass effect	Interchange classes during callback	jQueryUI
jqTabs	jQueryUI Tabs widget	jQuery UI tabbed interface with four pseudo-language tabs	jQueryUI
jqToggle	jQueryUI Toggle effect	Toggle, show, and hide an element during callback	jQueryUI
jqToggleClass	jQueryUI ToggleClass effect	Toggle a class during callback	jQueryUI
jqTooltip			jQueryUI
kbd	User input	Indicate user input	Base HTML
keygen	Defines a key-pair generator field (for forms)	Arrange many interactive elements together	Base HTML
label	Form control label	Include text in controls' clickable area Allow clicking somewhere else to interact with controls Enter first and last name in a FieldSet (reacts to each keystroke) Collect input and echo it on a button press Arrange many interactive elements together	Base HTML
legend	Explanatory title or caption	Group form controls Arrange many interactive elements together	Base HTML
li	List item	Add ordered and unordered lists Add nested lists of varying types	Base HTML
line	Defines a line segment that starts at one point and ends at another	SVG turtle graphics Use SVG to draw	Base HTML
link	Link to resources	Include an external resource; here an icon Embed raw image data in the page itself	Base HTML
main	Specifies the main content of a document		Base HTML
map	Client-side image map	Image (in this case a map) with clickable areas	Base HTML
mark	Marked or highlighted text	Highlight text	Base HTML
menu	Command menu	Create a context menu	Base HTML
menuitem	Defines a command/menu item that the user can invoke from a popup menu	Create a context menu	Base HTML
meta	Metadata		Base HTML
meter	Scalar measurement	Display a gauge for measurement within a given range	Base HTML
nav	Navigation	Mark the main navigation controls	Base HTML
noscript	No-script support	Add alternative content for when JavaScript is turned off or not supported	Base HTML
object	Generic embedded resource	Embed a PDF file Define the parameters for a en embedded object	Base HTML
ol	Ordered list	Add ordered and unordered lists Add nested lists of varying types	Base HTML
optgroup	Option group	Arrange many interactive elements together	Base HTML
option	Selection choice	Add a predefined list of options for later use in a control Arrange many interactive elements together	Base HTML
output	Output control	Insert an expression's result value	Base HTML
p	Paragraph	Three simple paragraphs	Base HTML
param	Plugin parameter	Define the parameters for a en embedded object	Base HTML
path	Defines a generic shape	Use SVG to draw	Base HTML
polygon	Defines a closed shape consisting of a set of connected straight line segments	Use SVG to draw	Base HTML
polyline	Defines a set of connected straight line segments	Use SVG to draw	Base HTML
pre	Preformatted text	Block of text preserving linebreaks and multiple spaces	Base HTML
progress	Progress of a task	Graphically display time using progress bars	Base HTML
q	Inline quotation	Mark text as a quotation inside the containing text	Base HTML
rect	Defines a rectangle	Use SVG to draw	Base HTML
rp	Ruby parenthesis	Add nested ruby text and an alternative for non-supporting browsers	Base HTML
rt	Ruby text	Add pronunciation and explanation as ruby text (5.5pt) over the line Add nested ruby text and an alternative for non-supporting browsers	Base HTML
ruby	Ruby annotation	Add pronunciation and explanation as ruby text (5.5pt) over the line Add nested ruby text and an alternative for non-supporting browsers	Base HTML
s	Defines text that is no longer correct	Strike-through text	Base HTML
samp	Sample output	Indicate computer output	Base HTML
script	Linked or embedded script	Embed JavaScript Bitmap image canvas and draw a picture using JavaScript Add alternative content for when JavaScript is turned off or not supported Whack-A-Duck: Shrinking button that jumps away progressively faster when you click it	Base HTML
section	Document section	Define a section in a document	Base HTML
select	Selection control	Arrange many interactive elements together	Base HTML
small	Small print	Make text smaller	Base HTML
source	Media resource	Specify a list of alternate audio sources Specify a list of alternate video sources	Base HTML
span	Generic inline container	Delimit inline content for later manipulation Children's educative application for Yiddish alphabet and keyboard	Base HTML
strong	Strong importance	Mark important text	Base HTML
style	Embedded stylesheet	Embed a style sheet Classic Snakes and Ladders Game Whack-A-Duck: Shrinking button that jumps away progressively faster when you click it	Base HTML
sub	Subscript	Make text subscript	Base HTML
summary	Defines a visible heading for a details element	Add a summary with revealable details Make an expandable menu	Base HTML
sup	Superscript	Make text superscript	Base HTML
svg	Defines a container for SVG graphics	Use SVG to draw Classic Snakes and Ladders Game Vector graphics Tic Tac Toe game SVG turtle graphics	Base HTML
table	Table	Manually display a matrix as a table Insert an interactive table with column-wise formatting	Base HTML
tbody	Table body	Insert an interactive table with column-wise formatting	Base HTML
td	Table cell	Manually display a matrix as a table Insert an interactive table with column-wise formatting	Base HTML
textarea	Multi-line text control	Insert a multi-line text control Arrange many interactive elements together	Base HTML
tfoot	Table footer	Insert an interactive table with column-wise formatting	Base HTML
th	Table header cell	Insert an interactive table with column-wise formatting	Base HTML
thead	Table head	Insert an interactive table with column-wise formatting	Base HTML
time	Date and/or time	Indicate a time	Base HTML
title	Document title	Set the document title in the browser's tab or title bar	Base HTML
tr	Table row	Manually display a matrix as a table Insert an interactive table with column-wise formatting	Base HTML
track	Defines text tracks for media elements	Specify subtitles (closed captions)	Base HTML
u	Defines text that should be stylistically different from normal text	Underline text	Base HTML
ul	Unordered list	Add ordered and unordered lists Add nested lists of varying types	Base HTML
var	Variable	Indicate a variable	Base HTML
video	Video or movie	Embed a video Specify a list of alternate video sources Specify subtitles (closed captions)	Base HTML
wbr	Defines a possible line-break	Indicate where to break a work if it must be broken	Base HTML

Category	Subject
General	Creating Content
General	Creating a MiSite
General	Creating a Widget
General	Providing RESTful Web Services
General	Testing with Selenium
References	Event Handling
References	Function Reference
References	Terminology
Install and Config	Configuration
Install and Config	Installation
Techniques	Various forms of callbacks
Techniques	Use jQuery UI Position to place one element relative to another
Techniques	Callback with jQuery UI Position JavaScript snippets to reposition one element relative to another
Techniques	Submit queries an SQL database using SQAPL
Techniques	Insert a chart using SharpPlot
Techniques	The two Handler targets
Techniques	How to use WrapFollowing
Techniques	Simple callback example using On and APLJax
Techniques	Demonstrates how to use locale in Syncfusion controls that support it
Techniques	Demonstration of tight client-server loopback


:Class index : MiPageSample ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ 
⍝ ┌─────────────────────────────────────────────────────────────────────────────────────────────┐ ⍝ 
⍝ │ This is the home page of the MiServer Sample Site, MS3, accessible at miserver.dyalog.com   │ ⍝ 
⍝ └─────────────────────────────────────────────────────────────────────────────────────────────┘ ⍝ 
⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ ⍝ 
 
    :Include #.MS3SiteUtils 
 
    ∇ Make 
      :Access public 
      :Implements Constructor 
      Cacheable←1 
    ∇ 
 
    ∇ Compose;cols;tabs;rows;div;dt 
      :Access Public 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      (tabs←'bigtabs'Add _.Tabs).Theme←'FF8C00' 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Introduction'Over'getting started/recommendations' 
      cols←1 0⍴⍬ 
      cols,←'about'New _.div(Read'IndexData/intro.txt') 
      cols,←'slideshow'New _.div(Shuffle Read'IndexData/slideshow.txt') 
      cols,←'reading'New _.List(ReadingTree Read'IndexData/reading.txt') 
      tabs.Sections,←'intro'New _.Table cols 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Tutorial'Over'visual approach to/common tasks' 
      div←'tut'New _.div 
      div.Add _.p'In the tabs below, you will find categorized examples of webpage content. Click any element for more information.' 
      'Tabs'div.Add _.Tabs(↓⍉↑Elements Formatting Positioning Embedding Interaction Windows) 
      'info'div.Add _.div 
      tabs.Sections,←div 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Samples'Over'pages and mini-apps/each uses just a few controls' 
      cols←⍬ 
      cols,←⊂(⊂'Task demonstrated'),C.tasks 
      cols,←⊂(⊂'Type'),C.type 
      cols,←⊂(⊂'Main controls used'Over'documentation links'),C.used 
      div←'samples'New _.div 
      div.Add _.div _.A'Browse Examples Directory' '/Examples/' 
      dt←div.Add'eg' '.display'New _.DataTable(⍉↑cols) 
      'yadcf.Filters[1].(select_type column_number)'dt.Set'select' 1 
      'lengthMenu'dt.Set(10 25 50 ¯1)(10 25 50 'All')  ⍝ also allow "All" 
      tabs.Sections,←div 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Controls'Over'list of all supported controls/links to samples using them' 
      cols←⍬ 
      cols,←⊂('Control'Over'documentation link'),C.doclink 
      cols,←⊂(⊂'Description'),C.descr 
      cols,←⊂(⊂'Relevant samples'),C.reldocs 
      cols,←⊂(⊂'Library'),C.cats 
      tabs.Sections,←'ctrl' '.display'FilterTable ¯1 0↓⍉↑cols 
      
     ⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝⍝ 
      tabs.Titles,←'Reference'Over'general information/technique descriptions' 
      rows←⍬ 
      rows,←'pdf'FormatList'Documentation' 
      rows,←FormatList'Examples/Techniques' 
      tabs.Sections,←'doc' '.display'New _.DataTable('Category' 'Subject'⍪↑rows) 
    ∇ 
 
:EndClass

Controls used on this page: Dyalog: A, List, Table, Tabs JavaScript: DataTable Base HTML: div, p

Dyalog MiServer 3 Sample Site

Slider