Simple Jazz Widget Tricks – Adding a Table


This is a simple and quick post on how you can add a table to a widget on your Jazz dashboard.  It is not rocket science (in fact it is just simple HTML), but it does allow you to show data that might not normally be available in your Jazz dashboard.  If you want to learn more, and do more, with HTML widgets in your dashboards, then I strongly suggest that you visit any one of the various different websites that provide HTML for Beginners types of courses (like w3 schools, HTML.net, HTML dog, Code Academy, or any one of hundreds of other sites).

How do we do this?  First go out and create an HTML widget.  Now open the HTML widget, and type in a nice heading for your table, something like “My Cool Data in a Table”.  Now click on the icon in the upper left of the widget, this will toggle your display from visual to HTML, and you will now see you widget contents in raw HTML format.  They will look something like this:
HTMLWidgetBeforeTable Add the code below to your widget, and get rid of the <div><br><div> elements:

<table style="text-align: left; width: 200px;" border="1" 
cellpadding="1" cellspacing="1">
<tbody>
<tr> 
<td style="vertical-align: top;">1 </td>
<td style="vertical-align: top;">2 </td>
<td style="vertical-align: top;">3 </td>
</tr>
<tr>
<td style="vertical-align: top;">4 </td>
<td style="vertical-align: top;">5 </td>
<td style="vertical-align: top;">6 </td>
</tr>
<tr>
<td style="vertical-align: top;">7 </td>
<td style="vertical-align: top;">8 </td>
<td style="vertical-align: top;">9 </td>
</tr>
<tr>
<td style="vertical-align: top;">10 </td>
<td style="vertical-align: top;">11 </td>
<td style="vertical-align: top;">12 </td>
</tr>
</tbody>
</table>

HTMLWidgetWithEdits

Now click on that HTML icon again and you will be toggled back to a visual mode.  You will now see your nice pretty table within your widget!  


HTMLWidgetAfterTable

You can now go in and enter data and change the data in each of the individual cells.

What’s Next?

Here are some helpful tips when working with tables in Jazz HTML widgets:

  • This is not some Jazz specific capability, it is just simple HTML.  If you want to learn more and do more, learn HTML using some of the resources that I linked to at the top of this post.
  • To add another row of data, just add a block of HTML at the end of your table, between the last </tr> and the </tbody>.

<tr>
<td style=”vertical-align: top;”>7 </td>
<td style=”vertical-align: top;”>8 </td>
<td style=”vertical-align: top;”>9 </td>
</tr>

  • To change the width of your table (the columns will automatically resize based on the contents), just edit the WIDTH parameter in your <table> tag. I used 200px in this example (for 200 pixels). Play around with different table widths, but keep in mind that your audience will use different browsers, and may have different widths for their browsers.
  • Each block of data between <td> and </td> represents a single CELL in your table.  Each block of data between <tr> and </tr> represents a single ROW in your table.  Now you can see how the data is organized in HTML format.
  • It is easiest for me to just put in a blank table using HTML, and then go back to the visual editor to fill in the data in the table.  Do what is easiest for you, but keep in mind that you can edit the contents of the widget in either mode (visual or HTML).
About these ads

3 Responses to “Simple Jazz Widget Tricks – Adding a Table”


  1. 1 Tamir Gefen June 23, 2014 at 2:34 pm

    Yeap, the widgets with HTML are very useful. I used it to show ClearCase reports and charts into RTC dashboard – herein an example:

    http://gomidjets.com/counter/click.php?id=644

  2. 2 Tamir Gefen June 23, 2014 at 2:38 pm

    However I’m not sure if you can put data inside in real-time (e.g. using JSON) when you render the table. Do you? I used jpg files that contain my charts (and these images files are generated automatically)

    • 3 dtoczala June 23, 2014 at 3:05 pm

      There are limitations to what you can put into an HTML widget. Most “real-time” or “live” data cannot go in there. For real time data, you are best suited to build an open social widget and put that on your dashboard.


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




No Nonsense Tech Talk Member

These are my PERSONAL views and observations

The postings on this site are my own and don't necessarily represent IBM's position, strategies or opinions. Anyone is free to use, copy, distribute, modify or sell the source code and other materials directly linked from dtoczala.wordpress.com and is provided "as is" without warranties. I am not responsible for any harm or damage caused to your computer, software or anything else caused by the material.

Recent Twitter Traffic


Follow

Get every new post delivered to your Inbox.

Join 185 other followers

%d bloggers like this: