Since version 1.2 the Vortex handles HTML Markup replacement, which makes it easier to use ShowLists and specific field types in your custom scripts. The replacement is handled by the javascript class SLTagParser and is executed in the html footer on loading. To run the parser in your own code just run this snippet of code, replacing the target document element with the element you wish to traverse.

  new SLTagParser().parse( document );

All <table> elements with the CSS class vxShowList will be replaced with a ShowList.
TODO: Implement functionality for static tables not connected to the Vortex.

The ShowList is configured via attributes prefixed with data-config- and all the parameters from ShowListConfig.java can be set using theese attributes.
The data-idtable attribute contains the UUID of the table in the Vortex to connect the ShowList to and is mandatory.

This code:

    <table style="width: 800px; height: 500px;overflow: hidden;" id="myShowList" class="vxShowList" 
                               data-idtable="3ada916a-0f98-11e1-882b-000c291c6079" 
				data-config-searchstring="Testar" 
				data-config-edit="1" 
				data-config-allow_new="1" 
				data-config-hide_counters="1" 
				data-config-hide_functions="1"
				data-config-hide_filterview="1"
				data-config-hide_scripts="1"
				data-config-hide_fetchmore="1"></table>

produces an editable ShowList without counters, functions, filterview, scripts or fetchmore bar.

All <input> elements with the CSS class vxShowList and a valid data-type attribute will be replaced with the suitable ShowList input field.

Creates a checkboxfield. The value attribute controls wether it is checked or not.

Creates a ColorStatusField. The value attribute gives the color and text of the field on the form [color];[value]

  <input name='test' class='vxShowList' data-type='ColorstatusField' value='#FF0000;This is a red ColorStatusField' />

Creates a DropdownField. The value attribute controls which element is the default one.

The options in the dropdown are defined in the data-strings attribute on the form “[id]=[value],[id]=[value],…”

  <input name='test' class='vxShowList' data-type='DropdownField' value='4' data-strings="1=Test,2=Test 2,3=My test,4=Chosen one,5=Later" />

Creates a FileField for file input.

Creates a IntField input field which only accepts numeric data. The value attribute contains the initial value.

Creates a PasswordField, masking the input. The value attribute contains the initial value.

Not yet implemented.

Creates a TextField for text input. The value attribute contains the initial value.

Creates a TextareaField for text input. The value attribute contains the initual value and the data-rows attribute controls the number of rows shown in the Textarea.