Modify Tab Order of App Designer GUI

I have a need to modify the tabbing order of a GUI developed with App Designer. I attempted to use uistack to change the order of the figure's children, but this function is apparently not supported with uifigure.

[Greg]

I would also appreciate a solution to this question!

Having focus jump all over the app when you press the "tab" key is quite annoying. This was such an easy thing to adjust in GUIDE, but I can't find a feature for it in App Designer.

I even tried opening up the .zip-file and modifying the order of the UI elements in the code in the "document.xml" file, which appeared to work at first, but then as soon as I opened my App in App Designer again, the tool immediately reverted the components to their original order!

Answer 1

[Adam Danz]

> I attempted to use uistack to change the order of the figure's children

R2023a

Starting in MATLAB R2023a you can use uistack with ui components in a uifigure such as in App Designer.

R2022a

MATLAB R2022a provides new tools for setting tab order in apps and also provides a new function focus(c) to programmatically set focus to a UI component c.

More info

• Community Highlight: focus in R2022a
• Community Highlight: tab order in R2022a
• Summary of alternatives in earlier releases

R2020b

Modifying the stack order of components in App Designer became available in r2020b.

https://www.mathworks.com/matlabcentral/answers/406651-how-do-i-change-the-order-of-objects-in-the-app-designer-component-browser#answer_558713

[Matthew]

Thank you for updating this answer! I changed the Accepted Answer to yours from my old account, and now commenting from my new account. 👍

Answer 2

[Caleb Benn]

This is obviously way after you needed this but I hope this helps someone!

So I was having the same problem, and I stumbled on this workaround:

https://www.mathworks.com/matlabcentral/answers/406651-how-do-i-change-the-order-of-objects-in-the-app-designer-component-browser

Summary: cutting and pasting (ctrl+x then ctrl+v) any "component," such as a label, button, table, etc. maintains its previous location and places that element at the bottom of the list in the component browser. It just so happens that the order components appear in the component browser, from top to bottom, is the same order in which you tab through those components when your run your app.

Thus if you cut and paste every element in the order you want to tab in, you will have succesfully reordered your tabbing order! A bonus is that you probably now have your component browser reorderd in a slightly more logical way...

[Matthew Schroeder]

A nice, simple solution. Although it's manual, it won't need to be done often. Thanks.

[piston_pim_offset]

@Caleb Benn your idea works for tab ordering, hence it changes the names of edit fields.

Answer 3

[vijaya lakshmi]

Hi Matthew,

The ability to reorder tabs in a tab group is not currently available using the App Designer graphical interface; however, it is possible to do this programmatically.

The "Children" property of a Tab Group object is an array that contains the Tab objects inside the Tab Group, and the order of the Tab objects within this array corresponds to the order that the tabs are displayed in the GUI. Therefore, if you reorder the Tab objects within the "Children" property, this will change the order in which the tabs are displayed.

Below is the simple code snippet that contains a Tab Group with three tabs. It changes the order of the tabs from "1,2,3" to "2,1,3".

f = uifigure;
tgroup = uitabgroup(f);
tab1 = uitab(tgroup);
tab2 = uitab(tgroup);
tab3 = uitab(tgroup);
tab1.Title = 'Tab One';
tab2.Title = 'Tab Two';
tab3.Title = 'Tab Three';

A=tgroup.Children;  % A is the array that has order of tabs
B=A; % B is the array that will store the tab positions temporarily

A(3) = B(1);
A(1) = B(3);
tgroup.Children = A;

[Matthew Schroeder]

Vijaya,

Thank you for your response. However, you misunderstood my question. I'm not interested in changing the order of the tabs in a uitabgroup. I'm interested in changing the order in which any uicontrol receives focus as the user presses the tab key. In my interface, I have several Edit Fields that I want to receive focus in a particular order using the tab key.

I hope you also have a solution for this!

Answer 4

[Syed Hussain]

Hi

You can use the uitab.Children property

Let say you have 3 tabs

tab1 tab2 tab3

you would like to arrange it as follows

tab2 tab3 tab1

you can use the following

tabs = app.Maintab.Children;
modified_tabs = [tabs(2);tabs(3);tabs(1)];
app.Maintab.Children = modified_tabs;

Hope this helps