{"id":109401,"date":"2024-05-30T09:07:00","date_gmt":"2024-05-30T16:07:00","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/?post_type=power-apps&p=109401"},"modified":"2024-06-12T20:12:35","modified_gmt":"2024-06-13T03:12:35","slug":"may-2024-updates-for-modern-controls-and-theming","status":"publish","type":"power-apps","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/","title":{"rendered":"May 2024 updates for modern controls and theming"},"content":{"rendered":"\n

Note: This blog is in continuation of the series of modern controls coming to canvas apps<\/a>. You can find the March 2024 updates here<\/a>. <\/em><\/p>\n\n\n\n

Since last update in early April<\/a>, we have continued making critical leaps to enable our app creators to build truly modern apps. We have many exciting announcements \u2013 Updates to modern theming, availability of icon in buttons, more controls in generally available state and ~100 new styling properties across modern controls. These updates are live in preview and will roll out to more regions as per our deployment schedule. Let us dive into details. <\/p>\n\n\n\n

    \n
  1. Updates to modern theming\u00a0<\/strong>\n
      \n
    • Classic controls<\/strong>\u00a0\u2013 Modern theming now applies to more than just modern controls. When you select a modern theme, it also gets applied to classic controls through PowerFx formulas that utilize modern theme variables to set the color properties of classic controls. This allows you to create an app with a more consistent appearance with the click of a single button. And, if you do not like how the modern theme was applied to your app, no problem! You can easily undo the changes by clicking the Undo button once to revert the changes to the classic controls, and a second time to revert the application of the theme to your modern controls.\"ThemeTheme applied on classic control<\/li>\n\n\n\n
    • Vibrancy and Torsion adjustments<\/strong>\u00a0\u2013 When creating or editing custom themes, you can now utilize the Vibrancy and Torsion sliders to adjust the theme palette generated from the seed color you select, especially the colors at the lighter end of the palette. Vibrancy affects how muted or bright the palette is, and Torsion impacts the tint of the color. You can use these sliders to fine-tune your theme.
      \"Vibrancy
      Torsion and vibrancy options in theme<\/li>\n\n\n\n
    • Theme preview<\/strong>\u00a0\u2013 We have also added a theme preview in the \u201cCreate a theme\u201d dialog. This preview shows you how the theme would be applied to various example controls, such as buttons, labels, and input fields. Use the preview to see the effects of your theme choices before you apply them to your app, and experiment with different options until you find the perfect one.
      \"Preview
      Preview of theme on controls<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Icons in button control<\/strong>
      We have enhanced our button control to display fluent icons. Makers have the option to configure icon to render on left, right or render only icon with no text in button. Makers can render icon in outline or filled state. Makers can also rotate icon within a button.\"DifferentExamples for icon in button<\/li>\n\n\n\n
    • More controls are generally available<\/strong>\n
        \n
      • Checkbox<\/strong>\u00a0\u2013 We have taken feedback from our app creators and along with more styling options, we have now provided granular control over checkbox size. With this update, this control is now generally available.\"DifferentDifferent sizes for checkbox<\/li>\n\n\n\n
      • Radio\u00a0<\/strong>\u2013 Similar to checkbox, we also have now provided configuration to update radio button size along with additional style properties making this control generally available for our customers.<\/li>\n\n\n\n
      • Badge<\/strong>\u00a0\u2013 We added the last few remaining align properties making this control generally available. Many app creators want to use badge as buttons, but we recommend using button control for accessibility and we have now also provided more customization to button for the same as described more in styling section below.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • New styling properties on modern controls<\/strong>
        We have started rolling out critical styling properties on controls mentioned below. There will be another major update in a few weeks for more styling properties (refer to upcoming section).\n
          \n
        1. Alignment properties:<\/strong>\u00a0Controls like number input, text input, button and badge have now both vertical and horizontal alignment capabilities.<\/li>\n\n\n\n
        2. Padding properties:<\/strong>\u00a0Majority of modern controls (like text, button, all input controls, checkbox, radio, and link) have now padding properties available.<\/li>\n\n\n\n
        3. Appearance property for input controls:<\/strong>\u00a0Now all input controls have appearance options available to update the desired visual treatment:
          \"Different
          Different appearance properties for input controlsIn long term, this property will also be available at form and theme level, so that makers can set desired style quickly for the whole app.<\/li>\n\n\n\n
        4. Border radius:<\/strong>\u00a0We have made granular border radius property available on button control like left top, right top, left bottom and right bottom radius properties. For all input controls, we have intentionally kept our experience simple and have provided one single radius value for the control to follow with a new property called \u201cBorderRadius\u201d.\u00a0
          \"Example
          Example of border radius
          (PS: Please note that we are rolling back other border properties for few weeks to stabilize them better and re-enable it soon.)\u00a0<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n

          Upcoming enhancements to modern controls and theming:<\/strong> <\/h3>\n\n\n\n

          Our team is hard at work to bring you more goodness to help our app creators build modern apps. Some of the critical investments which will be rolling out in another few weeks are: <\/p>\n\n\n\n

            \n
          1. Styling updates to modern controls \u2013\u00a0<\/strong>We are adding more critical customization properties to modern controls:\u00a0<\/li>\n<\/ol>\n\n\n\n
              \n
            • Fill \u2013\u00a0<\/strong>This property will be available to add or edit background color of all input controls, text control and more.\u00a0<\/li>\n\n\n\n
            • Additional border properties \u2013\u00a0<\/strong>Border color, style, thickness, and radius properties available to all applicable controls including input controls. For some app creators, these border properties were already rolled out, but we are currently rolling them back and will be releasing them again in a few weeks with better stabilization of the feature.<\/li>\n<\/ul>\n\n\n\n

              As always, we are very thankful to our amazing community who consistently provide us with feedback! The feedback is the primary source of these improvements to modern controls and theming capabilities, and we hope to continuously work on this with you all. <\/p>\n","protected":false},"excerpt":{"rendered":"

              Note: This blog is in continuation of the series of modern controls coming to canvas apps. You can find the March 2024 updates here.  Since last update in early April, we have continued making critical leaps to enable our app creators to build truly modern apps. We have many exciting announcements \u2013 Updates to modern theming, availability of icon in buttons, more controls in generally available state and ~100 new styling properties across modern controls.<\/p>\n","protected":false},"author":32,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","power-apps-category":[1549,1551,1656,1664],"power-apps-tag":[],"coauthors":[2360],"class_list":["post-109401","power-apps","type-power-apps","status-publish","hentry","power-apps-category-building-power-apps","power-apps-category-building-ui","power-apps-category-new-features","power-apps-category-uncategorized"],"yoast_head":"\nMay 2024 updates for modern controls and theming - Microsoft Power Platform Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"May 2024 updates for modern controls and theming - Microsoft Power Platform Blog\" \/>\n<meta property=\"og:description\" content=\"Note: This blog is in continuation of the series of modern controls coming to canvas apps. You can find the March 2024 updates here.  Since last update in early April, we have continued making critical leaps to enable our app creators to build truly modern apps. We have many exciting announcements \u2013 Updates to modern theming, availability of icon in buttons, more controls in generally available state and ~100 new styling properties across modern controls.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Power Platform Blog\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-13T03:12:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2024\/05\/Theme-on-classic.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 min read\" \/>\n\t<meta name=\"twitter:label2\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data2\" content=\"Yogesh Gupta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/\",\"name\":\"May 2024 updates for modern controls and theming - Microsoft Power Platform Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2024\/05\/Theme-on-classic.png\",\"datePublished\":\"2024-05-30T16:07:00+00:00\",\"dateModified\":\"2024-06-13T03:12:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#primaryimage\",\"url\":\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2024\/05\/Theme-on-classic.png\",\"contentUrl\":\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2024\/05\/Theme-on-classic.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Power Apps\",\"item\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"May 2024 updates for modern controls and theming\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\",\"name\":\"Microsoft Power Platform Blog\",\"description\":\"Innovate with Business Apps\",\"publisher\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\",\"name\":\"Microsoft Power Platform Blog\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"contentUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"width\":194,\"height\":145,\"caption\":\"Microsoft Power Platform Blog\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"May 2024 updates for modern controls and theming - Microsoft Power Platform Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/","og_locale":"en_US","og_type":"article","og_title":"May 2024 updates for modern controls and theming - Microsoft Power Platform Blog","og_description":"Note: This blog is in continuation of the series of modern controls coming to canvas apps. You can find the March 2024 updates here.  Since last update in early April, we have continued making critical leaps to enable our app creators to build truly modern apps. We have many exciting announcements \u2013 Updates to modern theming, availability of icon in buttons, more controls in generally available state and ~100 new styling properties across modern controls.","og_url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/","og_site_name":"Microsoft Power Platform Blog","article_modified_time":"2024-06-13T03:12:35+00:00","og_image":[{"url":"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2024\/05\/Theme-on-classic.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 min read","Written by":"Yogesh Gupta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/","name":"May 2024 updates for modern controls and theming - Microsoft Power Platform Blog","isPartOf":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#primaryimage"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#primaryimage"},"thumbnailUrl":"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2024\/05\/Theme-on-classic.png","datePublished":"2024-05-30T16:07:00+00:00","dateModified":"2024-06-13T03:12:35+00:00","breadcrumb":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#primaryimage","url":"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2024\/05\/Theme-on-classic.png","contentUrl":"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2024\/05\/Theme-on-classic.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/may-2024-updates-for-modern-controls-and-theming\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/"},{"@type":"ListItem","position":2,"name":"Power Apps","item":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/"},{"@type":"ListItem","position":3,"name":"May 2024 updates for modern controls and theming"}]},{"@type":"WebSite","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/","name":"Microsoft Power Platform Blog","description":"Innovate with Business Apps","publisher":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization","name":"Microsoft Power Platform Blog","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","contentUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","width":194,"height":145,"caption":"Microsoft Power Platform Blog"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/"}}]}},"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Power Platform Blog","distributor_original_site_url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/power-apps\/109401"}],"collection":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/power-apps"}],"about":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/types\/power-apps"}],"author":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/comments?post=109401"}],"version-history":[{"count":1,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/power-apps\/109401\/revisions"}],"predecessor-version":[{"id":109404,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/power-apps\/109401\/revisions\/109404"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media?parent=109401"}],"wp:term":[{"taxonomy":"power-apps-category","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/power-apps-category?post=109401"},{"taxonomy":"power-apps-tag","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/power-apps-tag?post=109401"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/coauthors?post=109401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}