Understanding Callbacks

Callbacks are functions that execute in response to specific user interactions with UI components within an app. They are the primary mechanism for defining application behavior, such as plotting data when a button is pressed or updating a display when a slider is moved.

While most interactive components support atleast one callback tied to a specific event, static components like labels or indicator lamps typically do not, as they serve a display-only purpose. To identify available callbacks for a component, select it in the layout and inspect the Callbacks tab within the Component Browser.

Generating Callback Functions

There are several workflows available to create callbacks depending on your current focus in the App Designer environment:

• Context Menu: Right-click a component in the canvas, Component Browser, or App Layout pane. Navigate to Callbacks and select Add CallbackProperty Callback.
• Component Browser: Select the Callbacks tab. Use the dropdown menu next to a callback property to name a new function or select a default name enclosed in angle brackets (e.g., <ValueChangingFcn>). If the app already contains callbacks, you can select an existing one to reuse logic across multiple components.
• Code View: In the Editor tab, click the Callback button. Alternatively, use the + button in the Code Browser's Callbacks section. In the resulting dialog, configure the following:
  • Component: The UI element triggering the logic.
  • Callback: The specific property linking the function to an interaction (e.g., ValueChangedFcn vs ValueChangingFcn).
  • Name: The function identifier. While a default is provided, it can be customized. A dropdown arrow appears if existing callbacks are available for selection.

Programming Callback Logic

Once a callback is created, App Designer generates the function stub in Code View. You implement the specific behavior within this function.

Callback Arguments

All standard callbacks in App Designer include two specific input arguments:

• app: The application object, providing access to all UI components and custom properties.
• event: An object containing details about the specific interaction event.

Use the app argument to manipulate other components using dot notation:

app.Component.Property = NewValue;

For instance, to set a gauge named PressureGauge to a specific value:

app.PressureGauge.Value = 50;

The event argument provides context relevant to the specific event. For example, in a slider's ValueChangingFcn, the event object contains a Value property reflecting the slider's current position during the drag operation.

Below is an example of a callback that updates a gauge in real-time as the user drags a slider:

function SliderValueChanging(app, event)
    currentInput = event.Value; % Retrieve current slider position
    app.PressureGauge.Value = currentInput; % Update the gauge
end

Data Sharing Between Callbacks

To share data across different callback functions, define properties within the app. Properties act as storage for data belonging to the app instance. You can create private properties for internal use or public properties if external access (by scripts or other apps) is required.

To add a property, click the Property button in the Editor tab of Code View, specify a name, and access it using app.PropertyName in any callback.

Reusing Callbacks Across Components

Sharing a single callback among multiple components is efficient when different triggers should execute the same logic (e.g., a button click and an "Enter" key press in an edit field).

To achieve this, select multiple components (e.g., a slider and an edit field), right-click one of them, and choose Callbacks > Add ValueChangingFcn Callback. App Designer assigns the new function to all selected components. Alternatively, assign an existing callback to another component by right-clicking the target component, selecting Callbacks > Select Existing Callback, and choosing the function from the list.

Programmatic Callback Assignment

You can also create and assign callbacks programmatically within your app code. This is useful for components created dynamically at runtime, such as dialog boxes or graphics objects not listed in the Component Browser.

First, define the logic as a private function via Editor > Function > Private Function. The function must accept app, src, and event as the first three arguments:

methods (Access = private)
    function handleDialogClose(app, src, event)
        disp('Operation complete.');
    end
end

Assign the callback using a function handle. The following example assigns handleDialogClose to the CloseFcn of an alert dialog:

uialert(app.UIFigure, "File not found", "Error", ...
    "CloseFcn", @app.handleDialogClose);

Passing Additional Arguments

To pass extra data to a callback, include the additional arguments in the function definition. When assigning the callback, use a cell array where the first element is the function handle and subsequent elements are the extra arguments.

methods (Access = private)
    function logMessage(app, src, event, dialogType)
        msg = dialogType + " dialog closed";
        disp(msg);
    end
end

% Assignment with extra argument
uialert(app.UIFigure, "File not found", "Error", ...
    "CloseFcn", {@app.logMessage, "Error"});

Locating and Managing Callbacks

Searching

In apps with numerous callbacks, use the search bar at the top of the Code Browser's Callbacks tab. Typing a partial name filters the list. Clicking a result navigates to the function; right-clicking and selecting Go To places the cursor inside it.

Modifying and Disconnecting

To reassign a component to a different callback, select the component, open the Callbacks tab, and choose a new function from the dropdown. To disconnect a callback without deleting the code, select <No Callback> from the dropdown. This unlinks the function from the component but leaves the definition intact for other components to use.

Deletion

If a callback function is no longer used by any component, it can be removed entirely. Right-click the function in the Code Browser's Callbacks tab and select Delete.

Example: Slider-Driven Gauge

The following example demonstrates an app where a gauge updates dynamically as the user interacts with a slider. The slider's ValueChangingFcn retrieves the current value from the event argument and updates the gauge's Value property immediately.

function SliderValueChanging(app, event)
    % Get the current position of the slider
    currentPosition = event.Value;
    
    % Update the gauge to reflect the slider position
    app.StatusGauge.Value = currentPosition;
end