Main Content

Modularize Your App by Creating a Custom UI Component

Open Script

As the size and complexity of an app increases, modularizing the app can help organize and manage the code. One modularization method is to separate out self-contained portions of your app layout with common functionality as custom UI components.

Some benefits of this method include:

  • Reusability — You can reuse a custom UI component within a single app or across multiple apps with minimal effort.

  • Maintainability — You can reduce duplicate code by componentizing pieces of your app layout that perform similar functions.

  • Scalability — You can more easily extend app functionality when your code is organized into multiple self-contained portions.

Starting in R2022a, you can use App Designer to create custom UI components, and then use those components in your apps. For more information, see Create a Simple Custom UI Component in App Designer.

Example Overview

This example explores an app that allows users to store and modify information about their lab procedures. An app user can update the status or date of a procedure, import data associated with a procedure, and order the procedures based on their titles, statuses, or dates.

The example includes two different ways to create the app in App Designer:

1. As a self-contained app with all layout and behavior code contained in a single app file

2. As a modular app where each lab procedure in the app is represented by a LabProcedure object, which is created as a custom UI component in App Designer

The example contains these files:

  • LabProcedureApp_WithoutComponent.mlapp — Self-contained app file

  • LabProcedure.mlapp — Custom UI component file

  • LabProcedureApp_WithComponent.mlapp — Modular app file

These steps describe how to take the self-contained app and make it more modular by creating and using the LabProcedure custom UI component.

Create the Custom UI Component

To modularize an app by creating a custom UI component, first identify the portions of your app that can be extracted to a separate component file. For example, there are certain characteristics that every lab procedure in the app has in common. These aspects are captured in the LabProcedure custom UI component.

To explore the component code, open the LabProcedure.mlapp file in App Designer.

Lay Out Component

In Design View, lay out the LabProcedure component by adding the features that every lab procedure in the app has in common:

  • A label for the lab procedure title

  • A status drop-down component with the options Not started, Running, Succeeded, and Failed, and a status label

  • A date picker component and a date label

  • A button to import data

  • A button to view data

Program Underlying Component Behavior

In Code View, program the behavior that every lab procedure in the app has in common by adding underlying component callbacks. For example, add a ButtonPushedFcn callback to the Import Data button that allows app users to select a file when they click the button.

Create Public Properties

The app needs access to certain information about each lab procedure. For example, to order the procedures by status, the app needs access to the statuses. Provide this access by creating public properties.

Create these public properties for the component:

  • Title

  • Status

  • Date

Then, write code to associate the properties with the LabProcedure component appearance and behavior.

For more information, see Create Public Properties for Custom UI Components in App Designer.

Create Public Callbacks

The app needs to execute a response when a user interacts with a lab procedure. For example, to update the background color of the procedure based on its status, the app needs to execute a response to an app user changing the status in the drop-down list. Provide the ability for an app creator to program a response to an interaction in the context of the app by creating event–public callback pairs.

Create events with these associated public callbacks for the LabProcedure component:

  • StatusChangedFcn

  • DateChangedFcn

Then, write code to trigger the event and execute the callback when the drop-down component value changes.

For more information, see Create Callbacks for Custom UI Components in App Designer.

Configure Component for Use in Apps

To add the LabProcedure component to the Component Library, click the Configure for Apps button in the Designer tab and fill out the App Designer Custom UI Component Metadata dialog box.

For more information, see Configure Custom UI Components for App Designer.

Use the Custom UI Component in Your App

After you create and configure your custom UI component, incorporate the component into your app.

To explore the app code that uses the LabProcedure component, open the LabProcedureApp_WithComponent.mlapp file in App Designer.

Lay Out App

Replace the portions of the app layout that represent a lab procedure with LabProcedure components. Under the Example Components (Custom) section of the Component Library, drag the LabProcedure components onto the app canvas.

Use the Property Inspector to customize the appearance of each of the procedures in the app. For example, update the Title property of each lab procedure.

Update App Code

Update your app code to refer to the LabProcedure components and to query and set their public properties when needed.

For example, the original example app contains a helper function named updateBackgroundColor. Update this helper function code to change the background color of the LabProcedure component when its status changes. Because the LabProcedure component has a Status public property and an inherited BackgroundColor public property, the updated helper function code is simple and easy to read:

function updateBackgroundColor(app,lp)
    switch lp.Status
        case "Not started"
            lp.BackgroundColor = [0.94 0.94 0.94];
        case "Running"
            lp.BackgroundColor = [0.76 0.84 0.87];
        case "Succeeded"
            lp.BackgroundColor = [0.75 0.87 0.75];
        case "Failed"
            lp.BackgroundColor = [0.87 0.76 0.75];
    end
end

Add Component Callbacks

Add a StatusChangedFcn callback to each LabProcedure component by right-clicking the component and selecting Callbacks > Add StatusChangedFcn callback. Call the updateBackgroundColor and updateProcedureOrder helper functions to update the app when an app user changes the status of a lab procedure.

To run the app, click Run.

Related Topics