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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s