PowerObjects Blog 

for Microsoft Business Applications


Change the Appearance of your Power Apps Portal using the Power Apps Portal Studio

Post Author: Alvaro Pino Freire |

Power Apps Portal Studio has some built-in functionality that will allow citizen developers to change the appearance of a website without writing code. In today’s post, we explore how it’s done.

Upload a New Logo:

1. Log on to your Power Apps environment and navigate to the Apps Page.

2. Select your Portal App and hover over the ellipsis ( … ) icon to select Edit from the menu.

Graphical user interface, application, Teams

Description automatically generated

3. The Power App Studio will open in a new tab. Click on the logo icon on the header. A panel will open on the right.

4. Click on Upload image to upload your icon.

Graphical user interface, text, application

Description automatically generated

5. The new image will appear. Repeat Steps 3 and 4 to replace any image or make use of the + on the left menu to add an Image component.

Graphical user interface, application

Description automatically generated

Change text:

6. Select a text component on the portal and you will be able to change its Text and its alignment on the right side panel.

Graphical user interface, application

Description automatically generated

Change Basic Theme:

Let’s now create a custom basic theme that will allow us to set colour values for several places on our portal in a simple step.

7. Click on the Theme icon on the left panel on the Power Apps Portal Studio.

8. Enable basic theme.

9. Select the Basic tab and click New theme.

10. On the right side panel, set a name and click on colour palettes to open a colour picker menu (11).

Graphical user interface, application

Description automatically generated

Note that if the colour selected does not have enough contrast with the background colour, a warning message will be displayed (13).

Graphical user interface, text

Description automatically generated

Creating a new basic theme will create a Web File record on the Portal Management model driven app.

Graphical user interface, application, table, Excel

Description automatically generated

This Web File will have attached a file as a note where the source will sit. Editing the new custom theme on the Power Apps Portal Studio will replace the note file.

In these simple steps we were able to see how very easily we can change the appearance of our website, but very likely this will be insufficient to change the look and feel of the portal to your requirements. To further tune the portal to your branding you will have to add custom CSS files.

This can be done by clicking on the theme icon on the left panel of Power Apps Portal Studio and selecting the Edit CSS tab (14). Click Upload custom CSS (15) to upload your custom CSS file. To edit your CSS files, click on the required file and the editor will open the source code (16). Keep in mind that Microsoft recommends not to change the portalbasictheme.css.

Graphical user interface, text, application

Description automatically generated

Please note that Power Apps Portals rely on the popular Bootstrap 3.x framework.

And that is all! Do you need help with your Power Apps Portal? Contact HCL-PowerObjects to see how a team of professional portal developers can transform your business using PowerApps Portals.

Joe CRM
By Joe D365
Joe D365 is a Microsoft Dynamics 365 superhero who runs on pure Dynamics adrenaline. As the face of PowerObjects, Joe D365’s mission is to reveal innovative ways to use Dynamics 365 and bring the application to more businesses and organizations around the world.

Leave a Reply

Your email address will not be published. Required fields are marked *

PowerObjects Recommends