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

Move rows within a table using buttons

Avatar

Level 2

Hello Guys,

I am trying to create a dynamic table and I have been trying to figure out how best to do it. Here are my requirements

1) The table will have 12 rows, the number of rows will not change.

2) The table will have 2 columns.

3) The point of the table is for the user to reorder based on priority.

4) The data must persist when saved (this one i know how to do).

I have been creating a subform around a row and adding a up and down arrow buttons to each one. I was going to use a moveinstance command but I don't quite understand how the indexing will work.

If you guys have a better suggestion or an example, i would really appreciate it.

Thanks,

roger.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi,

I have updated a sample to include moving rows: https://acrobat.com/#d=khu3Ik*9LUz60afNWuCUsA

Note that in this table there are TWO repeating rows. The first reacts to the dropdown, the second to the add row button.

So you can move rows within their respective instances. The hover colour is set to blue for Row1 and green for Row2.

In the first example I have used the Row1 name to access the current index. Whereas for hte second example I have used this.parent.parent.index. This is just to show the different approaches.

Note how I have set up this form to give visual and audio feedback to the user when they can't move a row, rather than an app.alert.

Hope that helps,

Niall

View solution in original post

4 Replies

Avatar

Level 10

Hi,

Repeatable objects have a zero-based numbering system. So Row1 with 12 instances, would look like Row1[0], Row1[1], ... Row1[11].

So the following Javascript would move the row up:

if (Row1.index != 0)

{     

     var nIndexFrom = Row1.index;

     var nIndexTo = Row1.index - 1;     

     _Row1.moveInstance(nIndexFrom, nIndexTo);     

}     

else

{     

     xfa.host.beep("3");

}

A similar script would move the row downwards. Note I have used Row1.index, you could also use this.parent.index if the button is in the row. If it is buried in subforms, you may need this.parent.parent.index, to get to the instance of the repeating object.

Hope that helps,

Niall

Avatar

Level 2

The problem with it being repeatable is that the text in the rows of column one are all different. will that change it?

Avatar

Correct answer by
Level 10

Hi,

I have updated a sample to include moving rows: https://acrobat.com/#d=khu3Ik*9LUz60afNWuCUsA

Note that in this table there are TWO repeating rows. The first reacts to the dropdown, the second to the add row button.

So you can move rows within their respective instances. The hover colour is set to blue for Row1 and green for Row2.

In the first example I have used the Row1 name to access the current index. Whereas for hte second example I have used this.parent.parent.index. This is just to show the different approaches.

Note how I have set up this form to give visual and audio feedback to the user when they can't move a row, rather than an app.alert.

Hope that helps,

Niall

Avatar

Level 2

You are awesome Niall. This is like the third question you have answered for me. I really appreciate all the help and I im sure everyone else does too.

Thank you very much again. This is very very useful.

Thank you.