Facility Control

I made a basketball stats dashboard that has a table for each team. Each table has about 21 columns and and 17 rows, so it is kinda busy. I'd like to format these tables to be more readable for the operator. What's the best way to go about this? Does Dashboard support CSS or Class tags? I'm kinda new to Javascript too, but I'm learning quick, so quick example code could help. thanks.

DashBoard has its own mechanism for styling that is *somewhat* CSS-like.

When you are in Edit Mode and double-click on a table, you will see a "style" tab for the overall table. You'll also see a way to set style information for even rows vs. odd rows and selected rows vs. unselected rows.

If those don't get you what you're looking for, you can also specify a parameter to contribute styles for each row in your table - in this case, you would use a string array with style information for the background, foreground, etc. for each row and, in the "config options" section of the editor (again, double-click on the table while the panel is edit mode), add w.rowstyleparam

<abs contexttype="opengear">
   <meta>
      <params>
         <param access="1" maxlength="0" name="Column 1" oid="params.col1" precision="0" type="STRING_ARRAY" widget="default">
            <value>a</value>
            <value>b</value>
            <value>c</value>
            <value>d</value>
            <value>e</value>
            <value>f</value>
            <value>g</value>
            <value>h</value>
         </param>
         <param access="1" maxlength="0" name="Column 2" oid="params.col2" precision="0" type="STRING_ARRAY" widget="default">
            <value>a2</value>
            <value>b2</value>
            <value>c2</value>
            <value>d2</value>
            <value>e2</value>
            <value>f2</value>
            <value>g2</value>
            <value>h2</value>
         </param>
         <param access="1" constrainttype="STRING_CHOICE" name="Table" oid="table" precision="0" type="INT16" value="7" widget="table">
            <constraint>params.col1</constraint>
            <constraint>params.col2</constraint>
         </param>
         <param access="1" maxlength="0" name="Styles" oid="params.styles" precision="0" type="STRING_ARRAY" widget="default">
            <value>t:bg#FF0000;f:bg#000000;fg#FFFFFF;</value>
            <value>t:bg#00FF00;f:bg#111111;fg#FFFFFF;</value>
            <value>t:bg#0000FF;f:bg#222222;fg#FFFFFF;</value>
            <value>t:bg#FFFF00;f:bg#333333;fg#FFFFFF;</value>
            <value>t:bg#FF00FF;f:bg#444444;fg#FFFFFF;</value>
            <value>t:bg#FF0000;f:bg#555555;fg#FFFFFF;</value>
            <value>t:bg#00FF00;f:bg#666666;fg#FFFFFF;</value>
            <value>t:bg#0000FF;f:bg#777777;fg#FFFFFF;</value>
            <value>t:bg#FFFF00;f:bg#888888;fg#FFFFFF;</value>
         </param>
      </params>
   </meta>
   <tab height="277" left="22" top="24" width="511">
      <param expand="true" height="212" left="12" name="Blank (No Style)" oid="table" showlabel="false" top="16" width="357"/>
      <param evenstyle="f:bg#212121;f:fg#E7E7E7;t:bg#selectbg;t:fg#selectfg;" expand="true" height="212" left="12" name="Even/Odd" oddstyle="f:bg#676767;f:fg#FFFFFF;t:bg#selectbg;t:fg#selectfg;" oid="table" showlabel="false" style="bg#000000;" top="16" width="357"/>
      <param expand="true" height="212" left="12" name="Each Row" oid="table" showlabel="false" top="16" width="357">
         <config key="w.rowstyleparam">params.styles</config>
      </param>
   </tab>
</abs>

#DashBoard

Note: You can also define your styles at the top of your panel. You in the source editor, click on the "style" button above the tree on the left side. Make sure you give your style an ID and you can select it in the style editor for an individual user interface element.

James
#DashBoard