Finding and highlighting an input in a very long form

How to
#1

Hello,
may I ask a few questions about tables and forms:

1 - Is there a limit for a maximum number of columns in one table?
2 - Can I set focus to a specific input (text) field in a form by clicking on a button in the form (I placed the button widget on the form)?
3 - Assuming a very long form, how can I scroll to a specific field which might be at the end of the form?
4 - Considering the same very long form, can I highlight a specific field but just for a moment and then remove the highlighting? The code from help “doo.model.firstname.setStyle(DooFieldStyle.Warning);” sets the style but it cannot be removed later.
5 - The functions showCategory and hideCategory accept the name of a category to process. Is the name case sensitive? Say, I have a category named “ÁBČ”, then to hide the category I just doo.model.hideCategory(“ÁBČ”)? I just tested it in the Opera browser and I cannot get it working.
6 - Can I somehow get a reference to JS element/input representing an input in the form?

I am asking about all this because when having a very long form with many inputs (say 100+), it might be tedious to scroll all the way down looking for an input you want to edit. Yes, I can split the inputs into several categories but the problem remains - how to find a specific input fast (e.g. by its label fast).

I tried a somewhat hacky way to:
1 - find a JS element representing an input in the form (I used document.querySelector)
2 - scrolling the element into view (works)
3 - setting focus (works)
4 - highlight a label of the input for a brief moment by manipulating its CSS style (works)

Here is the code I have in a button placed on the form:

const el = document.querySelector(`div[test-marker="input-field-TEST"] input`);
if (el) {
  el.focus();
  el.scrollIntoView();
  const prevColor = window.getComputedStyle(el).color;
  doo.model.TEST.setStyle({labelStyle: { color: 'red' }});
  await new Promise(resolve => setTimeout(resolve, 1000)) // not nice but I need to wait for a bit
  doo.model.TEST.setStyle({labelStyle: { color: prevColor }});
}

Tabidoo does not provide such functionality, and using JS functions to locate JS input element seems to be the only way how to do it for now, but it is very fragile because it relies on the div.test-marker class which is used for internal element tagging or something :slight_smile:

Could you suggest a better way (if there is any)?

Thanks,
Libor

#2

Hi,

1 - Is there a limit for a maximum number of columns in one table?
There is an internal limit of 300 fields (columns) per one table.
2 - Can I set focus to a specific input (text) field in a form by clicking on a button in the form (I placed the button widget on the form)?
The focus is set to the first element / field of the form.
3 - Assuming a very long form, how can I scroll to a specific field which might be at the end of the form?
Currently programmatic scrolling in the form using Tabidoo Scripting is not supported. You can of course use vanilla JS as you mention in the “hacky way” section, but we can’t guarantee that it will work correctly in the future.
4 - Considering the same very long form, can I highlight a specific field but just for a moment and then remove the highlighting? The code from help “doo.model.firstname.setStyle(DooFieldStyle.Warning);” sets the style but it cannot be removed later.
You can use this code to remove the highlighting: doo.model.firstname.setStyle({});
5 - The functions showCategory and hideCategory accept the name of a category to process. Is the name case sensitive? Say, I have a category named “ÁBČ”, then to hide the category I just doo.model.hideCategory(“ÁBČ”)? I just tested it in the Opera browser and I cannot get it working.
It is case sensitive (tested on Chrome browser).
6 - Can I somehow get a reference to JS element/input representing an input in the form?
Our forms work with doo.model (data binding between form fields and JS elements) and there is currently no possibility of direct communication with the internal JS element from Tabidoo Scripting.
We will discuss with our colleagues in the development department at the next meeting.

Regards,

Filip

#3

Thank you, getting a reference to the underlying input element would help a lot or even better add a helper method setFocus (which would do scroll-into-view) to doo.model.

something like doo.model.firstName.setFocus(scrollIntoView: bool);

#4

Hi Libor,

Thank you for the suggestion. Soon we should get to redesigning the form perhaps it would be worth considering incorporating this method.

With Regards,

Filip