Skip to content

Getting Started with Power Apps Portals - Step by Step Tutorial

Feb 3, 2020 12:00:00 AM
Wisam Fawzi

In late 2019, Microsoft released the new Power Apps Portals, joining Canvas Apps and Model-Driven Apps in the Power Apps family.  

Power Apps Portal was a long-awaited addition to the suite. While Canvas and Model-driven apps have made building applications a lot easier than InfoPath, they couldn’t be used to build public apps for anonymous users. Power Apps Portals now fills this gap.   

What’s Power Platform? 

To understand the big picture, the Power Platform is a suite of no-code/low-code tools. The Platform contains a set of tools that include Power Apps, which in turn is made up of Power Apps Portals, Canvas Apps and Model-Driven Apps.  

Microsoft Power Platform Apps

The Power Platform tools are: 

  1. Power BI – for building business intelligence dashboards and reports 
  2. Power Apps – for building custom applications to capture information
    • Canvas Apps – for building apps starting from a blank canvas
    • Model-Driven Apps – for building apps generated from your data model and business process
    • Portals – for building websites for external and/or authenticated users
  3. Power Automate – for building workflows to process information
  4. Power Virtual Agents – for building chatbots

What are we learning today? 

 In this blog post we will learn the following: 

  1. When to use Power Apps Portals. 
  2. Power Apps Portals Architecture. 
  3. How to build your first Power Apps Portal.  

When to use Power Apps Portals 

There are two main uses for Power Apps Portals:  

  1. You want to build a public–facing website that can be accessed by anonymous and/or authenticated users. 
  2. You want to create an integrated experience with other Microsoft technologies like: 
    • Embedding a Power BI dashboard and/or report into your website.
    • Triggering a workflow when a user submits a form on your website.
    • Leverage Azure Blob Storage and/or SharePoint to store documents.
    • Use Application Insights to track solution usage.

Power Apps Portals Architecture 

Power Apps Portals isn’t completely new.  It has been around for some years, but it was previously marketed as “Dynamics 365 Portals” and offered only as an add-on to Dynamics 365 model-driven applications. Portals use the Bootstrap 3.3.x framework to control the appearance of the solution, as well as the template language Liquid.   

Power Apps Portal is built on top of Common Data Service (CDS). The CDS database will host all your portal’s data like pages, page templates, forms, forms’ data etc.   

Important Note: You can only create one portal per Power Apps environment.  If you need to create a second portal, then you will need to create a second environment. 

 Before we can create a Portal, we will need two prerequisites: 

  1. A Power Apps environment
  2. A CDS database 

Power Apps Environment

Build your first portal in Power Apps Portals

In this tutorial I’ll combine my passion for personal wellness with my passion for the Power Platform. We will build a gym signup form on top of Power Apps Portal. When the form is submitted the data will be saved to our CDS database. Here’s what the end result will look like:

Signup Form in Power Apps Portal

To get there, we’ll follow the steps below: 

  1. Create a new Power Apps environment with a CDS database. 
  2. Create gym signup form as a CDS entity. 
  3. Create Power Apps Portal. 
  4. Embed the form in the Portal. 

Create a new Power Apps environment with a CDS database 

When you can login to https://make.powerapps.com, you will already have at least one Power Apps environment. If you haven’t created a Portal on that environment, then you can leverage your existing environment to build a new portal. However, if you need to build a new environment, then follow the following steps: 

  1. Go to https://make.powerapps.com 
  2. Click on the gear at the top right corner of the page 
  3. Then click on Admin center
    Setting up a new Power Apps environment
  4. Click on Environments in the left navigation bar
  5. Click on + New in the top navigation bar
    Add a new environment
  6. A New environment form will show up
    New Environment Dialog
  7. Fill-in the fields:
    • Name: pick a name for your environment
    • Type: Trial
    • Region: pick your region
    • Purpose: fill-in the purpose of your environment
    • Create a database for this environment?: Yes
  8. Click Next
  9. An Add database form will show up.
  10. Fill-in the fields:
    • Language: choose your language 
    • Currency: choose your currency 
    • Enable Dynamics 365 apps: No (this option should be greyed out, since we selected “Trial” for the environment type) 
    • Deploy sample apps and data No 
  11. Click Save
  12. Your environment should soon be ready

Create gym signup form as a CDS entity

Now that we have the Power Apps environment ready, the next step is to build our gym signup form. We’ll start by creating a new CDS entity named Gym Membership. Next, we will add our fields to the entity, and finally we will create the form. You can think of the entity as a database table.

Create Entity

  1. Go to https://make.powerapps.com
  2. On the left navigation bar, click on Data -> Entities
  3. In the top navigation bar, click + New entity
    Create a new entity in Power Apps
  4. Fill in the fields as follows:
    • Display name: Gym Membership
    • Primary Field
    • Display name: Full Name
  5. Click Create at the bottom

Add fields

  1. Add the rest of the fields. For each of the following fields,
    • Click + Add field in the top bar,
    • Then fill-in the fields as shown in the table below
    • Then click OK at the bottom
      Display Name Data Type Comment
      Membership Number Auto Number • Autonumber type: String prefixed number
      • Prefix: blank
      • Minimum number of digits: 4
      • Seed value: 1
      First Name Text  
      Last Name Text  
      Gender Option Set 1. Click on the Option set drop down
      2. Click on + New option set
      3. Add the following items:
      a. Male
      b. Female
      c. Prefer not to say
      Birth Date Date Only  
      Phone Number Phone  
      Email Address Email  
      Address Text  
  2. Click Save Entity at the bottom right corner

Create Form

  1. Click on Forms
    Create a Form in Power Apps Portal
  2. Click Add form -> Main form in the top bar
  3. In the left bar,
      • Change Display Name to Signup form
      • Change Description to: A form for gym membership signup.
  4. Drag the fields we added above from the left side bar to the canvas
  5. When you are done, the form should look as follows:
    Form settings in Power Apps Portals
  6. Click on the Membership Number field, then click Hide field from the right bar
  7. Click on the Owner field, then click Hide field from the right bar
  8. Click Save then Publish in the top right corner of the page

Create Power Apps Portal

  1. Go to https://make.powerapps.com
  2. Click on Portal from blank
    Create Power Apps Portal from blank
  3. Fill-in the new portal form:
    • Name: Hercules Gym
    • Address: HerculesGym
      Create a portal from blank
  4. Click Create. Note: It usually takes 5 to 10 minutes to create the portal
  5. Once the portal is created, it should look like below:
    Basic page template in Power Apps Portals

Embed the form in the Portal

  1. Click on the pages icon in the left bar
  2. Right-click Services, then click Add a child page
    Power Apps - add a child page
  3. Once the page is added, in the right bar:
    • Change Name to: “Signup”
    • Change Partial URL to: “signup”
      signup component on the webpage
  4. Click on the components icon in the left bar, then click on One column section
    Select One column section in Power Apps portal
  5. Click inside the column you just created
  6. Then click on the components icon in the left bar, then click on Form
    Section layouts
  7. In the right bar:
    • Set Name to “Signup form”
    • Entity to: “Gym Membership”
    • Form layout: “Signup form”
    • On Success: “We’re so excited to have you on-board!”
    • Uncheck the captcha fields

Note: Unchecking the captcha is fine for a demo form.  However, when building a production form keep the captcha to keep bots away from submitting your form.

Final form settings

Preview your portal

  1. Click on Browse website in the top right corner of the page. Note: If you get an “Unable to clear cache” message, click Retry
  2. Your form should show up as follows:
    Signup Form in Power Apps Portal
  3. Fill-in the fields and click Submit
  4. You should now get the success message

    Success Message

Confirm a record has been added to your CDS Entity

  1. Go to https://make.powerapps.com
  2. On the left navigation, click on Data -> Entities
  3. Click on Gym Membership
  4. Click on Data in top bar
  5. You should find your record
    Find your record
  6. Click on the record, then click Edit record
  7. You should now see all the info you entered in the form

Conclusion

Microsoft has made it so easy to spin up an external website that integrates with the different Microsoft technologies. Now that you know how to build basic sites in Portals, you’re ready to learn how to customize the look and feel of your site. So stay tuned, because in my next post I’ll show you how to  allow users to login using their LinkedIn, Facebook and Twitter accounts, limit access to certain pages and add a custom domain name.

Power Apps Portals is very powerful, and together we’ll learn how to make the most of it.

This article was originally published at Consultant Diary, Wisam’s personal blog.
Modern Workplace Power Apps Low Code