When using an editable detail in Creatio, the default behavior when the user is tabbing through the editable columns and reaches the end of a row is to move to the next row. However, if the user tabs past the end of the last row in the detail, by default a new row will get created. This is a nice way to allow users to enter multiple records quickly but can also cause extra records to get created unintentionally.
To change this behavior, we can look at the onTabKeyPressed in the ConfigurationGridUtilities module. There we see that if the user is in the last editable column of the detail and presses tab, that it will either select the next row, or if the user is already on the last row, a new row will get created. Unfortunately, we can’t just override this and change the behavior of adding the new row, but we can replace the function completely with that part removed. To do so, simply open your detail schema and place the following code into the methods:
onTabKeyPressed: function() {
var activeRow = this.getActiveRow();
if (this.currentActiveColumnName === this.getLastEnabledColumn(activeRow)) {
this.unfocusRowControls(activeRow);
var gridData = this.getGridData();
var gridDataCount = gridData.getCount();
var activeRowIndex = gridData.indexOf(activeRow);
if (activeRowIndex !== gridDataCount - 1) {
this.selectNextRow(activeRow, gridData, activeRowIndex);
}
return false;
}
this.currentActiveColumnName = this.getCurrentActiveColumnName(activeRow, this.columnsConfig);
return true;
}
Now, when the user presses tab, it will still advance to the next row when at the end of a row. If the user is on the last row, no new row will get added – and in this case basically nothing will happen, the last column will remain focused. Additionally, the user can still add new rows by clicking the add button as they would normally.
Added Bonus – Tab on Last Row, Go Back to First Row
The above is all you really need. As an added bonus, we can also make it loop around, if you tab while on the last row, instead of doing nothing, go back to the first row again. To do this, we need to add another function that controls the saving of the current row and then selecting the first row. With that new function, we’ll also modify the function above. That will look like this:
onTabKeyPressed: function() {
var activeRow = this.getActiveRow();
if (this.currentActiveColumnName === this.getLastEnabledColumn(activeRow)) {
this.unfocusRowControls(activeRow);
var gridData = this.getGridData();
var gridDataCount = gridData.getCount();
var activeRowIndex = gridData.indexOf(activeRow);
if (activeRowIndex !== gridDataCount - 1) {
this.selectNextRow(activeRow, gridData, activeRowIndex);
}
else {
this.selectFirstRow(activeRow, gridData, activeRowIndex);
}
return false;
}
this.currentActiveColumnName = this.getCurrentActiveColumnName(activeRow, this.columnsConfig);
return true;
},
selectFirstRow: function(activeRow, gridData, activeRowIndex) {
Terrasoft.chain(function(next) {
this.saveRowChanges(activeRow, next);
}, function(next) {
this.activeRowSaved(activeRow, next);
}, function() {
var newActiveRow = gridData.getByIndex(0);
this.setActiveRow(newActiveRow.get("Id"));
this.setDefaultFocus(newActiveRow);
}, this);
}
With the above in place, you’ll get this behavior:
