Team Builder App

Overall Description

The Team Builder App allows you to build out an NFL roster or depth chart for your favorite team. Simply choose your team, add and delete players, and download the graphic to share with family, friends, league-mates, whatever.

When you open the app, the names in the select boxes default to the roster that is shown on ESPN’s Team Depth Chart page (Here is Kansas City’s ESPN page). You can accept those names as is, or can add more names to the list by selecting names from the drop-down box for each position. Any names you add are automatically added to the graphic.

You can also delete names by selecting them and hitting the backspace (delete on Mac’s) key. Any name you delete will show up at the top of the drop-down list so you can easily add it back if you wanted to simply rearrange the names, or if you mistakenly deleted a name.

If you can’t find the name you’re looking for in the drop-down boxes, at the bottom of the left hand sidebar is a pink box where you can manually add players. Just type in the name you want, choose the position they play from the drop-down box, and click the “Add New Player” button. Your player is automatically added to both the select box for that position and to the graphic.

The app opens to the Roster tab on Offense, and on the sidebar, you can select “Defense” or “Specialists” to go to those sidebars and change those positions to what you want it to be. Add and delete all the players you want for all three sides of your football team. The graphic shows you how many players you have for each position, and totals for offense, defense, and specialists. At the top of the graphic, the subtitle tells you how many players total you have selected.

Once you have created the team roster you want, you can download the image as a .png by clicking the “Download Roster” button at the very bottom of the sidebar, under the “Add New Player’s” box.

To go to the Depth Chart page, simply click the “Depth Chart” tab at the top middle of the screen, next to the “Roster” tab. There, you will see players in a graphic showing each specific position, generally as they look on a football field. Defensive players have red labels, and offensive players have blue labels. The names are ordered within each position based on the order in which they are shown in the selection box, so delete and add players to get your preferred depth chart. Remember, any players you delete show up at the top of the list, so it’s very easy to add them back to the selection box in the order you desire.

Create your offense depth chart, then go to the defense side by selecting the “Defense” button, same as for the Roster chart. The app will default to whatever defense style ESPN has listed for your team, but you can manually override that by using the “Defense Style” radio buttons. Just click the other button and everything will update. Then fill out the players in the position selection boxes, and create your depth chart! The subtitle to this graphic shows the number of players on offense and defense, plus the total players selected.

As a note, the ESPN depth charts do not label wide receivers as X, Y, and slot receivers. They simply list “WR” three times in a row. Given the lack of a better way to identify which receivers play each actual position, I simply assigned WR row 1 to X receivers, row 2 to Y receivers, and row 3 to slot receivers. That is unlikely to be entirely accurate for your team. Please place all of the blame on ESPN, and if you work for ESPN, please update your roster pages with accurate positional designations.

Also note that the depth chart graphic only has offense and defense, no specialists. Almost no team carries more than one punter, kicker and long-snapper, so the depth chart is obvious for them. It was also difficult to find a place to add them to the graphic.

Finally, fullbacks are listed as running backs. I may change this in the future, but for now I’m leaving this as is.