MATLAB Graphics and App Building

MATLAB graphics, data visualization, and app building

Boost Your App Design Efficiency – Effortless Component Swapping & Labeling in App Designer

Guest Writer: Dinesh Kavalakuntla

Dinesh is a Software Engineer on the MATLAB App Designer team at MathWorks. He began his journey with MathWorks in 2019, bringing with him a strong background in front-end development. Leveraging his expertise, Dinesh has made enhancements to the App Designer Environment, utilizing his front-end skills to optimize user experience. His contributions extend to authoring Custom UI Components and Simulink apps in App Designer, further enriching its functionality. With a keen eye for detail and a passion for creating intuitive user interfaces, Dinesh contributes to enhancing the App Designer experience for MATLAB users.

App Designer is a powerful design environment that enables users to create MATLAB apps interactively. We're continually adding new features to make app building faster and easier. Today, we're unveiling some exciting enhancements that will help you streamline your app layout design process and bring your ideas to life quicker.

1. Empowering Component Replacement in App Designer

Have you spent time configuring a list box only to realize that you should have used a drop-down instead? Are you tired of repeating the same work to set up a new drop-down when it has the same properties as an existing list box? Worry not! We have some exciting news for you. We're expanding the Component Replacement feature to include a wider range of components, making it easier than ever to customize your app.

One common request we’ve received is to enhance the Component Replacement feature to more app components. While the initial version of Component Replacement (R2021b) only supported numeric and text-based components, we’re now extending this functionality to include components such as trees, gauges, switches, list boxes, drop-downs, and more.

With our latest update in R2024a, you will have the ability to replace components with just a few simple clicks. Here’s what you can expect:

  • List box to drop-down & vice versa: Easily switch between list box and drop-down components. The size and properties of the new component are automatically adjusted to ensure a seamless transition.
  • Trees, gauges, switches & more: Similarly, you can convert a tree into a check box tree, a ninety-degree gauge into a circular gauge, and more. Enjoy enhanced flexibility with the ability to replace a wider range of components. Properties are automatically adjusted to maintain consistency and ensure a smooth transition.
  • (from R2021b): Numeric edit field, spinner, slider, and knob
  • (from R2021b) Edit field and text area
  • (from R2021b) Label and hyperlink

2. Adding Labels to Components: Intuitive and Discoverable

Labeled components in App Designer have many benefits, such as automatic grouping and synchronization between the component label and the component name in the code. Have you ever deleted a label and struggled to get it back with those benefits preserved? We’ve made it easier than ever with our new Add Label feature!

Starting from R2023a, you can simply right-click on a component without a label, select the Add Label option, and a new label component will be created and grouped with the selected component.  The placement and default text of this label will match those of a newly created labeled component of the same type. Plus, the keyboard shortcut Ctrl+L (for Windows and Linux) & Cmd+L (for Mac) makes adding labels even faster!

These updates have been designed with user experience in mind, ensuring that designing the layout of your apps in App Designer is as intuitive and efficient as possible. Say goodbye to frustration and hello to a smoother, more streamlined interactive experience! Try out the new features today and see the difference for yourself! We're eager to hear which improvements excite you the most.  Additionally, keep an eye on our blog for more articles aimed at improving app design efficiency. Stay tuned for more insights and updates to elevate your design journey!

  • print


To leave a comment, please click here to sign in to your MathWorks Account or create a new one.