Highlighted

Efficient way to author large numeric tables

Avatar

Avatar

GregFullard

Avatar

GregFullard

GregFullard

23-05-2018

I'm currently on a project where we are building a number of predominantly numeric tables in Adaptive forms. Typical example is like a company's balance sheet or income statement. These tables are generally about 10-30 rows with 5 or more columns with numeric cells.

Using the Vanilla AEM Table component is very cumbersome, since building such tables involves:

  • Creating the initial 2x2 table
  • Repeatedly adding many table rows
  • Going into each table cell and manually changing the cell's component to a Numeric box

(Note: Unfortunately using rows that repeat based on form data is not appropriate for this use case)

In addition to being cumbersome, the forms authoring experience also get's very slow once the tables get big.

So I'm looking for a better solution here, and am hoping the forum can help.

We're leaning towards creating our own custom table component whic starts out with 10 rows and all cells being a numeric box to start with. This seems like the right idea, but execution has not been a pleasant journey so far. It seems to Adaptive forms table component has many downstream dependencies and creating a custom component is not as simple as copying a folder for /lib, pasting it under /app and making a few changes.

Pointers and assistance will be much appreciated (Either for building the custom component, or for solving the problem in another way)

Replies

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

23-05-2018

If i had that requirement - i would look at building a custom component that can be dropped into an Adaptive form. I would also explore the use of this lib - https://getbootstrap.com/docs/4.0/content/tables/

Highlighted

Avatar

Avatar

GregFullard

Avatar

GregFullard

GregFullard

23-05-2018

Tx Steve

How would the data binding work in such a custom component though? I might be missing something obvious here, but the value behind the vanilla Table component is the ability for a forms author to specify the data binding for each cell in the table.

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

23-05-2018

This would need to be coded in the logic of the custom component. 

Highlighted

Avatar

Avatar

GregFullard

Avatar

GregFullard

GregFullard

23-05-2018

Hmmm. Tx

That's what I was afraid of, and since it needs to be author-able I might be in for a big job.

Anyhoo, let me give it a college-try and see how it works

Highlighted

Avatar

Avatar

lesutton1

Avatar

lesutton1

lesutton1

23-05-2018

Hi Greg, for large amounts of data inside a table, I'd probably create a custom component and use datatables (https://datatables.net/). But if the table is working for you but just slowing down your authoring experience, move the table to a component and work on it there. It will be much more responsive. That said, if your authoring experience is slowing down - you need to start looking at rearchitecting your design and doing some lazy loading of fragments in panels.

if you are capturing data inside your table, just moving to a fragment should work. If you're trying to create a report inside an adaptive form, I'd likely opt to move to JSP or a servlet on the AEM server instead.

Highlighted

Avatar

Avatar

GregFullard

Avatar

GregFullard

GregFullard

23-05-2018

Tx Guys

Another alternative I'm considering is preparing a pre-built fragment using the vanilla AEM table. Obviously it will still be effort to build the initial table, but afterwards, form authors would simply need to create a panel, point it to the fragment, and if they needed to change the rows etc, they can embed the fragment.

I'm gonna give that a try first (seems like less effort than a whole custom component)