Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Remove a row from multiple tables

Avatar

Former Community Member

Hello,

I have a form that has what appears to be one table.  Since I needed 30 columns (29 of them are single character fields) I had to use 2 table objects.  Then I needed the ability to add and remove rows.  Adding a row at the end is easy enough.  Deleting a specific row is the problem.  At the moment, I added a third table which has a header row and a item body row.  the body row is a button with the intention of removing that entire row from the large table.  This means it needs to remove the row from all 3 tables.

My structure is:

  • form1
    • (Some other flowed subform that doesn't matter for us)
    • SubformPersonnel (a flowed subform)
      • SubformHeader (a positioned subform)
        • TextOverallHeader (text to label the oeverall 3 tables)
        • ButtonAddRow (adds a row to the end of all 3 tables)
      • SubformPersonnelTable (a positioned subform)
        • ContractorTableRemove (a table with 1 column for the Remove button)
          • HeaderRow (A hidden row to align the table with the other 2)
          • Item (A row with the Remove button)
            • CellRemoveButton (the cell with the remove button and associated JavaScript)
        • ContractorTableLeft (a table with the left 15 printed columns)
          • HeaderRow
          • Contractor (A row of data to be removed when CellButton above is clicked)
        • ContractorTableRight (a table with the right 15 printed columns)
          • HeaderRow
          • Contractor (A row of data to be removed when CellButton above is clicked)
    • (Some other flowed subforms that I am not worried about at the moment)

The 3 tables are aligned so the headers all line up, with no spaces between them.  The body rows then line up and this looks like one large table.  From left to right, they are:

ContractorTableRemove, ContractorTableLeft, ContractorTableRight

So Item and Contractor rows are added when ButtonAddRow is clicked in the overall header.  The intial count is set to 8 for each table, so I get 8 rows at startup. The minimum count is set to 1 for each.  I know that each row of each table has the same index number because I filled those into a cell in each table durig the cell's initialize.  This line, in the CellRemoveButton's click event deletes that cell's row in that table:

this.parent.parent._Item.removeInstance(this.parent.index);

I have tried all sorts of ways to delete the same row (using same index #) in the other 2 tables: ContractorTableLeft and ContractorTableRight, but don't seem to be getting the correct syntax correct.  I have tried hard coding the references, using .parent as shown below, and also tried using an index of 1 just to try deleting a row with no results.

     this.parent.parent.parent.ContractorTableLeft._Contractor.removeInstance(this.parent.index);

Can someone get me the correct syntax here?

I have seen examples of putting a hidden delete button on each table and clicking that, but I am concerned that it will get in the way of the tables on either side of the table it is in.  I reeally want to just reference the row and remove it so I can avoid any problems these additional delete problems may cause.

I have copied the form to https://acrobat.com/#d=7M8R50rEHf4AaVXppwyKLw

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi Karl,

Here is your form back to you: https://acrobat.com/#d=oRRJP3W*OgBk6DqXXbJhgg.

I have corrected the Add button, the Delete button and the Delete First Row button. I have annotated the script, so hopefully you can follow it.

Hope that helps,

Niall

View solution in original post

4 Replies

Avatar

Level 10

Hi,

I can't check out your form now, but I have an example where the one set of Add/Delete buttons act on two tables: http://assure.ly/eTOXaH.

Hope that helps,

Niall

Avatar

Former Community Member

Niall,

Thank you for the response.

This is one of the examples I saw prior to posting.  Correct me if I am wrong, but doesn't this use a delete button on each table where the first table's button basically click's the button on the second table as well, then each button delete's the given line?  I am trying to avoid doing that due to the nature of my tables.  They need to appear as 1 large table and do not believe this is possible with this method since I have 3 tables next to each other.

Based on this example, I have also tried a few variations on using xfa.resolveNode to define the second and third tables' row with no luck:

     var vCurrentRow = this.parent.index;

     xfa.resolveNode("SubformPersonnel.ContractorTableLeft")._Contractor.removeInstance(vCurrentRow );

or

     xfa.resolveNode("SubformPersonnel.ContractorTableLeft.Contractor[" + vCurrentRow + "]")..removeInstance();and others.

Karl

Avatar

Correct answer by
Level 10

Hi Karl,

Here is your form back to you: https://acrobat.com/#d=oRRJP3W*OgBk6DqXXbJhgg.

I have corrected the Add button, the Delete button and the Delete First Row button. I have annotated the script, so hopefully you can follow it.

Hope that helps,

Niall

Avatar

Former Community Member

Thank you, Niall.  Much appreciated!

The Delete button was more to make sure one could delete these outside a button in the actual row and I see I had the index wrong such that I was deleting the second row and not the first.  I had toyed with using this as a hidden button if I could pass the index to the event's function.

I had not thought of adding the reference to each row as a variable.  It seems to work very well.

For future reference to others, here is the code from the cellRemoveButton click event:

     // Declare some variables

     var i = this.parent.index;

     var oContractorLeft = ContractorTableLeft.Contractor;

     var oContractorRight = ContractorTableRight.Contractor;

 

     // Remove this row by accessing its index within the set of 'Item' row instances of the parent table

     _Item.removeInstance(i);

      // Since this table is actually 3 tables, we need to remove the other two table's instances as well.

     // Their index should be the same, so we just need to get their names correct.

     oContractorLeft.instanceManager.removeInstance(i);

     oContractorRight.instanceManager.removeInstance(i);

      // removing the row doesn't trigger calculations in tables in the form's current target (fixed in later versions of Acrobat)

     // force calculations to fire so the ItemIndex field's value is updated according to the remaining row's indexes

     // see http://forms.stefcameron.com/2006/05/20/add-recalculate/

     xfa.form.recalculate(1);

Again, thank you!

Karl