ACDC2020 – Marketing: Power App Portal in 3 hours

Last updated on 18/10/2020

The vikings love the new Power Apps Portal, and got up and running with a complete marketing site within hours. 

Started from and created a Blank Portal 

The portal is represented with two Apps; the “Kimtzers PuzzlePackage” (Portal App) where you can browse to the website itself and the Management App (D365 Model Driven App) that let you work in the Dynamics interface. 

Out of the box the portal looks like this 


To edit the header we used the Portals Management studio and opened the default Header web template for our website 

Changed the logo picture 

The Favicon 

All websites with some self respect change the favicon. 

Go to the Home webpage and scroll all the way to the bottom of the General tab to find the “Image” option. 

Upload the favicon image named (use to create one) 



To create a new look and feel for the Home-page we created a new Web Template called “Home” and attached it to a page templated called “home”. 

Home Web Template 

Some highlights in the HTML 

Line 1: Set backgound picture 
Line 2: First section (full width) divided into two columns containing an image of the product and some selling content 
Line 5: First column has two important classes for responsiveness. It will be 9/12 columns wide when in desktop mode and 12/12 (full width) when on a phone. The other column fit beside the first when in desktop mode but will be below the first one then in mobile view. 
Line 20: Second section is divided into two equal columns. 
Line 25: Added square image and created a round frame around it (nice and modern-looking). 
Line 30: Nice GIF added. 

The GIF 

God a nice Flossing-superhero GIF of the internet and opened it in Photoshop. 
Downloaded a nice picture of a handsome man from the internet too and removed everything in the picture accept the head 

Put the image on top of the superhero and move the head some pixels for each frame 

Uploaded it to the web and the result was a dancing viking man 

Back to the portal 

Created a page template for the web template and set the page template to a page 

The finished product 

Blodfred product page 

Web template 

Looks like this 

Two animated GIF’s and one video using the HTML5 video component. 

The GIF’s are 

Last – but MOST importantly 

Always remember to CLEAR CACHE! 

Nick Doelman 

Add “/_services/about” after the URL of your portal 

Need to be logged in as administrator 

Hit “Clear Cache” button every time you have made changes in the Management App to make the changes come trough to the web interface 

Get new blog posts right to your inbox

Ulrikke Akerbæk Written by:

User Experience through digital interfaces, interaction, branding and visual design has been her passion and focus since she created her first website at age 14. She is a solution architect for Power Platform, specializing in Power Apps Portals. She is a Business Applications MVP and was named one of the top 50 women in tech in Norway in 2022. Currently working as Low Code Practice Lead at Itera.

Be First to Comment

Leave a Reply

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