Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Automatically set focus to to new cell when using a table in AEM Designer /LiveCycle

Avatar

Level 1
Please help.
I am using Add Instance to add a row to a table. How can I setFocus to a cell in the NEW row automatically? The only thing I can manage to do currently is set the focus to Row 1 Cell 1. But how can I write a script for a table row that does not actually exists until the user action triggers the row to be added. Currently when I add a multiple rows, the focus will be placed into row 1 every single time. I want each NEW row cell 1 to get the focus.
 
1 Accepted Solution

Avatar

Correct answer by
Level 1

I Cant get this to work.  I have included a sample file here.

View solution in original post

2 Replies

Avatar

Employee Advisor

Hi,

 

To automatically set focus on the first cell of a newly added row in a table:

  1. Assign a unique identifier to the cells in the first column of each row.
  2. Attach an event listener to the action that adds a new row.
  3. After adding the row, use JavaScript to find the first cell in the new row using the unique class or identifier.
  4. Set focus to the first cell using the focus() method.

    Example code that I have found:
    const newRow = document.createElement('tr');
    // Add cells to the new row
    // ...
    const firstCell = newRow.querySelector('.first-cell');
    if (firstCell) {
    firstCell.focus();
    }

Avatar

Correct answer by
Level 1

I Cant get this to work.  I have included a sample file here.