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

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:

• Complex Form — Mortgage Loan Application


• Multi-part Form Navigation and Real-time Completion Status


• Progress Bars (Progress Indicator)


• Studies in Navigation

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… ). 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

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” 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.