Create Custom UI Components

Create your own reusable custom UI components for use in apps

Create your own custom UI components to use in your apps or to share with others. You can use custom components to extend existing UI component functionality, to break up large apps into independent and maintainable pieces, and to design an interface for users to customize and reuse a component across multiple apps. Create custom components interactively in App Designer or programmatically by creating a subclass of the ComponentContainer base class. In both cases, you can configure your components to be used interactively in App Designer apps.

Classes

matlab.ui.componentcontainer.ComponentContainer Base class for developing custom UI component objects (Since R2020b)

Methods

`setup`	Set up instance of component container subclass
`update`	Update instance of UI component container subclass after setting properties

Functions

`appdesigner.customcomponent.configureMetadata`	Configure custom UI component for use in App Designer (Since R2021a)
`appdesigner.customcomponent.removeMetadata`	Remove custom UI component from App Designer (Since R2021a)

Topics

Create Components in App Designer

Create a Simple Custom UI Component in App Designer
Walk through the basic steps to interactively create a simple custom UI component.
Create Public Properties for Custom UI Components in App Designer
Create and validate custom UI component property values by specifying data types, default values, and property validation functions.
Create Callbacks for Custom UI Components in App Designer
Create public callbacks for your custom UI component that can be used to program the component behavior in an app.
Define Custom UI Component Startup Tasks in App Designer
Perform one-time startup tasks when a custom UI component is first created in an app.
Verify Behavior of Custom UI Components in App Designer
Verify that the public properties, callbacks, and display of your component appear and behave as expected.
Write Property Set Methods for Custom UI Components in App Designer
Perform custom validation of public properties by writing set methods for those properties.
Create Event Data for Custom UI Component Callbacks
Define event data associated with a callback that provides information about a user interaction.
Write Tests for Custom UI Component
Write automated tests to verify the behavior of a custom UI component.

Create Components Programmatically

Develop Custom UI Components Programmatically
Walk through the basic steps to author a custom UI component class using MATLAB^® functions.
Manage Properties of Custom UI Components Programmatically
Validate property values, optimize how properties update, and customize how properties display for the UI components you author.
Create Custom UI Component With HTML
Use HTML UI components to author custom UI component classes with more flexibility.

Use and Share Components

Configure Custom UI Components for App Designer
Enable interactive use of your custom UI components in App Designer.
Configure Property Display for Custom UI Components in App Designer
Design public properties of your component to enable users to easily use the component in an App Designer app.

Related Information

Define Classes
Developing Chart Classes

Featured Examples

Create Custom UI Component with a Chart in App Designer

Create a custom UI component that allows app creators to plot data in an interactive chart.

Open App

Create Custom Button with Hover Effect Using HTML

Create a custom button component that changes appearance when a user hovers over it in an app.

Open App

Modularize Your App by Creating a Custom UI Component

Modularize an App Designer app by separating out a portion of the layout as a custom UI component.

Open Script