An app on a mobile device showing different controls
Introduction to modern controls
Modern controls bring a breath of fresh air to canvas apps. For the longest ever time, canvas apps did not look beautiful unless the developer consciously took specific steps to make them look beautiful. Modern controls look neat by default. Also, it is easy to adapt them to any of the available themes or any custom theme that an organization may have. If you build a canvas app inside Teams, the colors default to the Teams theme. Similarly, if you build a custom page (which is essentially a canvas app), the colors default to the model-driven app color scheme. These controls have a lot of new properties. However, they have lost a few properties that the corresponding classic versions had. While this might seem delimiting, you can achieve most features that you would have with classic controls.
I will be talking about all the modern controls that are available today. The Microsoft team releases new ones often so I will try my best to keep updating this post whenever a new control gets released.
Complete list of modern controls
Here is the list of modern controls:
- Avatar
- Badge
- Button
- Checkbox
- Combobox
- Copilot answer
- Date Picker
- Dropdown
- Header
- Info button
- Link
- Number input
- Progress bar
- Radio group
- Spinner
- Slider
- Stream
- Table
- Tabs or tab list
- Text
- Text input
- Toggle
As I write about each control, I will add links to the individual posts here. So stay tuned!