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
Custom Table Component
Hi,
I'm trying to build a table component from scratch as the existing OOTB table is deprecated for AEM 6.5.
I wanted to include a component inside a table cell and should be able to edit it. For example, I want to include an image component in the last column of the table, I should be able to add it via dialog and edit it in page.
I got to know that it is not possible with the existing Core Text component table structure as RTE plugins would not allow adding a component inside a cell except text input.
So, I tried to add custom dialog with multifield inputs and output the table as below.
<table width="100%" cellspacing="0" cellpadding="1" border="1">
<!--/* Get all child resources */-->
<div data-sly-list.rowsMultifield="${resource.getChildren}">
<div data-sly-test="${rowsMultifield.name == 'rows'}">
<ul data-sly-list.rows="${rowsMultifield.getChildren}">
<tr>
<!--/* Get all child resources */-->
<div data-sly-list.cellMultifield="${rows.getChildren}">
<!--/* Keep only the countries multifield and iterate over its children */-->
<ul data-sly-test="${cellMultifield.name == 'cells'}"
data-sly-list.cell="${cellMultifield.getChildren}">
<div data-sly-test="${properties.headerRow && (rowsList.index == 0)}">
<th>
<sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType='macnicagwi/components/content/text', decorationTagName='div', cssClassName='header-row'}">
</sly>
</th>
</div>
<div data-sly-test="${properties.headerRow && (rowsList.index != 0) }">
<th data-sly-test="${properties.headerColumn && (cellList.index == 0)}">
<sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType='macnicagwi/components/content/text', decorationTagName='div', cssClassName='header-column'}">
</sly>
</th>
<td data-sly-test="${properties.headerColumn && (cellList.index != 0)}">
<sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType=cell.type, decorationTagName='div'}">
</sly>
</td>
<td data-sly-test="${!properties.headerColumn}">
<sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType=cell.type, decorationTagName='div'}">
</sly>
</td>
</div>
<div data-sly-test="${!properties.headerRow}">
<th data-sly-test="${properties.headerColumn && (cellList.index == 0)}">
<sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType='macnicagwi/components/content/text', decorationTagName='div', cssClassName='header-column'}">
</sly>
</th>
<td data-sly-test="${properties.headerColumn && (cellList.index != 0)}">
<sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType=cell.type, decorationTagName='div'}">
</sly>
</td>
<td data-sly-test="${!properties.headerColumn}">
<sly data-sly-resource="${ 'rows/{0}/cells/{1}/*' @ format=[rows.name,cell.name], resourceType=cell.type, decorationTagName='div'}">
</sly>
</td>
</div>
</ul>
</div>
</tr>
</ul>
</div>
</div>
</table>And this is the dialog
So, the problem is everytime I add a new multifield and click on done, the entire table data is getting refactored to the beginning. All the edited data is getting lost.
How do I retain the data in case if I add a new row or a cell?
OR, in short, how to add a component in a table cell ?@
1 Accepted Solution
Related Conversations
