Create Multiwindow Apps in App Designer

A multiwindow app consists of two or more apps that share data. The way that you share data between the apps depends on the design. One common design involves two apps: a main app and a dialog box. Typically, the main app has a button that opens the dialog box. When the user closes the dialog box, the dialog box sends the user's selections to the main window, which performs calculations and updates the UI.

A main app window and a dialog box window with a double-sided arrow between the two

These apps share information in different ways at different times:

When the dialog box opens, the main app passes information to the dialog box by calling the dialog box app with input arguments.
When the user clicks the OK button in the dialog box app, the dialog box returns information to the main app by calling a public function in the main app with input arguments.

Video Walkthrough

For a walkthrough of how to create a multiwindow app in App Designer, play the video.

Video about how to create multiwindow apps in App Designer

This video shows how to create multiwindow apps in App Designer. At a high level, the process consists of building two separate apps and then writing some code to link them together. This example starts with the two apps already built. There is a main app with some plotted data and a button, and a dialog box app with inputs for size and color options.

When the two apps are linked together, the resulting multiwindow app launches the dialog box app when you click the Options button and applies the size and color options to the plot in the main app. To connect the apps together, follow these steps. First, send information from the main app to the dialogue box app when it launches. Then, return information from the dialogue box app to the main app when a user makes changes to the options. And finally, manage the app windows when they close.

First, send information to the Dialog box. Set up the dialog box app to be able to access the sample size and color map data from the main app by accepting that data as app input arguments. This data is used to populate the UI component values in the Dialog box. In Code view, add input arguments using the App Details Dialog box. Specify that the dialog box app takes in the relevant data, a reference to the main app, and the sample size and color map that the plot is currently using.

App Designer creates a Startup function callback that takes in the input arguments. The app calls this function when it first starts up. Use this Callback function to perform some startup tasks. In this case, use the sample size and color map from the input arguments to update the values of the Edit field and dropdown component.

Next, create a private property to store the reference to the main app. In the Startup function callback, store the main app input argument in this private property. After you store the reference, you can access it from anywhere in the dialog box app code by querying app.MainApp. You use this reference later to update the main app plot in response to user input.

Back in the main app, create a button-pushed function callback that launches the dialog box app when a user presses the Options button. Call the dialog box app, and pass in all of the relevant information by using the input arguments that you defined-- the main app, the sample size, and the color map. Make sure only one dialog box can be opened at any given time by disabling the Options button after a user presses it.

Run the main app and launch the dialog box app. The Dialog box is populated based on what the plot shows, but the user-selected options have no effect on the main app. To apply the options when a user edits them, return information to the main app. First, define a new helper function in the main app that updates the plot. Create this helper function to be public, instead of private so that you can call the function from within the dialog box app code.

Define the Public Update Plot function to take in the main app object, as well as the new sample size and color map. Update the plotted data to use these new options. Now, back in the dialog box app code, add a button-push function callback for the OK button. When a user clicks the button, update the plot in the main app with the new options.

Because the Update Plot function is a public function, you can call it from within the dialog box app callback. Pass in all of the relevant inputs-- the reference to the main app that you saved earlier, the sample size from the Edit field, and the color map from the dropdown list. After you update the plot, re-enable the Options button. You can re-enable the button by using the reference to the main app that you stored earlier.

Access the main app Options button using dot notation and set the Enable property. Then, programmatically close the dialog box app. Run the app again. You can now use the Dialog Box to update the plot. When you create an app with multiple windows, a best practice is to update the state of the app when any windows close.

Right now, if you close the dialog box app without first clicking OK, the Options button is stuck in a disabled state. And if you close the main app while the dialog box app is still open, you get an error. To address these issues, add a Close Request function callback to the UI figure associated with each app. This callback executes when the app closes, so you use it to perform some cleanup tasks.

First, in the dialog box app code when the Dialog box closes, re-enable the Options button in the main app. Then, in the main app code, close the dialog box app whenever the main app closes. However, the main app currently does not have access to the dialog box app object. To provide this access, use the same strategy as before.

Store a reference to the dialog box app so that you can use it later. Store the reference by creating a new private property in the main app. Navigate to the line of code that launches the dialog box App. Store the dialog box app object in the property you just created by adding the property as an output argument.

Programmatically close the dialog box app whenever the main app closes. Run the app one last time. Everything works as expected. Closing the dialog box app re-enables the Options button, and closing the main app closes the dialog box app.

Video Player is loading.

Current Time 0:00

Duration 7:02

Loaded: 0%

Stream Type LIVE

Remaining Time 7:02

Overview of the Process

To create a multiwindow app, you must create two separate apps (a main app and a dialog box app). Then perform these high-level tasks. Each task involves multiple steps.

Send Information to the Dialog Box — Write a StartupFcn callback in the dialog box app that accepts input arguments. One of the input arguments must be the main app object. Then, in the main app, call the dialog box app with the input arguments.
Return Information to the Main App — Write a public function in the main app that updates the UI based on the user's selections in the dialog box. Because it is a public function, the dialog box app can call it and pass values to it.
Manage Windows When They Close — Write CloseRequest callbacks in both apps that perform maintenance tasks when the windows close.

To see an implementation of all the steps in this process, see Plotting App That Opens a Dialog Box.

If you plan to deploy your app as a web app (requires MATLAB^® Compiler™), creating multiple app windows is not supported. Instead, consider creating a single-window app with multiple tabs. For more information, see Web App Limitations and Unsupported Functionality (MATLAB Compiler).

Send Information to the Dialog Box

Perform these steps to pass values from the main app to the dialog box app.

In the dialog box app, define input arguments for the StartupFcn callback function. In Code View, in the Editor tab, click App Input Arguments . In the App Details dialog box, enter a comma-separated list of variable names for your input arguments. Designate these inputs:
- Main app — Pass the main app object to the dialog box app so that you can reference functions and properties of the main app from within the dialog box app code.
- Additional data — Pass any additional data defined in the main app that the dialog box app needs access to.
Click OK.
In the dialog box app, add code to store the main app object.
1. First, define a property to store the main app. In Code View, in the Editor tab, select Property > Private Property. Then change the property name in the properties block to MainApp.
  properties (Access = private) MainApp % Main app end
2. Then, in the StartupFcn callback function, add code to store the main app object in the MainApp property.
  function StartupFcn(app,mainapp,sz,c) % Store main app object app.MainApp = mainapp; % Process sz and c inputs % ... end
  For a fully coded example of a StartupFcn callback, see Plotting App That Opens a Dialog Box.
In the main app, call the dialog box app from within a callback to create the dialog box.
1. First, define a property to store the dialog box app. In the main app, in Code View, in the Editor tab, select Property > Private Property. Then change the property name in the properties block to DialogApp.
  properties (Access = private) DialogApp % Dialog box app end
2. Then, add a callback function for the Options button. This callback disables the Options button to prevent users from opening multiple dialog boxes. Next, it gets the values to pass to the dialog box, and then it calls the dialog box app with input arguments and an output argument. The output argument is the dialog box app object.
  function OptionsButtonPushed(app,event) % Disable Plot Options button while dialog is open app.OptionsButton.Enable = "off"; % Get sample size and colormap % ... % Call dialog box with input values app.DialogApp = DialogAppExample(app,szvalue,cvalue); end
  For a fully coded example of a callback, see Plotting App That Opens a Dialog Box.

Return Information to the Main App

Perform these steps to return the user's selections from the dialog box app to the main app.

In the main app, create a public function that updates the UI. With the main app open in Code View, in the Editor tab, select Function > Public Function.
Change the default function name to the desired name, and add input arguments for each option you want to pass from the dialog box to the main app. The app argument, which represents the main app object, must be first, so specify the additional arguments after that argument. Then add code to the function that processes the inputs and updates the main app.
```
function updateplot(app,sz,c) 
    % Process sz and c 
    ...
end
```
For a fully coded example of a public function, see Plotting App That Opens a Dialog Box.
In the dialog box app, call the public function from within a callback. With the dialog box app open in Code View, add a callback function for the OK button.
In this callback, call the public function that you defined in the main app code. Pass the main app object, stored in the MainApp property, as the first argument. Then, pass the additional data that the main app needs to update its UI. Finally, call the delete function to close the dialog box.
```
function ButtonPushed(app,event)
    % Call main app's public function
    updateplot(app.MainApp,app.EditField.Value,app.DropDown.Value);

    % Delete the dialog box  
    delete(app)                  
end
```

Manage Windows When They Close

Both apps must perform certain tasks when the user closes them. Before the dialog box closes, it must re-enable the Options button in the main app. Before the main app closes, it must ensure that the dialog box is closed.

With the dialog box app open in Code View, right-click the app.UIFigure object in the Component Browser and select Callbacks > Add CloseRequestFcn callback. Then add code that re-enables the button in the main app and closes the dialog box app.

function DialogAppCloseRequest(app,event)
    % Enable the Plot Options button in main app, if the app is
    % still open
    if isvalid(app.MainApp)
        app.MainApp.OptionsButton.Enable = "on";
    end
            
    % Delete the dialog box 
    delete(app)             
end

With the main app open in Code View, right-click the app.UIFigure object in the Component Browser and select Callbacks > Add CloseRequestFcn callback. Then add code that closes both apps.
```
function MainAppCloseRequest(app,event)
    % Delete both apps
    delete(app.DialogApp)
    delete(app)              
end
```

Example: Plotting App That Opens a Dialog Box

Open Script

This app consists of a main plotting app that has a button for selecting options in a dialog box. The Options button calls the dialog box app with input arguments. In the dialog box, the callback for the OK button sends the user's selections back to the main app by calling a public function in the main app.