The PowerApps Portal is a game-changer in Dynamics 365 CRM that allows capabilities to integrate the Power Apps Portal with Dynamics 365 environment. In addition, it allows customers to see their records like Customer Information, Invoices, etc.
The major part of PowerApps Portal is the intuitive and user-friendly UI. Microsoft also enhances the Portals in such a way that users can configure the Pages, Web Templates, etc. on Portal using the Portal Designer. In the earlier days, in case we needed to change the UI then we had to make changes in “theme.css” by opening that file and updating content in it, which was more inclined towards development.
Now there is a new feature in the Portal Designer that will allow you to setup new themes for the portal and update the colors using the UI itself. It will allow you to use the color picker to set properties for the header, footer, etc.
You can check this new feature using the below steps:
1- Navigate to https://make.powerapps.com
2- Select the environment where the portal is configured.
3- Select Apps and then Click on Portal App where Type is Portal. Once you select it, there is an EDIT option is More Commands. On click of it, you will be redirected to Portal Designer.
4- In Portal Designer, you need to click on the “pencil/brush” icon that is called Theme.
5- It will show the Themes option where you have to “Enable basic theme” as shown in the below screen clip.
6- In this step, we will explore the option to customize the new theme.
There is an option under themes in Portal Designer to create New Theme or Save As the OOB Preset. The “+ New theme” creates the new theme by referring “Blue” OOB theme properties.
7- Once you click on the right side, the theme properties are editable to set the custom color in hex format. On click of highlighted option, it open the Color Picker.
*Note: You can SaveAs the custom theme by clicking more option there is an option to Save As.
When the color picker is open you need to select the color, or you can directly paste the hex code in the text box.
If you have opened the color picker, select the required color and click again on the highlighted icon to close the color picker.
8-Once you make the updates in properties, just click on Browse Websites and your updates would apply to the portal.
9- When the new custom theme is created there is a new CSS file created called “new-theme-1.scss.”
10- You can find the “new-theme-1.scss” record with the attachment of the file as a note in Web Files table under the Portal Management app in Dynamics 365 CRM.
The source code of the file looks like below:
$primaryColor: #292f33;
$headerColor: #fbbc05;
$headerMenuColor: #ffffff;
$headerMenuHoverColor: #292f33;
$bodyBackground: #ffffff;
$footerColor: #f4f4f4;
$footerTextColor: #333333;
11- We downloaded the “new-theme-1.scss” file with the Notes attachment, change the header properties in code, and uploaded back in the same note in the “Custom Theme” web file by deleting the previous note and replacing it with the new one.
*Note: Take backup of the file before making any modifications in it.
$primaryColor: #292f33;
$headerColor: #EA4335;
$headerMenuColor: #ffffff;
$headerMenuHoverColor: #292f33;
$bodyBackground: #ffffff;
$footerColor: #f4f4f4;
$footerTextColor: #333333;
12- Then on click the “Sync Configuration”, it will start showing the updated custom theme.
13- On click of the “Browse Website”, the portal will be loaded with the updated code.
*Note:
- Currently, there is no option to edit the Custom Theme in Portal Designer. Also, do not edit the “portalbasictheme.css” as it is recommended by MSFT and you can find it in comments in the same file.
- In case changes are not reflecting the portal side, clear the cache. Refer to the below link for the same.
https://docs.microsoft.com/en-us/powerapps/maker/portals/admin/clear-server-side-cache
Conclusion
Color Picker and Information of custom “scss” files would be useful to make changes in the portal and provide a better UI experience to the customer. We have now understood how to use Color Picker and Custom Theme in Portal Designer in the Dynamics 365 PowerApps Portals.
