Depth Chart Demo


Depth Chart Demo

In this demo, we are integrating HTML5 and FileMaker to emulate a draggable “Depth Chart” to manage starting positions of football players.

We used a FMP URL to run a script each time the user moves a player up or down the list that grabs the record ids of the players, their order and creates an array that it passes as a variable to the FileMaker file. Then a script in FileMaker does all the hard work with the parsing.

We ‘localized’ the javascript, API Code and javascript function and reference each within the HTML calc we use in the web viewer. Then we set all the js and css values to local memory upon login to improve performance.

This can run on a network in FileMaker Pro or standalone WITHOUT web access on FileMaker Go.

Here is the source HTML I used:

<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>jQuery UI Draggable + Sortable</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css” />
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script>
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script>
<link rel=”stylesheet” href=”/resources/demos/style.css” />
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
$( “#sortable” ).sortable({
revert: true
});
$( “#draggable” ).draggable({
connectToSortable: “#sortable”,
helper: “clone”,
revert: “invalid”
});
$( “ul, li” ).disableSelection();
});
</script>
</head>
<body>

<ul>
<li id=”draggable” class=”ui-state-highlight”>Drag me down</li>
</ul>

<ul id=”sortable”>
<li class=”ui-state-default”>Item 1</li>
<li class=”ui-state-default”>Item 2</li>
<li class=”ui-state-default”>Item 3</li>
<li class=”ui-state-default”>Item 4</li>
<li class=”ui-state-default”>Item 5</li>
</ul>

</body>
</html>

Print Friendly