Add UI Components to App Designer Programmatically

Most UI components are available in the App Designer Component Library for you to drag and drop onto the canvas. Occasionally, you might need to add components programmatically in Code View. Here are a few common situations:

Creating components that are not available in the Component Library. For example, an app that displays a dialog box must call the appropriate function to display the dialog box.
Creating components dynamically according to run-time conditions.

When you add UI components programmatically, you must call the appropriate function to create the component, assign a callback to the component, and then write the callback as a helper function.

Create the Component and Assign the Callback

Call the function that creates the component from within an existing callback (for a list of UI component functions, see uifigure-Based Apps). The StartupFcn callback is a good place to create components because that callback runs when the app starts up. In other cases, you might create components within a different callback function. For example, if you want to display a dialog box when the user presses a button, call the dialog box function from within the button's callback function.

When you call a function to create a component, specify the figure or one of its child containers as the parent object. For example, this command creates a button and specifies the figure as the parent object. In this case, the figure has the default name that App Designer assigns (app.UIFigure).

b = uibutton(app.UIFigure);

Next, specify the component's callback property as a function handle of the form @app.callbackname. For example, this command sets the ButtonPushedFcn property of button b to a callback function named mybuttonpress.

b.ButtonPushedFcn = @app.mybuttonpress;

Write the Callback

Write the callback function for the component as a private helper function. The function must have app, src, and event as the first three arguments. Here is an example of a callback written as a private helper function.

methods (Access = private)
    
        function mybuttonpress(app,src,event)
            disp('Have a nice day!');
        end
        
end

To write a callback that accepts additional input arguments, specify the additional arguments after the first three. For example, this callback has accepts two additional inputs, x and y:

methods (Access = private)
    
        function addxy(app,src,event,x,y)
            disp(x + y);
        end
        
end

To assign this callback to a component, specify the component's callback property as cell array. The first element in the cell array must be the function handle. Subsequent elements must be the additional input values. For example:

b.ButtonPushedFcn = {@app.addxy,10,20};

Example: Confirmation Dialog Box with a Close Function

Open App

This app shows how to display a confirmation dialog box that executes a callback when the dialog box closes.

When the user clicks the window's close button (X), a dialog box displays to confirm that the user wants to close the app. When the user dismisses the dialog box, the CloseFcn callback executes.

Example: App that Populates Tree Nodes Based on a Data File

Open App

This app shows how to dynamically add tree nodes at run time. The three hospital nodes exist in the tree before the app runs. However at run time, the app adds several child nodes under each hospital name. The number of child nodes, and the labels on the child nodes are determined by the contents of the patients.xls spreadsheet.

When the user clicks a patient name in the tree, the Patient Information panel displays data such as age, gender, and health status. The app stores changes to the data in a table array.

Documentation