Managing Field Focus for rapid data entry

Questions
1

Working on my big data entry page, and trying to get tabs to move field to field, in/out of table.

I have a page with a form in the header, and a table below.
I was able to cobble together some tips from earlier questions to get the first form field set as focus on page load. (Used the event “Skuid Page: Rendered”, ended up having to put in a setTimeout() delay for half a second to get it to work.)

I have tab-to-next field working for the form fields working on the top, but need to have tab from the ‘last form field’ move to the first field in a table. (The table needs to be created when an ‘amount’ field is entered on the form, that’s another problem)

I found an old community answer for getting to the table, but it doesn’t work as shown (probably v1 from 2017, Is it possible to navigate to first field on the first row as a new row is added to a table? )
At present, tabbing from the form goes to the header of the table, and the the footer and never goes INTO the table.

I gather one still needs to use the arrow keys to move around inside the table. That might be workable, but I need to get into the table first.

I gather there’s no action framework way to check when one field is exited and another is entered.

Thanks

2

Hey Seth! What mode is your table in? Try changing it to data grid mode if it’s not already and see if that changes the tab behavior.

There’s not currently an action framework way to know when a component is tabbed out of/ into. I’m curious if anyone else has solved for tabbing between components :thinking:

That old post is probably using v1 pages, where the components worked a little differently.

With the table needing to be created - I’d just have a render condition on the table to hide it when the amount field is blank. You can also have a model action that runs when the amount field is updated to create a new row in that table model if desired.

Seems like you’ve figured out the tabbing within the form pretty well, but here’s a recap

  • Form or Table in Edit mode: arrow keys with enter to open field and esc to leave
  • Table in Data grid mode: tab

Source: Navigate within a v2 table - Skuid Docs

It sounds like you might be building a form/wizard/process flow - we have a ton of great resources about complex forms and wizards, including a Skuid Skool course and a lot of sample pages in Github like:

3

Hi Anna,

  • Support, via our rep suggested the data grid mode. It helps a lot. The arrows move around the grid as expected. It’s odd to me to have move from cell to cell, even if the cell is read-only. Seems like users would be expecting it to move from input-field to input-field. So as it is, I’m thinking I’ll have to resort to having one template field with all the read-only fields, so there’s only one read-only field to tab thru. (but then you can’t do columns in a template field…)

  • I just tried the model action that runs when the amount field is updated, and it runs each time a digit is entered. I need the action to run when the amount is complete (field exited). I need to run an action/JS based on the total of the amount field, distributing it across multiple new model rows ie. User enters $100, that gets distributed between 3 new model rows, $50, $30, and $20. So calling it with each digit won’t help.

There really should be an action for ‘onfocus/onblur’ and to explicitly set tab order values (very easy for me to say… :grinning:). It’s all in the underlying JS functionality. As it is, I think I need to use the custom renderer to get it done. The doc renderer samples show how to do it.

I’m working on getting the custom rendering feature enabled for our org. (It seems it needs to be enabled, at least the docs say ‘talk to your rep’)

  • Regarding tab-order, It’s working for the ‘form’ portion, but going from the form ‘into’ the data grid, you have to tab thru all the column titles to get to the first data row, then tab thru the read-only fields to get to the data fields.

Ideally, hitting enter after entering entering a value, would do the same as a and move to the next field. Having to use a mouse KILLS productivity.

  • I’m trying to avoid a wizard, with multiple steps/pages/tabs. The first step is like 2 ‘required’ values with 4 optional, and the 2nd step would be a table with up to 300-400 rows. (most of our donors only have <10 rows). Point being there’s a huge screen size difference needed for the wizard steps.

Currently, I have a page with the ‘header’ being some informational read-only data (account, batch name/totals) and the 2 required fields and 4-6 optional fields. I’m trying to have the bottom of the page populate after the amount field is finished being entered.

  • I’ll take a detailed look at the sample pages. First glance, seem like I already bumped into them.

Thanks for any insights

1 Like
4

Oh right, I forgot that the on-edit model actions run every time you make one change… this is why it would be great to have a “wait 1s action” :joy: You could have a “generate table” button / button field or something

I’m passing on your insights to the product team because it seems like there are some interesting product enhancement ideas in there.