In this webinar, our experts showcase a variety of demo use cases of how different components of the...
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.
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.
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.
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.
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.
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).
Note that if the colour selected does not have enough contrast with the background colour, a warning message will be displayed (13).
Creating a new basic theme will create a Web File record on the Portal Management model driven app.
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.
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.