{"id":25284,"date":"2020-10-28T13:38:21","date_gmt":"2020-10-28T13:38:21","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=25284"},"modified":"2020-10-30T13:22:46","modified_gmt":"2020-10-30T13:22:46","slug":"match-the-theme-of-dynamics-365-app-in-power-apps-control-framework-part-1","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/10\/match-the-theme-of-dynamics-365-app-in-power-apps-control-framework-part-1\/","title":{"rendered":"Match the theme of Dynamics 365 App in Power Apps Control Framework \u2013 Part 1"},"content":{"rendered":"

Power Apps Control Framework<\/a> is what we are using these days for creating re-usable and configurable custom UI or components in Dynamics 365 Modal driven apps.<\/p>\n

When it comes to designing a component, the Fluent UI is another Microsoft\u2019s tool that empowers developers to use built-in controls like Button, Date Picker, Label, Slider, Textbox, etc.<\/p>\n

If you have observed, you can find these Fluent UI controls automatically adjust to Dynamics 365 app\u2019s default theme.<\/p>\n

What is Dynamics 365 app\u2019s default theme? Follow the below steps and let us first check what the default theme is.<\/p>\n

Navigate to Advanced Settings -> Settings -> Customizations -> Themes<\/strong><\/p>\n

\"Match<\/a><\/p>\n

From the list of themes, open the \u201cCRM Default Theme\u201d which is the default theme of the application. Dynamics 365 app uses these colors in different areas of the application.<\/p>\n

\"Match<\/a><\/p>\n

However, from this list of colors, you will see the main color throughout your application is the above highlighted \u201cMain color\u201d. Now, let us check where you generally see this color.<\/p>\n

Open any entity record, click on \u201cAssign\u201d button, and just observe the color of \u201cAssign\u201d button. It is the same as that of the main color i.e. #3B79B7.<\/p>\n

\"Match<\/a><\/p>\n

Now, hover on the button and just observe if there is any color difference. Yes, there is a difference in color. Button hover color is a bit darker. This darker color is not present in the default theme record. This is an automatically generated color based on the main color.<\/p>\n

\"Match<\/a><\/p>\n

As mentioned above, the Fluent UI controls by default uses the same default theme scheme for the controls. Therefore, we always prefer and recommend you to use Fluent UI controls while working with Dynamics 365.<\/p>\n

Customer may want their business application (Dynamics 365) match with their branding and color scheme. That is why the Themes capability is added to Dynamics 365.<\/p>\n

Let us change the main color in theme and see how the button looks like. (Note: If you want to make any changes in the Theme, copy existing theme and make changes in the new theme.)<\/em><\/p>\n

Change the main color in copy of the CRM Default Theme to #F41C5E<\/p>\n

\"Match<\/a><\/p>\n

After publishing the theme, button starts to appear as below,<\/p>\n

\"Match<\/a><\/p>\n

On hover, the color is a bit darker,<\/p>\n

\"Match<\/a><\/p>\n

Initially, I wondered where this darker color is coming as it is not defined anywhere in the Theme record. Later I found out the logic behind it. Based on the main color, Fluent UI Theme generates different shades of the color. Try Fluent UI Theme Designer<\/a> and change the default primary color; you will see the different color slots.<\/p>\n

\"Match<\/a><\/p>\n

How can we include this behaviour to our Fluent UI control that is being used in PCF or webresource?
\nBecause change in the theme main color will not reflect in our custom developed PCF controls or webresource. It will still appear in the default theme color.<\/p>\n

In this blog, I will illustrate how we can apply Dynamics 365 app theme\u2019s main color scheme to Fluent UI controls in Power Apps Control Framework.<\/p>\n

I am dividing this article into two parts. In this first part, I will show you how to match Dynamics 365 app theme in PCF control when the main color is known, and in the second part I will explain what if the main color is not known and needs a dynamic theme for custom UI.<\/p>\n

Match Dynamics 365 App theme in PCF control when the main\/Primary color is known<\/h2>\n

You are developing a control specifically for one particular customer and you just need to customize for this single customer branding and color. In this case, we already know what color we want to use for controls and it is not necessary to be dynamic because it is going to be develop for the single customer.<\/p>\n

Let us see how we can achieve this,<\/p>\n

Create PCF control and add Fluent UI controls<\/h3>\n

First, create PCF control or webresource and add Fluent UI Controls. You can find various resources over the internet to get started with PowerApps Component Framework and Fluent UI. If you have any existing PCF with Fluent UI project open and get started with that.<\/p>\n

To demonstrate, I have added Fluent UI controls as shown below,<\/p>\n

\"Match<\/a><\/p>\n

Design Theme using Fluent UI Theme Designer<\/h3>\n

Use Fluent UI Theme Designer<\/a> to generate theme. Change the Primary Color and click on Export Theme button.<\/p>\n

\"Match<\/a><\/p>\n

This will open a panel that will provide us auto-generated code. This code we will use in our Fluent UI Project. To get a better understanding you can try and run this in Code Pen using \u201cExport to CodePen\u201d.<\/p>\n

\"Match<\/a><\/p>\n

Update project to load this new theme<\/h3>\n

Add the import statement as shown below in your root component of the project. Root component is the container for all the controls used in the project.<\/p>\n

import\u00a0{\u00a0loadTheme,\u00a0createTheme\u00a0}\u00a0from\u00a0‘@uifabric\/styling’;<\/p><\/blockquote>\n

Then add generated code by Fluent UI Theme designer.<\/p>\n

const\u00a0myTheme\u00a0=\u00a0createTheme({<\/p>\n

palette:\u00a0{<\/p>\n

themePrimary:\u00a0‘#f41c5e’,<\/p>\n

themeLighterAlt:\u00a0‘#fff6f8’,<\/p>\n

themeLighter:\u00a0‘#fdd9e4’,<\/p>\n

themeLight:\u00a0‘#fcb9cd’,<\/p>\n

themeTertiary:\u00a0‘#f9749c’,<\/p>\n

themeSecondary:\u00a0‘#f6356f’,<\/p>\n

themeDarkAlt:\u00a0‘#dc1853’,<\/p>\n

themeDark:\u00a0‘#ba1446’,<\/p>\n

themeDarker:\u00a0‘#890f34’,<\/p>\n

neutralLighterAlt:\u00a0‘#faf9f8’,<\/p>\n

neutralLighter:\u00a0‘#f3f2f1’,<\/p>\n

neutralLight:\u00a0‘#edebe9’,<\/p>\n

neutralQuaternaryAlt:\u00a0‘#e1dfdd’,<\/p>\n

neutralQuaternary:\u00a0‘#d0d0d0’,<\/p>\n

neutralTertiaryAlt:\u00a0‘#c8c6c4’,<\/p>\n

neutralTertiary:\u00a0‘#a19f9d’,<\/p>\n

neutralSecondary:\u00a0‘#605e5c’,<\/p>\n

neutralPrimaryAlt:\u00a0‘#3b3a39’,<\/p>\n

neutralPrimary:\u00a0‘#323130’,<\/p>\n

neutralDark:\u00a0‘#201f1e’,<\/p>\n

black:\u00a0‘#000000’,<\/p>\n

white:\u00a0‘#ffffff’,<\/p>\n

}<\/p>\n

});<\/p><\/blockquote>\n

To apply this theme call\u00a0loadTheme() by passing above theme object\u00a0immediately at app startup before any app code executes.<\/p>\n

loadTheme(myTheme);<\/p><\/blockquote>\n

Run and test changes:<\/h3>\n

This will automatically apply theme to all the Fluent UI controls in the app.<\/p>\n

\"Match<\/a><\/p>\n

If you hover on the control, you will see darker shade of the color, which match with Dynamics 365 app theme.<\/p>\n

\"Match<\/a><\/p>\n

Override applied theme styling:<\/h3>\n

Sometimes you may want few components of the app off theme or with different styles. This you can do by simply applying style to individual control using styles property or using className. Refer following link to learn different ways of applying style to component:<\/p>\n

https:\/\/github.com\/microsoft\/fluentui\/wiki\/Component-Styling<\/a><\/p>\n

Conclusion: <\/strong><\/h2>\n

We see how we can change default theme of Fluent UI Components and match with custom Dynamics 365 App theme when we know the theme is going to be static.<\/p>\n

I hope this will help you.<\/p>\n

In the next part<\/a> of this blog, I will show how to match Dynamics 365 App theme in PCF where the theme color is not going to be static and need to be changed dynamically based on the main color defined in the Dynamics 365 Theme record.<\/p>\n","protected":false},"excerpt":{"rendered":"

Power Apps Control Framework is what we are using these days for creating re-usable and configurable custom UI or components in Dynamics 365 Modal driven apps. When it comes to designing a component, the Fluent UI is another Microsoft\u2019s tool that empowers developers to use built-in controls like Button, Date Picker, Label, Slider, Textbox, etc.\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,19,2053],"tags":[545,592,1169,1941,1337,1338,1710],"class_list":["post-25284","post","type-post","status-publish","format-standard","hentry","category-dynamics-365","category-dynamics-crm","category-power-apps-portals","tag-dynamics-365-crm","tag-dynamics-crm","tag-microsoft-power-apps","tag-pcf-control","tag-power-apps","tag-power-apps-dynamics-365-crm","tag-theme"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/25284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=25284"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/25284\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=25284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=25284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=25284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}