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
