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

In the last blog<\/a>, we saw how we could match the theme of the Dynamics 365 App in PCF when we know what should be the color scheme at the time of designing.<\/p>\n

In this blog, we will see how we can apply the theme to the Fluent UI component dynamically based on the main color set in the Dynamics 365 App Theme record.<\/p>\n

Retrieve theme record<\/strong><\/h2>\n

\nTo know what the main color is set in the theme record, we would need to retrieve the theme record first. Use webApi.retrieveMultipleRecords method in the updateView method of the PCF and on success, render the react component. Pass the object of the theme record to the root main component.<\/p>\n

public updateView(context: ComponentFramework.Context<IInputs>): void {<\/p>\n

\/\/retrieve theme<\/p>\n

let options = “?$filter=isdefaulttheme eq true”;<\/p>\n

this._context.webAPI.retrieveMultipleRecords(“theme”, options).then((result) => {<\/p>\n

this._themeRecord = result.entities[0];<\/p>\n

\/\/ Add code to update control view<\/p>\n

ReactDOM.render(<\/p>\n

React.createElement(App, { context: this._context, themeRecord: this._themeRecord }), this._container);<\/p>\n

}, (error) => {<\/p>\n

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

This theme records contains the maincolor value.<\/p>\n

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

Generate Fluent UI Palette color slots<\/strong><\/h2>\n

We now have maincolor but do not have the palette color slots. We want different shades of the main color, which we saw, in our previous blog<\/a>; we copied the color slots from Fluent UI Theme designer<\/a>.
\nTo generate color slots programmatically, we would need to use ThemeGenerator<\/a> Class.\u00a0 I have created a ThemeProvider.ts as a separate file with the below code.<\/p>\n

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

import\u00a0{<\/p>\n

IThemeRules,<\/p>\n

ThemeGenerator,<\/p>\n

themeRulesStandardCreator,<\/p>\n

}\u00a0from\u00a0‘office-ui-fabric-react\/lib\/ThemeGenerator’;<\/p>\n

import\u00a0{\u00a0getColorFromString\u00a0}\u00a0from\u00a0‘office-ui-fabric-react\/lib\/utilities\/color\/getColorFromString’;<\/p>\n

import\u00a0{\u00a0IColor\u00a0}\u00a0from\u00a0‘office-ui-fabric-react\/lib\/utilities\/color\/interfaces’;<\/p>\n

 <\/p>\n

export\u00a0default\u00a0class\u00a0ThemeProvider\u00a0{<\/p>\n

private\u00a0themeRules:\u00a0IThemeRules;<\/p>\n

constructor()\u00a0{<\/p>\n

const\u00a0themeRules\u00a0=\u00a0themeRulesStandardCreator();<\/p>\n

ThemeGenerator.insureSlots(this.themeRules,\u00a0false);<\/p>\n

ThemeGenerator.setSlot(themeRules.backgroundColor,\u00a0getColorFromString(‘#ffffff’)\u00a0||\u00a0“”,\u00a0false,\u00a0true,\u00a0true);<\/p>\n

ThemeGenerator.setSlot(themeRules.foregroundColor,\u00a0getColorFromString(‘#000000’)\u00a0||\u00a0“”,\u00a0false,\u00a0true,\u00a0true);<\/p>\n

this.themeRules\u00a0=\u00a0themeRules;<\/p>\n

}<\/p>\n

public\u00a0loadThemeForColor(hexColor:\u00a0string):\u00a0void\u00a0{<\/p>\n

let\u00a0col:\u00a0IColor\u00a0=\u00a0{\u00a0str:\u00a0“#0078D4”,\u00a0r:\u00a00,\u00a0g:\u00a0120,\u00a0b:\u00a0212,\u00a0hex:\u00a0“0078d4”,\u00a0h:\u00a00,\u00a0s:\u00a00,\u00a0v:\u00a00\u00a0};<\/p>\n

const\u00a0newColor:\u00a0IColor\u00a0=\u00a0getColorFromString(hexColor)\u00a0||\u00a0col;<\/p>\n

 <\/p>\n

const\u00a0themeRules\u00a0=\u00a0this.themeRules;<\/p>\n

ThemeGenerator.setSlot(themeRules.primaryColor,\u00a0newColor.str\u00a0||\u00a0“”,\u00a0false,\u00a0true,\u00a0true);<\/p>\n

this.themeRules\u00a0=\u00a0themeRules;<\/p>\n

const\u00a0theme\u00a0=\u00a0ThemeGenerator.getThemeAsJson(this.themeRules);<\/p>\n

loadTheme({<\/p>\n

…{\u00a0palette:\u00a0theme\u00a0},<\/p>\n

isInverted:\u00a0false,<\/p>\n

});<\/p>\n

}<\/p>\n

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

This ThemeProvider.ts has \u201cloadThemeForColor\u201d method, which accepts the color string and then generates theme and loads it.<\/p>\n

Load theme in the root component<\/strong><\/h2>\n

Import the above-created \u201cThemeProvider\u201d class in the main root component and then call \u201cloadThemeForColor\u201d method by passing the maincolor that we have retrieved from the Dynamics 365 Theme record. The theme loaded in the root component will get applied to all the child components.<\/p>\n

import\u00a0ThemeProvider\u00a0from\u00a0“..\/ThemeProvider”<\/p><\/blockquote>\n

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

Call \u201cloadThemeForColor\u201d method before any app code. Here I have called this function in the root component\u2019s constructor.<\/p>\n

\u00a0\u00a0\u00a0\u00a0constructor(props:\u00a0AppProps)\u00a0{<\/p>\n

super(props);<\/p>\n

\/\/get\u00a0main\u00a0theme\u00a0color<\/p>\n

let\u00a0mainColor\u00a0=\u00a0props.themeRecord[“maincolor”];<\/p>\n

 <\/p>\n

let\u00a0themeProvider\u00a0=\u00a0new\u00a0ThemeProvider();<\/p>\n

themeProvider.loadThemeForColor(mainColor);<\/p>\n

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

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

This way we can dynamically set the theme for the Fluent UI components.<\/p>\n

Test the app<\/strong><\/h2>\n

Deploy the control to Dynamics 365 environment, change the default theme main color, and publish.<\/p>\n

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

Our component will read this main color form the theme record and will apply the generated theme.<\/p>\n

\"Match<\/a>
\nIn some cases, you may require to modify individual components style. As mentioned in the previous blog<\/a>,<\/strong> we can modify individual component style using https:\/\/github.com\/microsoft\/fluentui\/wiki\/Component-Styling<\/a><\/p>\n

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

We can apply the theme to the Fluent UI component dynamically based on the main color set in the Dynamics 365 App Theme record.<\/p>\n","protected":false},"excerpt":{"rendered":"

In the last blog, we saw how we could match the theme of the Dynamics 365 App in PCF when we know what should be the color scheme at the time of designing. In this blog, we will see how we can apply the theme to the Fluent UI component dynamically based on the main\u2026 Read More: Match theme of Dynamics 365 App in Power Apps Control\u2026 »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,19,2053],"tags":[545,592,1169,1941,1337,1338,1710],"class_list":["post-25363","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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t