A Stoplight Status Component Using Bootstrap

I had a request to create a “stoplight” status section in a recent application.  The purpose of this section would be for the users to register a red, yellow, green status to a number of categories on a product development information form.

Using a combination of Twitter Bootstrap and jQuery I was able to create a nice looking component that provided the exact functionality they were hoping to achieve.

Here is a link to the demo page where you can see this in action.

Button Code

<a id="cat_1_btn" class="cat1" href="javascript:statusToggle('cat1')" role="button">
Strategic Support</a>
<a id="cat_2_btn" class="cat2" href="javascript:statusToggle('cat2')" role="button">
Competitive Landscape</a>
<a id="cat_3_btn" class="cat3" href="javascript:statusToggle('cat3')" role="button">
Product Development</a>

statusToggle Code

All the below function does is to check the current CSS class of the button and toggle it to the next one.  Very simple.

function statusToggle(category) { 
 if ($("." + category).hasClass("btn btn-success btn-xs btn-custom")) { 
   $("." + category).removeClass("btn btn-success btn-xs btn-custom")
   $("." + category).addClass("btn btn-danger btn-xs btn-custom")
   $("." + category + "Status").val("danger")
 } else if ($("." + category).hasClass("btn btn-danger btn-xs btn-custom")) { 
   $("." + category).removeClass("btn btn-danger btn-xs btn-custom")
   $("." + category).addClass("btn btn-warning btn-xs btn-custom")
   $("." + category + "Status").val("warning")
 } else if ($("." + category).hasClass("btn btn-warning btn-xs btn-custom")) { 
   $("." + category).removeClass("btn btn-warning btn-xs btn-custom")
   $("." + category).addClass("btn btn-success btn-xs btn-custom")
   $("." + category + "Status").val("success")

The CSS classes set by the above code is standard Twitter Bootstrap CSS. The final btn-custom class only serves to add some margins and bold weight to the button text.  Nothing special there.

Interestingly enough, the above code was initially implemented in an Oracle APEX application.   Since it was all javascript and CSS I was able to easily port the code over to a sample xPages application without changing really anything.

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()}">


function buildScheduleTable() {
var tHTML = "";
tHTML += "
<div class=\"panel panel-primary\">
<table class=\"table\">"
tHTML += "
tHTML += "
tHTML += "
<div class=\"panel-heading\"><b>"
tHTML += row.getColumnValue("event_dt")
tHTML += "</b></div>
tHTML += "
<div clas=\"panel-body\">"
tHTML += "
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>
return tHTML

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