The Sortable BlackBox was first created to allow users to re-order parameter records in the BlackBox Builder.
- DataFieldName : the name of the FileMaker field containing the data to be displayed for sorting, in "TableOccurrence::FieldName" format. The data stored in this field may be simple values, or it may be HTML code designed to give a certain rendered appearance in the sorter.
- SortFieldName : the name of a field that will be used to adjust the order of the records. After each time the user moves a record to a new position, this field will be re-serialised to set the desired order. Note that the new values will start from 1, 2, ... etc., and only records that were displayed in the sorter will be updated. Therefore multiple records in the table may have a sort value of (for example) "1", and so the sort value will only make sense in the context of the correct found/related set of records.
- BGColor : optional parameter to specify the background colour of the web viewer. Use any HTML-compatible colour specification, .e.g. "green" or "#f2f3f4"
- Height : optional parameter to set the height of each sortable element. Value should be a number, which will be interpreted as a height in pixels.
- AdvancedOptions : optional parameter that allows advanced usage, e.g. specifying CSS overrides and special jQuery UI options. See below for further info.
Advanced Options
Advanced options can be passed to the BlackBox in the final optional parameter. Generally speaking, the use of advanced options requires a reaonable knowledge of CSS, JavaScript, and probably the behaviour of the jQuery UI Sortable interaction module. If this is not you, stop reading now!
The value of the AdvancedOptions parameter must be a JSON-formatted object (see? told you!) containing any or all of the advanced parameters listed below. There are currently two advanced options: a CSS block, and optional parameters to the jQuery sortable method itself.
Note that in order to use the AdvancedOptions parameter, the BGColor and Height positional parameters must be supplied. They can be given blank values, as in the examples below. If they do have values, these will be applied after the Advanced Options have been taken into account. e.g. if you specify a BGColor it will be applied after any CSS overrides, and may supercede a background-color supplied that way.
AdvancedOption: CSS
A block of CSS can be passed in order to extend and/or override the default CSS for the sorter (see below for the default CSS styles).
Example: specify a different background colour for the sorting boxes by overriding the default rule.
Sortable( "Parameters::Name" ; "Parameters::sort_order" ; "" ; "" ; "{ css : '.ui-sortable li { background-color: lightblue; }' }" )
AdvancedOption: sortable_options
The jQuery UI sortable() method supports a number of optional parameters, some of which may be useful in advanced applications. These options can be supplied through the Sortable BlackBox's Advanced Options parameter by passing them as a quoted string named sortable_options.
Example: by default the Sortable BlackBox restricts dragging to up and down by using the jQuery UI Sortable option axis: 'y'. You can override this by passing that option yourself. Specify 'x' for left and right, or false to allow dragging in both directions (note that 'x' or 'y' should be quoted, but false should not: it's a JavaScript boolean value.)
Sortable( "Parameters::Name" ; "Parameters::sort_order" ; "" ; "" ; "{ sortable_options : 'axis : false' }" )
Example with both css and sortable_options specified:
Sortable( "Parameters::Name" ; "Parameters::sort_order" ; "" ; "" ; "{ css : '.ui-sortable li { background-color: lightblue; }', sortable_options : 'axis : false' }" )
A complex example: CSS and sortable_options are provided which cause the Sortable BlackBox to display a 2-dimensional sorter with square boxes.
(We'll come back to this one once it's working!)
Note: technically you could also use the AdvancedOption BlackBox parameter to pass event and method parameters through to the jQuery UI Sortable interaction, but this is not recommended.
Default CSS
The default CSS used in the sortable BlackBox is shown below; this will help you decide what CSS settings to use if you are developing your own.
Note the use of selective top and bottom borders in the various box, helper, and placeholder styles. These settings reproduce the appearance of a default FileMaker portal with a single-pixel line between rows.
html, body, ul, li { border: 0; margin: 0; padding: 0; }
html, body {
overflow: hidden;
background: white;
}
#sortable_list {
width: 100%; height: 100%;
position: absolute;
overflow: auto;
border: 0;
}
/* Default styles, which reproduce the appearance of a FileMaker portal with default font settings. */
.ui-sortable li {
list-style: none;
line-height: 14px;
padding-top: 0px;
padding-bottom: 2px;
padding-left: 1px;
border-bottom: 1px solid black;
font-family: Helvetica; font-size: 11px; color: black;
background-color: white;
}
.ui-sortable li.ui-sortable-helper {
border-top: 1px solid black;
border-bottom: 1px solid black;
background: rgba(255,255,255,.9);
color: rgba(68,68,68,.5);
}
.ui-sortable li.ui-sortable-placeholder {
border-bottom: 1px solid black;
height: 14px;
background-color: #eee;
}
Reactor Implementation Guide
Comments