Reactor Implementation Guide
Sortable( DataFieldName ; SortFieldName {; BGColor ; Height ; AdvancedOptions } )
Sortable( "Parameters::Name" ; "Parameters::sort_order" ; "" ; "" ; "{ css : '.ui-sortable li { background-color: lightblue; }' }" )
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 (sourced from a FileMaker field) and sortable_options are used to present a 2-dimensional sorter with rectangular grey boxes.
Sortable( "Parameters::Name" ; "Parameters::sort_order" ; "" ; "" ; "{ css : '" & Settings::function_css & "', sortable_options: 'axis: false' }" )
The field Settings::function_css contains the CSS below. One very important feature is the use of float: left; to cause the sorter to work in two dimensions instead of just up and down.
.ui-sortable li {
list-style-type: none;
float: left;
border: none;
background-color: lightgray;
margin: 3px;
padding: 2px;
width: 40px;
}
.ui-sortable li.ui-sortable-helper {
border: none;
background-color: lightgray;
}
.ui-sortable li.ui-sortable-placeholder {
border: none;
width: 40px;
background-color: white;
}
The HTML element that becomes the sorter is a <ul> element. before_list_html and after_list_html allow you to place snippets before and after this element. start_of_list_html and end_of_list_html allow you to insert HTML elements that become, respectively, the first element inside the <ul>, and the last element before it closes.
NOTE: The visual layout behaviour of after_list_html is somewhat unpredicatble, probably due to the way it interacts with DOM manipulations performed by the jQuery UI Sortable interaction. Probably best to be avoided.
Example: the BlackBox Builder uses a Sortable BlackBox that is customised in a number of ways for re-ordering function parameters. To display the name of the function (sourced from a FileMaker field), and also parentheses at either end of the parameter sorter, the following AdvancedOptions are used:
"start_of_list_html: '<span style=\\\"float: left\\\">" & Functions::canonical_name & "(</span>', " &
"end_of_list_html: '<span style=\\\"float: left\\\">)</span>', " &
Note that these are <span> elements, not <li>. A sortable_option AdvancedOption ( items: 'li' ) is also used to specify that only <li> elements are draggable, so these markers keep their place at the start and end of the parameter list.
Note: technically you can also use the AdvancedOption BlackBox parameter to pass event and method parameters through to the jQuery UI Sortable interaction, although this is not recommended.
An example of this is the BackBox Builder function parameter sorter: it uses the jQuery UI Sortable interaction's update method to check the placement of optional parmeters after each re-ordering operation, and when it is done it calls the Sortable BlackBox's built-in update function, UpdateAfterSorting(), to finish the job of updating the FileMaker record data.
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;
white-space:nowrap;
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;
}
Comments