Select first field in newly added row automatically?

replied on July 15, 2024

Which designer are you using? This can only be implemented on the classic designer right now.

Generally speaking the simplest way to handle data entry from the user's perspective is to add all of the rows they need first and then mouse navigate to the first row and use tab entry to fill the data within the table.

Auto-focusing the last row of the table is great for row by row data entry but constrains how the table can be used. It is also generally avoided for accessibility purposes, but if these are internal users and a known group it is ok to make a change like this.

0 0

replied on July 15, 2024

This particular form was built with the classic designer.

0 0

replied on July 16, 2024 • Show version history

This code will work for any table with the class "my-table". It also assumes the first column of your table is an html input field. Let me know how it works out!

const dataEntryTable = $('.my-table');
const dataEntryAddRow = dataEntryTable.find('.cf-table-add-row');

dataEntryAddRow.click(function (ev) {
  const activeTable = $(ev.target).closest('.my-table');
  const lastRow = activeTable.find('tr:last');
  const firstColOfLastRow = lastRow.find('td:first input');
  firstColOfLastRow.focus();
});

0 0

Question

Question

Select first field in newly added row automatically?

Replies

Sign in to reply to this post.