Introduction

You can specify your data in one of two formats: an HTML <table> tag, or CSV. CSV is simpler, but HTML allows much richer presentation, including images and bar graphs.

CSV Format

The easiest way to create a CSV file is to use spreadsheet software like Excel or Numbers. Creating the data is as simple as entering a table like this:

The numbers in the top row are optional; they represent the column width.

Saving to CSV Format

• In Numbers: Choose File > Export… and choose CSV.
• In Excel: Choose File > Save As… and choose CSV from the “Save As Type” menu.

Adding a table to your status board

Go into Edit Mode by tapping the “gear” icon in the upper left of your device’s screen, then tap Edit. Drag a table panel onto your board, placing and sizing it however you’d like.

Making your data accessible to Status Board

Now that your table data is in a file, you need to put that file in a location where Status Board can access it. There are two ways to do this:

1. Storing your file on Dropbox

This is the simplest method, especially if you’re already a Dropbox user.

1. You’ll need the Dropbox application installed on your iOS device.
2. While in Edit Mode, tap on your Table panel to display the panel’s customizer.
3. Tap Dropbox.
4. The Dropbox app will open; grant Status Board permission to access your Dropbox. (Status Board will only access the file you specify, and will not access any other file on your Dropbox.)
5. After you grant access, Status Board will re-open. Browse through your Dropbox folder hierarchy and find the file that contains your table data. Tap on that filename.

You’re done! Status Board should display your table. When changes are made to the file on your Dropbox, those changes should be reflected on your status board within a few minutes.

2. Storing your file on a web server

This method requires that you know how to place a file on a web server.

1. Store your file on a web server of your choosing.
2. While in Edit Mode, tap on your Table panel to display the panel’s customizer.
3. Tap URL.
4. Enter the URL of your file.
5. Tap Save.

You’re done! Status Board should now display your table. When changes are made to the file on your web server, those changes should be reflected on your status board within a few minutes.

HTML Format

If you want to display richer data in your table, including images and bars, you should use a <table> HTML tag rather than CSV format. The HTML below produces this table: 

<style>
	
.name {
	width: 200px;
}

.state {
	width: 104px;
	text-align: center;
}

.progress {
	width: 150px;
}

.team {
	width: auto;
}

</style>

<table>
	<tr>
		<th class="name">Name</th>
		<th class="state">Phase</th>
		<th class="progress">Progress</th>
		<th class="team">Team</th>
	</tr>
	<tr>
		<td class="name">Project A</td>
		<td class="state"><img src="images/phases/phase-development.png" /></td>
		<td class="progress projectProgress blue"><div class="progressBarContainer"><span style="width: 50%;"></span></div></td>
		<td class="team"><img src="images/faces/team-cabel.png" /><img src="images/faces/team-neven.png" /></td>
	</tr>
	<tr>
		<td class="name">Project B</td>
		<td class="state"><img src="images/phases/phase-for-sale.png" /></td>
		<td class="progress projectProgress red"><div class="progressBarContainer"><span style="width: 85%;"></span></div></td>
		<td class="team"><img src="images/faces/team-greg.png" /><img src="images/faces/team-james.png" /><img src="images/faces/team-ashur.png" /></td>
	</tr>
	<tr>
		<td class="name">Project C</td>
		<td class="state"><img src="images/phases/phase-beta.png" /></td>
		<td class="progress projectProgress orange"><div class="progressBarContainer"><span style="width: 35%;"></span></div></td>
		<td class="team"><img src="images/faces/team-steve.png" /><img src="images/faces/team-june.png" /></td>
	</tr>	
</table>

The contents of this file are simply an HTML <table> tag, with a few additions.

1. Images: Use an <img> tag inside a <td>. Note that all images will, by default, get scaled to a height of 30px. To use images of any size, give the parent <td> element the class “noresize”.

<td class="noresize">

2. Headers: Use the standard <th> tag. The text will be displayed in a half-height, dimmed font. (The entire default stylesheet is available for your reference.)

3. Progress bar: Note: progress bars are new and improved in Status Board 2.0. If you want to display a progress bar, specify the following:

<td class="projectProgress [color-name]">
 <div class="progressBarContainer">
   <span style="width: [%-completion of progress]%;">
   </span>
 </div>
</td>

…where color-name is defined as one of the following:

• green
• red
• purple
• blue
• gray
• silver
• orange
• teal
• pink

4. Refresh Rate: New in Status Board 2.0. If you want to specify a refresh rate for your table, add the following attribute to your <table> tag:

<table data-refresh-every-n-seconds="[number of seconds]">
   ...
</table>

If you don’t specify this attribute, the default is set to 10 minutes in Status Board 2.0. (That default interval is subject to change.)

Sharing Tables via URL

It’s possible to have one of your customers install a table panel onto a Status Board via a URL on a web page. Use the following format:

panicboard://?url=[%-encoded table data url]&panel=table&sourceDisplayName=[your %-encoded company name]

The sourceDisplayName argument is optional.

When the user taps on that link on their iOS device, Status Board will launch and ask the user if they’d like to install the table on their Status Board.

Debugging

Debug your table by quad-tapping on it (four taps in a row) with your Status Board in “locked” (non-edit) mode. This will bring up a debug window that will let you see the table data your server is sending to Status Board, as well as the modified HTML that Status Board displays on your device display and external display (if you’re using an external display.)

Force a refresh of your table by triple-tapping on it in “locked” (non-edit) mode. (Triple-tapping forces any panel to refresh, not just table panels. Exception: for list panels, use pull-to-refresh.)