Table / Copyfitting for 1 to 6 fields

jl_arnold · July 26, 2016

I have a template that is asking for up to 6 text fields. The first field is mandatory, where the next five are optional.

I am trying to build a table that will format these text fields in 3 columns and 2 rows. However, if only two of the six text fields are entered, I want the table to be formatted with one row and two columns.

I have been reading over creating tables, but I am not positive how I should go about creating this type of table that adds additional cells if additional fields are entered in the form.

My current table is below. The basic form of the table is there, but it doesn't adjust the cells to merge if the last text fields are not used.

var myTable = new FPTable;
myTable.AddColumns(10776, 10776, 10776);
myTable.HAlign = "Center";


//Line1
var myRow = myTable.AddRow();
myRow.Cells[0].HAlign = "Center"; 
myRow.Cells[1].HAlign = "Center"; 
myRow.Cells[2].HAlign = "Center"; 
myRow.Cells[0].Content = Field("Location 1");
myRow.Cells[1].Content = Field("Location 2");
myRow.Cells[2].Content = Field("Location 3");

//Line2
if (Field("Location 4") || Field("Location 5") || Field("Location 6"))
{
var myRow = myTable.AddRow();
myRow.Cells[0].HAlign = "Center"; 
myRow.Cells[1].HAlign = "Center"; 
myRow.Cells[2].HAlign = "Center"; 
myRow.Cells[0].Content = Field("Location 4");
myRow.Cells[1].Content = Field("Location 5");
myRow.Cells[2].Content = Field("Location 6");

}


return myTable.MakeTags();

Am I on the right track with something like this?

tou · July 26, 2016

Adding a row does not need to be "var":

var myRow = myTable.AddRow();

should be just (in both cases.....):

myTable.AddRow(1);

Rows can be specified like the following:

myTable.Rows[0].Cells[0].Content = Field("Location 1");
myTable.Rows[0].Cells[1].Content = Field("Location 2");
myTable.Rows[0].Cells[2].Content = Field("Location 3");

The locations 4 through 6 should be coded like the following

myTable.Rows[1].Cells[0].Content = Field("Location 4");
myTable.Rows[1].Cells[1].Content = Field("Location 5");
myTable.Rows[1].Cells[2].Content = Field("Location 6");

I think that should do it.

Good luck.

Edited July 26, 2016 by tou

jl_arnold · July 26, 2016

Thanks Tou, however the design of the table was not my issue. But I did update my code for simplicity and constancy.

The issues I am having is formatting the code so that if Field("Location 1") is the only entry in the form, than I would get a single column, single row table.

Then I want to code to determine if Field("Location 1") and Field("Location 2") are being entered in the form and if so, than a two column row would be composed.

Here's a sample screenshot for what I'm trying to accomplish:

https://images.printable.com/imagelibrary/Seller/1061/WebImages_07202016100114_277/images/src/Table%20Formatting.jpg

Is this type of conditional formatting possible?

tou · July 26, 2016

You can always do it with more coding....

Assuming that when two fields are populate it's the first 2 location and so on....code it backwards...

if (Field("Location 6") != "") {

YOUR 6 LOCATION CODE GOES HERE

} else if (Field("Location 5") != "") {

YOUR 5 LOCATION CODE GOES HERE

} else if (Field("Location 4") != "") {

YOUR 4 LOCATION CODE GOES HERE

} else if (Field("Location 3") != "") {

YOUR 3 LOCATION CODE GOES HERE

} else if (Field("Location 2") != "") {

YOUR 2 LOCATION CODE GOES HERE

} else if (Field("Location 1") != "") {

YOUR 1 LOCATION CODE GOES HERE

}

If your locations are not always populated from 1 to 6 filled incrementally, you'll have to code more variables to handle it.

Good luck.

jl_arnold · July 26, 2016

This is perfect!

I was going to see how much extra coding it was to make this work incase 1 - 6 is not filled in incrementally, but this definitely works for me. Thanks for your help.

I'm going to be tweaking the table a bit so I may have another question or two about formatting, but I think I should be good to go!

Thanks again.

Dan Korn · July 26, 2016

Adding a row does not need to be "var":
var myRow = myTable.AddRow();
should be just (in both cases.....):
myTable.AddRow(1);
Rows can be specified like the following:
myTable.Rows[0].Cells[0].Content = Field("Location 1");
myTable.Rows[0].Cells[1].Content = Field("Location 2");
myTable.Rows[0].Cells[2].Content = Field("Location 3");

I actually prefer the way that jl_arnold had it. It's more concise to say:

myRow.Cells[0].Content = Field("Location 1");

Also, if you add another row somewhere, you don't then need to change all the hard-coded row numbers. You can just deal with each row as it's added, and you always know you're on the last one.

step · July 26, 2016

Adding a row does not need to be "var":
var myRow = myTable.AddRow();
should be just (in both cases.....):
myTable.AddRow(1);
Rows can be specified like the following:
myTable.Rows[0].Cells[0].Content = Field("Location 1");
myTable.Rows[0].Cells[1].Content = Field("Location 2");
myTable.Rows[0].Cells[2].Content = Field("Location 3");

While you are correct in saying that "adding a row doesn't need to be a var," there is nothing wrong with assigning it to a variable. The "AddRow" function actually returns the newly created row object so, assigning it to a variable can make things a little easier to read as opposed to writing "myTable.Rows[0]." But either syntax is completely fine, I just wanted to make that distinction.

I have a template that is asking for up to 6 text fields. The first field is mandatory, where the next five are optional.

I am trying to build a table that will format these text fields in 3 columns and 2 rows. However, if only two of the six text fields are entered, I want the table to be formatted with one row and two columns.

I think the way you want to achieve this is by determining how many fields you have populated and using that information to determine how many columns you'll need.

The first part is easy. You can put all of your fields into an array and use the 'filter' method to remove any fields that are empty:

var fields = [
 Field("Location 1"),
 Field("Location 2"),
 Field("Location 3"),
 Field("Location 4"),
 Field("Location 5"),
 Field("Location 6")
].filter(String);

The nice thing about this method is that it doesn't rely on the fields being populated in a particular order. For example, if only "Location 1" and "Location 5" were populated, the array would be reduced to ["Location 1", "Location 5"] which would generate a 2 column table.

From there, you'll be able to tell how many fields are populated by accessing the 'length' property on the 'fields' array. One thing we'll need to do, though, is insert a "blank" before the last element if the array length is 5 which can be done using the 'splice' method. Then we're ready to figure out how many columns we need:

// Insert blank to push last element into the 3rd cell
if (fields.length == 5) 
 fields.splice(4, 0, ' ');
// Determine the number of columns
var cols = fields.length == 1 ? 1 : fields.length % 3 ? 2 : 3;

You can determine the number of columns (the 'cols' variable) a number of ways. I chose to use a ternary conditional but you could write it as a switch statement if you wanted to:

switch (fields.length) {
 case 1:
   var cols = 1;
   break;
 case 2:
 case 4:
   var cols = 2;
   break;
 default:
   var cols = 3;
}

From there, determine the width each column should be (based on the number of columns needed) and create the table and columns:

var myTable = new FPTable();
var tableWidth = 32328;
for (var i=0; i<cols; i++)
 myTable.AddColumn(tableWidth/cols);

Now that the table has the appropriate number of columns, all we have to do is add the content for each row:

while(fields.length) {
 var row = myTable.AddRow();
 for (var i=0; i<cols; i++) {
   var cell = row.Cells[i];
   cell.HAlign = 'Center';
   cell.Content = fields.shift();
 }
}

So all together it looks like this:

var fields = [Field("Location 1"), Field("Location 2"), Field("Location 3"), Field("Location 4"), Field("Location 5"), Field("Location 6")].filter(String);

// Insert blank to push last element into the 3rd cell
if (fields.length == 5) fields.splice(4, 0, ' ');

// Determine the number of columns
var cols = fields.length == 1 ? 1 : fields.length % 3 ? 2 : 3;
var tableWidth = 32328; 

// Create table & add columns
var myTable = new FPTable();
for (var i=0; i<cols; i++)
 myTable.AddColumn(tableWidth/cols);

while(fields.length) {         
 var row = myTable.AddRow(); 
 for (var i=0; i<cols; i++) { 
   var cell = row.Cells[i];   
   cell.HAlign = 'Center';    
   cell.Content = fields.shift(); 
 }
}

return myTable.MakeTags();

Edited July 26, 2016 by step

tou · July 26, 2016

Nice! Good Stuff Step!

jl_arnold · July 26, 2016

This is awesome!

Thanks so much Step!

jl_arnold · July 26, 2016

Quick follow up question.

This really would only pertain to the 5 Locations table. I made Tou's suggestion work and was able to set the table properties for 1 location, 2 locations, 3 locations, etc. so I designed each table individually.

I did this and made the table with 5 locations have 4 columns, where I merged column 2 and 3 in row 1, and the I merged 1 and 2 in row 2, as well as 3 and 4 in row 2.

The end result is in this image:

It seems like I should be able to change to var = cols, but I'm not sure how.

step · July 26, 2016

Quick follow up question.

I did this and made the table with 5 locations have 4 columns, where I merged column 2 and 3 in row 1, and the I merged 1 and 2 in row 2, as well as 3 and 4 in row 2.

Oh, gotcha. I was basing my answer off of the image you posted in your second post. That being said, it doesn't sound like you're describing a 4 column table to me. It sounds like a 2 column table wherein the cell in the last row spans both columns.

If that's what you want to do, then you don't need the code to add the blank space before the last element in arrays with a length of 5. It sounds to me like you can also modify the line for determining the number of columns to say "if the length of the array of populated fields is evenly divisible by 3 ( fields.length % 3 ), then make a 3 column table – otherwise make a two column table". Then when you're making your table just add a line that straddles the last cell of a row. That way, if one field is populated it will straddle 2 columns giving the appearance of 1 column. The same will be true for a scenario where 5 fields are populated.

Revised code below:

var fields = [Field("Location 1"), Field("Location 2"), Field("Location 3"), Field("Location 4"), Field("Location 5"), Field("Location 6")].filter(String);

// Determine the number of columns
[color="red"]var cols = fields.length % 3 ? 2 : 3;[/color]
var tableWidth = 32328;

var myTable = new FPTable();
for (var i=0; i<cols; i++)
 myTable.AddColumn(tableWidth/cols);

while(fields.length) {
 var row = myTable.AddRow();
 for (var i=0; i<cols; i++) {
   var cell = row.Cells[i];
   cell.HAlign = 'Center';
   cell.Content = fields.shift();
  [color="Red"] if (!fields.length) cell.HStraddle = 2; // Straddle 2 columns on the last element.[/color]
 }
}

return myTable.MakeTags();

tou · July 26, 2016

I'm getting the attached results for 5 location testing.

Cool!

jl_arnold · July 26, 2016

I was getting something similar. I ended up going with the rule to require sequential ordering for Locations 1 through 6 for now.

I want to also be able to copyfit and since I had added point sizes for the cell references, I felt I had a little more control with the more basic code.

I was going to do additional testing for copyfit. Step, I'm going to test that on your original code since that is limited to two rows.

Thanks again guys!

PS. I meant to include a view of what my current "incremental" code displays as.

https://images.printable.com/imagelibrary/Seller/1061/WebImages_07202016100114_277/images/src/SampleTextTable.jpg

Edited July 26, 2016 by jl_arnold
Meant to include an image

tou · July 27, 2016

Looks like you'll have to code 2 rules....

Rule # 1 - line1

Rule # 2 - line2

line1 (var a,b,c,d,e,f are for testing only and should point to your field - I've used static strings for testing)

var a="A"
var b=""
var c="C"
var d="D"
var e="E"
var f="F"

var fields = [a,b,c,d,e,f].filter(String);

var myTable = new FPTable;

if (fields.length == 1)
   var cols = 1
   else if (fields.length == 2)
   var cols = 2
   else if (fields.length == 3)
   var cols = 3
   else if (fields.length == 4)
   var cols = 2
   else if (fields.length == 5)
   var cols = 3
   else 
   var cols = 3

if (cols == 1) {
  myTable.AddColumns(32328);
  var myRow = myTable.AddRow();
  myTable.HAlign = "Center";
  myRow.Cells[0].HAlign = "Center"; 
  myRow.Cells[0].Content = fields[0];
} else if (cols == 2) {
  myTable.AddColumns(16164, 16164);
  var myRow = myTable.AddRow();
  myTable.HAlign = "Center";
  myRow.Cells[0].HAlign = "Center"; 
  myRow.Cells[1].HAlign = "Center"; 
  myRow.Cells[0].Content = fields[0];
  myRow.Cells[1].Content = fields[1];
} else {
  myTable.AddColumns(10776, 10776, 10776);
  var myRow = myTable.AddRow();
  myTable.HAlign = "Center";
  myRow.Cells[0].HAlign = "Center"; 
  myRow.Cells[1].HAlign = "Center"; 
  myRow.Cells[2].HAlign = "Center"; 
  myRow.Cells[0].Content = fields[0];
  myRow.Cells[1].Content = fields[1];
  myRow.Cells[2].Content = fields[2];
}

return myTable.MakeTags();

line 2 (var a,b,c,d,e,f are for testing only and should point to your field - I've used static strings for testing)

var a="A"
var b=""
var c="C"
var d="D"
var e="E"
var f="F"

var fields = [a,b,c,d,e,f].filter(String);

var myTable = new FPTable;

if (fields.length == 1)
   var cols = 1
   else if (fields.length == 2)
   var cols = 2
   else if (fields.length == 3)
   var cols = 3
   else if (fields.length == 4)
   var cols = 2
   else if (fields.length == 5)
   var cols = 2
   else 
   var cols = 3

if (cols == 1) {
} else if (cols == 2) {
  myTable.AddColumns(16164, 16164);
  var myRow = myTable.AddRow();
  myTable.HAlign = "Center";
  myRow.Cells[0].HAlign = "Center"; 
  myRow.Cells[1].HAlign = "Center";
  if (fields.length == 4) {  
     myRow.Cells[0].Content = fields[2];
     myRow.Cells[1].Content = fields[3];
  } else if (fields.length == 5) {
     myRow.Cells[0].Content = fields[3];
     myRow.Cells[1].Content = fields[4];
  } 
} else {
  if (fields.length > 3) {  
     myTable.AddColumns(10776, 10776, 10776);
     var myRow = myTable.AddRow();
     myTable.HAlign = "Center";
     myRow.Cells[0].HAlign = "Center"; 
     myRow.Cells[1].HAlign = "Center"; 
     myRow.Cells[2].HAlign = "Center"; 
     myRow.Cells[0].Content = fields[3];
     myRow.Cells[1].Content = fields[4];
     myRow.Cells[2].Content = fields[5];
  }
}

return myTable.MakeTags();

In your text box, stack the two variables on top of each other.

Edited July 27, 2016 by tou

step · July 27, 2016

I was getting something similar. I ended up going with the rule to require sequential ordering for Locations 1 through 6 for now.

Sorry, I misunderstood what you were going for. Now I understand that you want a top row with 3 columns and the bottom row to have 2 columns if there are 5 populated fields. The only potential issue I see with having 4 columns and joining the second and third cell on the top row is that the resulting cell will be wider than the other two cells on the top row.

Instead of determining the number of columns upfront like I initially suggested, why not create a 6 column table and variably set the straddle (the width of the cell) based on how many elements are in a particular row? This is how I would do that:

var fields = [Field("Location 1"), Field("Location 2"), Field("Location 3"), Field("Location 4"), Field("Location 5"), Field("Location 6")].filter(String);

var myTable = new FPTable();
myTable.AddColumns(5388,5388,5388,5388,5388,5388);
var cols = Math.ceil((fields.length/2)%2) ? 3 : 2;

while(fields.length) {
 var row = myTable.AddRow();   
 fields.splice(0, cols).forEach(function(s,p,a){
   var span = 6/a.length;
   var cell = row.Cells[p*span];
   cell.HAlign = 'Center';
   cell.HStraddle = span;
   row.Cells[p*span].Content = s;
 });
}

return myTable.MakeTags();

I want to also be able to copyfit and since I had added point sizes for the cell references, I felt I had a little more control with the more basic code.

I would suggest looking into the CopyfitLine function for that. Since you'll already know the size of the cell based on how many cells it's straddling (5388*span), you'll be able to set up copyfitting for each particular row.

tou · July 27, 2016

Sweet. I knew it could be done more concisely!

(¬‿¬)

jl_arnold · July 27, 2016

I like it! It works perfectly!

I'm definitely going to look into the Copyfit function and work on it for each row, but I was able to set the global Copyfit rule to work that way.

Thanks so much for the help!

Table / Copyfitting for 1 to 6 fields

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation