Team Tree Demo


Team Tree Demo

In this demo, we are integrating HTML5, JavaScript, CSS and FileMaker to emulate a sweet interactive “Team Tree” to view every football player in the NFL and be able to navigate to a Player Dashboard in a cool way.

We used a FMP URL to run a script each time the user selects a player by grabbing the record ids of the player and it passes as a variable to the FileMaker file which runs a script to find the player dashboard.

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 demo also shows how we can run the entire application on an iPAD that does NOT need to be connected to the internet.

I also talk about using JSON as the way to wrap my data arrays. Its a more lightweight way to do the same exact data arrays as we have discussed in all our demos.

Here is a snippet of the JSON I used:

{“id”: “27”,
“name”: “Cardinals”,
“data”: {
“band”: “NFL 2013”,
“relation”: “member of band”},
“children”: [{“id”: “2428”, “name”: “Carson Palmer QB”,”data”: {“band”: “Cardinals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=2428″},”children”: []},{“id”: “5571”, “name”: “Larry Fitzgerald WR”,”data”: {“band”: “Cardinals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=5571″},”children”: []},{“id”: “3931”, “name”: “Rashard Mendenhall RB”,”data”: {“band”: “Cardinals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=3931″},”children”: []},{“id”: “9323”, “name”: “Beanie Wells RB”,”data”: {“band”: “Cardinals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=9323″},”children”: []},{“id”: “13406”, “name”: “Rob Housler TE”,”data”: {“band”: “Cardinals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=13406″},”children”: []},{“id”: “14478”, “name”: “Michael Floyd WR”,”data”: {“band”: “Cardinals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=14478″},”children”: []}]},
{“id”: “12”,
“name”: “Falcons”,
“data”: {
“band”: “NFL 2013”,
“relation”: “member of band”},
“children”: [{“id”: “9108”, “name”: “Tony Gonzalez TE”,”data”: {“band”: “Falcons”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=9108″},”children”: []},{“id”: “1652”, “name”: “Steven Jackson RB”,”data”: {“band”: “Falcons”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=1652″},”children”: []},{“id”: “13291”, “name”: “Julio Jones WR”,”data”: {“band”: “Falcons”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=13291″},”children”: []},{“id”: “732”, “name”: “Matt Ryan QB”,”data”: {“band”: “Falcons”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=732″},”children”: []},{“id”: “204”, “name”: “Roddy White WR”,”data”: {“band”: “Falcons”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=204″},”children”: []}]},
{“id”: “10”,
“name”: “Ravens”,
“data”: {
“band”: “NFL 2013”,
“relation”: “member of band”},
“children”: [{“id”: “12153”, “name”: “Ed Dickson TE”,”data”: {“band”: “Ravens”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=12153″},”children”: []},{“id”: “611”, “name”: “Joe Flacco QB”,”data”: {“band”: “Ravens”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=611″},”children”: []},{“id”: “5100”, “name”: “Jacoby Jones WR”,”data”: {“band”: “Ravens”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=5100″},”children”: []},{“id”: “11017”, “name”: “Dennis Pitta TE”,”data”: {“band”: “Ravens”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=11017″},”children”: []},{“id”: “547”, “name”: “Ray Rice RB”,”data”: {“band”: “Ravens”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=547″},”children”: []},{“id”: “12830”, “name”: “Torrey Smith WR”,”data”: {“band”: “Ravens”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=12830″},”children”: []}]},
{“id”: “32”,
“name”: “Bills”,
“data”: {
“band”: “NFL 2013”,
“relation”: “member of band”},
“children”: [{“id”: “12548”, “name”: “Scott Chandler TE”,”data”: {“band”: “Bills”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=12548″},”children”: []},{“id”: “8283”, “name”: “Ryan Fitzpatrick QB”,”data”: {“band”: “Bills”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=8283″},”children”: []},{“id”: “2950”, “name”: “Steve Johnson WR”,”data”: {“band”: “Bills”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=2950″},”children”: []},{“id”: “10944”, “name”: “Donald Jones WR”,”data”: {“band”: “Bills”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=10944″},”children”: []},{“id”: “10949”, “name”: “C.J Spiller RB”,”data”: {“band”: “Bills”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=10949″},”children”: []}]},
{“id”: “3”,
“name”: “Panthers”,
“data”: {
“band”: “NFL 2013”,
“relation”: “member of band”},
“children”: []},
{“id”: “26”,
“name”: “Bears”,
“data”: {
“band”: “NFL 2013”,
“relation”: “member of band”},
“children”: []},
{“id”: “7”,
“name”: “Bengals”,
“data”: {
“band”: “NFL 2013”,
“relation”: “member of band”},
“children”: [{“id”: “12841”, “name”: “Andy Dalton QB”,”data”: {“band”: “Bengals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=12841″},”children”: []},{“id”: “12845”, “name”: “A.J Green WR”,”data”: {“band”: “Bengals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=12845″},”children”: []},{“id”: “8455”, “name”: “Bernard Scott RB”,”data”: {“band”: “Bengals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=8455″},”children”: []},{“id”: “12847”, “name”: “Andrew Hawkins WR”,”data”: {“band”: “Bengals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=12847″},”children”: []},{“id”: “13878”, “name”: “Mohamed Sanu WR”,”data”: {“band”: “Bengals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=13878″},”children”: []},{“id”: “0000W”, “name”: “Giovani Bernard RB”,”data”: {“band”: “Bengals”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=0000W”},”children”: []}]},
{“id”: “13”,
“name”: “Browns”,
“data”: {
“band”: “NFL 2013”,
“relation”: “member of band”},
“children”: [{“id”: “12874”, “name”: “Greg Little WR”,”data”: {“band”: “Browns”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=12874″},”children”: []},{“id”: “11047”, “name”: “Colt McCoy QB”,”data”: {“band”: “Browns”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=11047″},”children”: []},{“id”: “12861”, “name”: “Jordan Cameron TE”,”data”: {“band”: “Browns”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=12861″},”children”: []},{“id”: “13902”, “name”: “Trent Richardson RB”,”data”: {“band”: “Browns”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=13902″},”children”: []},{“id”: “14587”, “name”: “Josh Gordon WR”,”data”: {“band”: “Browns”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=14587″},”children”: []}]},
{“id”: “2”,
“name”: “Cowboys”,
“data”: {
“band”: “NFL 2013”,
“relation”: “member of band”},
“children”: [{“id”: “3330”, “name”: “Miles Austin WR”,”data”: {“band”: “Cowboys”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=3330″},”children”: []},{“id”: “11270”, “name”: “Dez Bryant WR”,”data”: {“band”: “Cowboys”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=11270″},”children”: []},{“id”: “13124”, “name”: “DeMarco Murray RB”,”data”: {“band”: “Cowboys”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=13124″},”children”: []},{“id”: “3867”, “name”: “Tony Romo QB”,”data”: {“band”: “Cowboys”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=3867″},”children”: []},{“id”: “722”, “name”: “Jason Witten TE”,”data”: {“band”: “Cowboys”, “relation”:”member of band”, “url”:”fmp://$/TeamTreeiPad?script=fmpPlayerDashboard&$playerid=722″},”children”: []}]},

Check it out, we hope you like it.

Print Friendly