Modify index.html to Set Tab Order

[James@Home]

I am looking for suggestions and feedback regarding methods for setting the tabbing order of controls on a *.gviweb page.  From my brief research it appears I will need to modify the html file generated by G Web post build to achieve the desired result. 

NOTE: I am a long time LabVIEW developer, where this task is simple, but new to G Web.

NOTE: I am also not an experienced webpage designer.   😲   Yet!  😂

Are there other/better options to address tabbing order of controls in G Web?

Next, I am considering the addition (insertion) of a form to specify the tabindex of controls on the page.

<form>
    Field 1 (first tab selection):
    <input type="text" name="field1" tabindex=1 /><br />
    Field 2 (third tab selection):
    <input type="text" name="field2" tabindex=3 /><br />
    Field 3 (second tab selection):
    <input type="text" name="field3" tabindex=2 /><br />
  </form>

example html from here.

However, I have read concerns about this using this method and creating a mismatch between this defined order and that inferred from the DOM.  So, would it be better to just sort the generated html code to correct the tabbing order?

I am hoping to create a solution that can be implemented for pages with a handful of control or ones with nested tabs and hundreds of controls.

Thanks in advance for your feedback.

James

[James@Home · Accepted solution]

An update on a method to solve updating tabbing order.

I decided to try sorting the existing lines instead of adding a new form with tabindex values.

The HTML generated creates a couple of lines for each control and they are not in any recognizable order.  The order might be based upon the order they were created, but I’m uncertain as I was not the original creator of the code.  The attached file illustrates the Initial and Sorted versions of a small section that illustrates the changes to the HTML file for a desired tab order.

For this editing the html file is converted to an array of Lines at the start and back to a string when completed and rewriting the file.

The details of this solution are not universal but provide an outline for one solution.

The control names follow a standard convention with a text description, an underscore and a number.
For examples:  ao-alias_1, ao-unit_1, ao-raw-min_1, ao-raw-max_1

1. Create an array of names for the desired sort order, which doesn't need to be the full name if they are unique [alias, unit, raw-min, raw-max] ensuring to keep the portion immediately preceding the underscore for simplified pattern matching.
2. Read the html file and convert it to a Lines array.
3. Located the section of the html containing the controls that need a tab order adjustment.  For my project, this involved finding a main tab, then a specific tab, then another tab structure and 3 named tabs of interest.  Each of these tabs with its own set of controls and control names to reorder.  Some handy pattern matching text that help me search for and isolate the desired lines include:
   1. <ni-tab-control[~*]+> & </ni-tab-control>
   2. <ni-tab-item[~*]+> & </ni-tab-item>
   3. <ni-layout-panel[~*]+> & </ni-layout-panel><
4. Search the desired section of Lines return ALL the lines beginning with <ni-label ... >.
   I used Match Pattern and <ni-label class[~*]+> for my match pattern.
   Return arrays line number and text.
5. Search the array for control name_number combination and find the ni-control-id='117’ associated with each control.  Build arrays of the controls and associated ID values.  For me this was a 2D array for each control name and number combination.
6. Sort the ni-control-id values based upon the desired tabbing order.  For this project there were rows of controls for each number.  A simple modification to processing the 2D array allowed for easily switching between ordering IDs to tab by rows or columns.
7. Once you have the ID order in a 1D array
   1. Extract (Get Array Subset) lines from the Lines array (keep index and length).
   2. Loop to find each control line the ID in label-id=’##’ and build into an array.
   3. Loop to find each label line the ID contained in ni-control-id='##’ and append to array.
   4. Keep track of the Lines found in both loops.
      Delete these lines from the initial section Lines array.
      Build an array appending the remaining lines to the Lines built in the previous loops.
      Note: the length of the new Lines array section should equal that of the extracted section.
8. Insert the new array into the Lines array at the original index for the extracted section.
9. Convert the Lines array back to text and write to file.

After testing this process by FTPing modified html files to the CRIO, a prebuild VI was modified to locate these file paths and perform the sorting of the html files.  

Note:  These files are in a completely different hierarchy with the G Web development than the RT project and are only linked as part of a web service in the build specification.

[James@Home]

Follow-up as it is somewhat related...

I have my new tabbing order working but ran into a new issue related to the appearance of controls when they get focus.  My .css file already had specifications to modify the appearance with hover: and I wanted similar visual effects when tabbing focus: between the controls.  This works great for Type: String, Numeric Text & Button, however, not with LED.

Even though I can tab to and past the column of LED controls, I cannot get any styles to apply to the LED.   I can verify the focus is on the LED by pressing the space bar to toggle its value.

Does anyone know if the LED Type is excluded by design from accepting focus?

I have also tried focus-visible: with the same results.

Thanks for any suggestions.

James

PS. I'd hate to restart by setting up a tabindex for all controls because of an issue with LED Type.

[MilanR · Accepted solution]

---

Even though I can tab to and past the column of LED controls, I cannot get any styles to apply to the LED. [...] I have also tried focus-visible: with the same results.

---

Maybe :focus-within would help?

[James@Home]

Thank you Milan for prompting me to try this!!

I had read about :focus-within and mistakenly discarded the idea based upon a description I read here!  

It was the solution I needed for this stubborn control.

Thanks again!!

James

[MilanR]

Awesome, that's good to hear. Sounds like you have an approach for the current application you are working on. Some thoughts for others who may have similar questions around configuring tab order in G Web:

• The editor does not expose settings to configure the tab order and the controls don't have great tab focus indicators as has been seen in this thread. This is a feature gap in G Web.
• Consider using Flexible Layout Panels instead of Absolute Layout Panels. For Flexible layout panels the DOM order (and therefore tab order) is important for the layout system and controlled by the editor so you are more likely to have a tab order that is "reasonable", i.e. ordered as the content flows visually on the page. Flexible Layout panels also tend to be more user friendly as they can be designed to respond to various screen sizes just via configuration in the editor.
• If you need a way to reference a control from the "HTML Context", i.e. from CSS, JS, or generated .html files, prefer using the HTML class attribute feature. There is not a guarantee that the generated ni-control-id you see in HTML is stable (that controls will always have the same ni-control-id after placing on a panel the first time).
  
  Note: In early versions of LabVIEW NXG Web Module the ni-control-id was shown in the editor as a way to reference controls. This is no longer a stable identifier or shown in the editor and leveraging HTML class attribute should be done instead.
  
  Potentially relevant sidenote, you can define multiple classes in the field by space separating them:
  
• I would not recommend trying to manually configure tabindex values on the controls in the generated HTML. The controls manipulate tabindex values programmatically for certain interactions and overriding them manually may have unintended behavior (beyond being pretty difficult to maintain globally with lots of controls).

[James@Home]

Milan,

Thank you for the additional feedback and suggestions.

For the current G Web capabilities, sorting the HTML provided a better solution than letting the editor control tabbing order.  In addition, this solution allowed me to setup a section of related controls to tab by rows and another section to tab by columns.

Thanks again!!

James