Modify Tab Order of App Designer GUI

63 views (last 30 days)
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.
  1 Comment
Greg on 13 Sep 2018
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!

Sign in to comment.

Accepted Answer

Caleb Benn
Caleb Benn on 10 Jan 2019
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:
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...
  1 Comment
Matthew Schroeder
Matthew Schroeder on 10 Jan 2019
A nice, simple solution. Although it's manual, it won't need to be done often. Thanks.

Sign in to comment.

More Answers (3)

vijaya lakshmi
vijaya lakshmi on 10 Apr 2018
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;
  1 Comment
Matthew Schroeder
Matthew Schroeder on 11 Apr 2018
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!

Sign in to comment.

Syed Hussain
Syed Hussain on 3 Jan 2021
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

Adam Danz
Adam Danz on 9 May 2021
Edited: Adam Danz on 5 Apr 2022
Modifying the stack order of components in App Designer became available in r2020b.
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


Find more on Maintain or Transition figure-Based Apps in Help Center and File Exchange

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!