JavaScript Table API – The Basics

[Dan Korn]

The JavaScript table object in FusionPro 7.0, new FPTable, must be declared at the beginning of a table, followed by the number of columns that the table will use. Columns are defined in 100ths of a point. The example below shows 4 columns that are each an inch wide. The number of rows can be added row by row, or at the beginning of the table.

new FPTable;
var myTable = new FPTable;
myTable.AddColumns(7200, 7200, 7200, 7200);  
myTable.AddRows(2);

At the end of the table, the MakeTags() function must be called:

return myTable.MakeTags();

There are 2 ways to set content for the cells. The first row and column in a table is always 0. Text Fields, static type or even graphic images can be placed inside a cell:

myTable.Rows[0].Cells[0].Content = "Hello";
myTable.Rows[0].Cells[1].Content = Field("FName");
myTable.Rows[0].Cells[2].Content = "Goodbye";
myTable.Rows[0].Cells[3].Content = Field("LName");

The second way is can also set the content of all the cells in an entire row like this:

myTable.Rows[1].SetContents("Hi", Field("FName"), "Bye", Field("LName"));

It is possible to copy content and formatting from one cell to another in a row. In the example below, the content is set into cell 2,0 and then copied into cells 2,1 / 2,2 / 2,3.

myTable.Rows[2].Cells[0].Content = "Bon Jour";
myTable.Rows[2].CopyCells(0, 1,2,3);

In this example, thin Black borders are applied to cell 0,0 and then copied to cells 0,1 / 0,2 / 0,3.

myTable.Rows[0].Cells[0].SetBorders("Thin", "Black", "Top", "Bottom", "Right", "Left");
myTable.Rows[0].CopyCells(0, 1,2,3);

When copying the formatting of one cell to another, it is important to remember to set the content of the subsequent cells after the formatting is done (unless the content is also meant to be the same).
The following pages show more examples of ways to format a cell.

Shading:
Two properties for Shading are Shade Color and Shade Percent.

myTable.Rows[1].Cells[0].ShadeColor="Black";
myTable.Rows[1].Cells[0].ShadePct=20;

There are two more properties for Shading which are Shading Repeat and Shading Type. This allows you to specify 2 (or more) different shading values so that you can alternate shading between rows or columns. The two properties for Shading Type are "ByRow" or "ByColumn".

myTable.ShadingColor1 = "Blue";
myTable.ShadingPct1 = 20;
myTable.ShadingRepeat1 = 1;
myTable.ShadingColor2 = "Red";
myTable.ShadingPct2 = 40;
myTable.ShadingRepeat2 = 1;
myTable.ShadingType = "ByRow"; //or "ByColumn"

SetBorders:
The 2 border properties include thickness and location. Values for thickness are "Thin", "Medium," "Thick" and "None". If no parameter is specified, the border will default to none. Values for location are "Top," "Bottom," "Right" and "Left".

myTable.Rows[0].Cells[0].SetBorders("Thin", "Black", "Top", "Bottom);

Font Formatting:
The 3 properties for font formatting are Font Face, Text Color and Point Size.

myTable.Rows[2].Cells[0].Font="Times New Roman";
myTable.Rows[2].Cells[0].TextColor="Red";
myTable.Rows[2].Cells[0].PointSize=15;

Bold/Italics:
Below is an example of how to apply Bold and Italic formatting to text in a cell:

myTable.Rows[2].Cells[0].Bold="On";
myTable.Rows[2].Cells[0].Italic="On";

Margins:
To use table margins, the new FPTableMargins object must be declared. Once the new FPTableMargins object is called, the 4 parameters that can be used are Top, Bottom, Left and Right. The margins for top and bottom are called out in 10ths of a point. For left and right they are called out in 100ths of a point

myTable.Rows[2].Cells[0].Margins = new FPTableMargins;
myTable.Rows[2].Cells[0].Margins.Top = 50;
myTable.Rows[2].Cells[0].Margins.Bottom = 50;

Rotation:
The contents of a cell can be rotated by using the rotation property. Valid values for rotation are 0, 90, 180, or 270.

myTable.Rows[3].Cells[0].Rotate = 90;

To combine or merge cells together, HStraddle and VStraddle can be used to straddle cells both Horizontally and Vertically:

myTable.Rows[3].Cells[0].HStraddle = 2;
myTable.Rows[3].Cells[2].VStraddle = 2;

To align content within cells horizontally, the HAlign property can be used with the values of "Left", "Right" and "Center":

myTable.Rows[3].Cells[0].HAlign = "Left";
myTable.Rows[3].Cells[1].HAlign = "Right";
myTable.Rows[3].Cells[2].HAlign = "Center";

To align content within cells vertically, the VAlign property can be used with the values of "Top", "Bottom" and "Middle":

myTable.Rows[3].Cells[0].VAlign = "Top";
myTable.Rows[3].Cells[1].VAlign = "Bottom";
myTable.Rows[3].Cells[2].VAlign = "Middle";

Advanced Settings:
It is possible to specify a row in a table to be a header type and a footer type. When a row is specified as a header or footer, it will repeat on overflow pages.

myTable.Rows[0].Type = "Header";
myTable.Rows[4].Type = "Footer";

There is also a way to skip a row in a table if needed. This could be based on some conditional logic.

myTable.Rows[0].Type = "Skip"; //removes the row from the table

Below is a sample table rule (containing 2 text fields for first and last name) and the resulting output:

var myTable = new FPTable;
myTable.AddColumns(7200, 7200, 7200, 7200);
myTable.AddRows(3);
  myTable.Rows[0].Cells[0].Font="Times New Roman";
myTable.Rows[0].Cells[0].TextColor="Red";
myTable.Rows[0].Cells[0].SetBorders("Thin", "Black", "Top", "Bottom", "Right", "Left");
myTable.Rows[0].CopyCells(0, 1,2,3);
  myTable.Rows[0].Cells[0].Content = "Hello";
myTable.Rows[0].Cells[1].Content = Field("FName");
myTable.Rows[0].Cells[2].Content = "Goodbye";
myTable.Rows[0].Cells[3].Content = Field("LName");
  myTable.Rows[1].Cells[0].Font="Arial";
myTable.Rows[1].Cells[0].TextColor="Blue";
myTable.Rows[1].Cells[0].SetBorders("Thin", "Black", "Top", "Bottom", "Right", "Left");
myTable.Rows[1].CopyCells(0, 1,2,3);
myTable.Rows[1].SetContents( "Hola", Field("FName"), "Adios", Field("LName"));
  myTable.Rows[2].Cells[0].Font="Times New Roman";
myTable.Rows[2].Cells[0].TextColor="Green";
myTable.Rows[2].Cells[0].SetBorders("Thin", "Black", "Top", "Bottom", "Right", "Left");
myTable.Rows[2].CopyCells(0, 1,2,3);
myTable.Rows[2].SetContents( "This", "Row", "is", "Green");
  return myTable.MakeTags();

PDF version of this document

[DSweet]

Dan,

Is there anything in the works about being able to do this simpler form of JavaScript programming to create charts on the fly as well?

Thanks
.

[Dan Korn]

Originally Posted by DSweet

Is there anything in the works about being able to do this simpler form of JavaScript programming to create charts on the fly as well?

Not at this time. Chart formats are defined in the Chart Properties GUI, not via tags as tables are, so wrapping that functionality in a JavaScript object is much more complicated. You can use the DIF API to modify chart formats if you're developing with FusionPro Server.

What kind of dynamic chart generation are you looking for? If you want to suggest an API or post an example of the kind of code you'd like to be able to write, I can make an enhancement case for it.

[DSweet]

We do a lot of 401K and other such financial statements for certain clients. They currently have their information in a table form, but they are telling us that they are looking elsewhere to do this since other companies are telling them they can more visually pleasing and easier to read charts in a smaller area than we can with FusionPro (3D, single slice exploded pie, legend numbers within the chart bars and slices, etc.) Currently I'm just looking to being able to program even the simple charts within FusionPro instead of having to make a separate .txt file for each chart.
.

[Dan Korn]

Originally Posted by DSweet

We do a lot of 401K and other such financial statements for certain clients. They currently have their information in a table form, but they are telling us that they are looking elsewhere to do this since other companies are telling them they can more visually pleasing and easier to read charts in a smaller area than we can with FusionPro (3D, single slice exploded pie, legend numbers within the chart bars and slices, etc.) Currently I'm just looking to being able to program even the simple charts within FusionPro instead of having to make a separate .txt file for each chart.
.

If you only want to generate the chart data dynamically, that's easy to do with JavaScript. You don't need a .txt file at all. The tagging for a chart is much simpler than it is for a table - the only tags allowed are <row> and <cell> tags. So it's pretty simple to generate those tags in a rule like this:

var chart = '<row type=header><cell>foo<cell>bar<cell>abc';
chart += '<row><cell>' + Field("foo");
chart += '<cell>' + Field("bar");
chart += '<cell>' + Field("abc");
return chart;

[DSweet]

Thanks, that helps. However, I have another question and a comment in regards to charting.

My question is how do I put a border on a pie chart? If one of the colors that you are requested to use is white...then that slice of the pie actually looks like it is missing. There is no border around the individual slices nor the whole circle of the pie itself. I've even checked to see that the property "Draw Chart Border" is checked, but nothing shows for either a regular or an exploded pie chart. How do I get a border?

My comment is in regards to adding "custom" colors to the chart. I would like to be able to name these colors instead of just having a bunch of colors named "custom".

Thanks.
.

[Dan Korn]

Please start a new thread with your chart-specific questions, so that we can keep this thread about the table API. Thanks.

[esmith]

New question regarding tables: is there a way to center a table when it is included in a left-justified text frame? If I have body copy for a letter where I want to insert a 3-column table, but I want the table centered left to right, it appears that selecting the table rule in the text frame and clicking the center button does not work. Is there a property for alignment?

[Dan Korn]

Originally Posted by esmith

New question regarding tables: is there a way to center a table when it is included in a left-justified text frame? If I have body copy for a letter where I want to insert a 3-column table, but I want the table centered left to right, it appears that selecting the table rule in the text frame and clicking the center button does not work. Is there a property for alignment?

Yes, you can use the alignment attribute of the <table> tag to control the alignment of the table itself within the text frame, as documented in the FusionPro Tags Reference Guide. Specifically, <table alignment=center>.

Unfortunately, though, there's no property in the JavaScript Table API which corresponds to this. However, it's pretty easy to modify the tagging returned from the FPTable.MakeTags function, like so:

var TableTags = myFPTableObject.MakeTags().replace(/^\<table/, "<table alignment=center");

[NPN]

Can this be used to solve the problem in this thread?

http://forums.pti.com/showthread.php...border+graphic

Meaning, can you make a dynamic table cell that fits to an uploaded graphic then make a border around it?