How to change the order when moving components on the App Designer using the Tab key on the keyboard

I added an additional component after installing the component on the App Designer, but I can't find the property that modifies the movement order when the Tab key on the keyboard is clicked.

Where in the Inspector can I modify the tab key movement order?

Answer 1

[TADA]

Apparently there is no straight forward way of doing that.

It seems that the tab-order is controlled by the order of adding components to the uifigure. This is further complecated by the fact that app designer won't let you edit the code that does that. This behaviour is in fact a good thing as the code is automatically generated by the designer ecah time you change something, so if you did change the code only to have your changes reverted it would be extremely annoying.

This is all quite annoying, but you can tackle this using one of two workarounds:

1. You can cut and paste all components in the designer so that they are added to the app in the order you want them to be tabbed in runtime as described here: Modify Tab Order of App Designer GUI - MATLAB Answers - MATLAB Central (mathworks.com)
2. You can add a startup callback function to the app, then in this function reorder the children of the UIFigure, see sample code. This workaround will probably get more complecated when panels and tab groups are used so...

classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure         matlab.ui.Figure
        EditFieldLabel   matlab.ui.control.Label
        EditField        matlab.ui.control.EditField
        EditField2Label  matlab.ui.control.Label
        EditField2       matlab.ui.control.EditField
        SpinnerLabel     matlab.ui.control.Label
        Spinner          matlab.ui.control.Spinner
        DropDownLabel    matlab.ui.control.Label
        DropDown         matlab.ui.control.DropDown
        Button           matlab.ui.control.Button
    end

    % Callbacks that handle component events
    methods (Access = private)

        % Code that executes after component creation
        function startup(app)
            % get the ui figure children vector
            children = app.UIFigure.Children;
            
            %
            % remove the children you want to reorder from this vector
            %
            children(children == app.Button) = [];
            children(children == app.EditField) = [];
            children(children == app.EditField2) = [];
            children(children == app.Spinner) = [];
            children(children == app.DropDown) = [];
            
            
            %
            % add the controls in the correct tab-order
            % the tab order I applied makes no sense other than to show
            % that it can be done.
            %
            % notice that the vector is flipped because the last control in
            % the list will actually be tabbed first.
            %
            tabOrderChildren = flip(vertcat(app.Button, app.EditField, app.EditField2, app.DropDown, app.Spinner));
            
            %
            % now give the uifigure the new children vector, notice that we
            % also use the vector from which we removed all the controls,
            % because all the labels are there.
            % 
            app.UIFigure.Children = vertcat(children(:), tabOrderChildren(:));
        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'UI Figure';

            % Create EditFieldLabel
            app.EditFieldLabel = uilabel(app.UIFigure);
            app.EditFieldLabel.HorizontalAlignment = 'right';
            app.EditFieldLabel.Position = [21 419 55 22];
            app.EditFieldLabel.Text = 'Edit Field';

            % Create EditField
            app.EditField = uieditfield(app.UIFigure, 'text');
            app.EditField.Position = [91 419 100 22];

            % Create EditField2Label
            app.EditField2Label = uilabel(app.UIFigure);
            app.EditField2Label.HorizontalAlignment = 'right';
            app.EditField2Label.Position = [18 373 62 22];
            app.EditField2Label.Text = 'Edit Field2';

            % Create EditField2
            app.EditField2 = uieditfield(app.UIFigure, 'text');
            app.EditField2.Position = [95 373 100 22];

            % Create SpinnerLabel
            app.SpinnerLabel = uilabel(app.UIFigure);
            app.SpinnerLabel.HorizontalAlignment = 'right';
            app.SpinnerLabel.Position = [26 311 47 22];
            app.SpinnerLabel.Text = 'Spinner';

            % Create Spinner
            app.Spinner = uispinner(app.UIFigure);
            app.Spinner.Position = [88 311 100 22];

            % Create Button
            app.Button = uibutton(app.UIFigure, 'push');
            app.Button.Position = [52 263 100 22];

            % Create DropDownLabel
            app.DropDownLabel = uilabel(app.UIFigure);
            app.DropDownLabel.HorizontalAlignment = 'right';
            app.DropDownLabel.Position = [14 207 66 22];
            app.DropDownLabel.Text = 'Drop Down';

            % Create DropDown
            app.DropDown = uidropdown(app.UIFigure);
            app.DropDown.Position = [95 207 100 22];

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = app1

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            % Execute the startup function
            runStartupFcn(app, @startup)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

[TADA]

Honestly, I would expect Mathworks to add a TabIndex property to the controls, hopefully its on their to-do list