Using Twitter Bootstrap to Create a Mobile Schedule for a Youth Sports League

This baseball season I am the coordinator for my son’s second grade league.  I decided to create an app for all the parents that would include field information, schedules and coaches contact information.  Using Twitter Bootstrap makes this really easy because most of the components are responsive and will work with any size screen.

If you take a look at the demo application I have setup you can see that while it works best on a mobile phone device, it can be viewed just as clearly in a large screen web browser.

The magic in the schedule and teams pages is that I used a repeat control bound to a Notes view and then wrote a SSJS function to return HTML with the bootstrap tags to achieve the desired look.   Simple and effective.

Repeat Control Code

<div class="panel-body">
<xp:repeat id="repeat1" value="#{view1}" var="row" rows="300">
<xp:text escape="false" id="computedField1"
value="#{javascript:return buildScheduleTable()}">
</xp:text>
</xp:repeat>
</div>

SSJS Code

function buildScheduleTable() {
var tHTML = "";
tHTML += "
<div class=\"panel panel-primary\">
<table class=\"table\">"
tHTML += "
<tbody>"
tHTML += "
<tr>"
tHTML += "
<div class=\"panel-heading\"><b>"
tHTML += row.getColumnValue("event_dt")
tHTML += "</b></div>
"
tHTML += "
<div clas=\"panel-body\">"
tHTML += "
<td>"
if (row.getColumnValue("event_status") == "Canceled") {
tHTML += "<span class=\"label label-danger\">CANCELED</span>
"
} else if (row.getColumnValue("event_type") == "Practice") {
tHTML += "<span class=\"label label-default\">Practices</span>
"
} else if (row.getColumnValue("event_type") == "Game") {
tHTML += "<span class=\"label label-warning\">Games</span>
"
} else {
tHTML += "<span class=\"label label-danger\">Other</span>
"
}
tHTML += "<b>Cherryview #1 </b>" + row.getColumnValue("location1")
tHTML += "
<b>Cherryview #2 </b>" + row.getColumnValue("location2")
tHTML += "
<b>Village Creek </b>" + row.getColumnValue("location3")
if (row.getColumnValue("location4").trim() != "" ){
tHTML += "
<b>Oak Shores </b>" + row.getColumnValue("location4")
}
tHTML += "</td>
"
tHTML += "</div>
"
tHTML += "</tr>
"
tHTML += "</tbody>
"
tHTML += "</table>
</div>
"
return tHTML
}

Message me if you’d like a copy of the demo application NSF.