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:
(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)
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/
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.
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.
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)