Different Types of Power Apps: 3 ways to create PowerApps

In this “Different Types of Power Apps” article, we will learn about the how different 3 ways we can create Power Apps or what are the various types of PowerApps available. In the previous two articles, we have learned what is “Power Apps” is all about and how we can create the development environment in PowerApps using the Microsoft community plan.

Now, we will move on to the actual content of the article.

3 ways to create Power Apps (3 types of Power Apps) – Different Types of PowerApps

Basically, there are 3 types of Power Apps available or we can create the Power Apps in 3 ways, these areas below:

• Canvas
• Model-driven
• Portal

Now we will discuss each type of Power Apps mentioned above.

What is the Canvas app?

This is something we can think of as an empty framework where you want to create the apps from scratch, and during the app development, you will connect this app with any of the data sources that you would like to. We can compare the Canvas app with a PowerPoint empty template, or if you are from the InfoPath Form developer background, we can compare the Canvas app with an InfoPath Form blank template. In all cases, the tool will allow you to select the empty template, which you can then customise as per your needs.

The main purpose of the canvas app in PowerApps is its ease of use with drag and drop control. In the Canvas app, we don’t need to worry about how data is structured, and they offer a much more intuitive user experience than model-driven apps (in the coming section, we will discuss model-driven apps).

How to create a canvas app in PowerApps?

Follow the below steps to create the PowerApps:

1. Log in to the PowerApps portal using this link – https://make.powerapps.com/environments/9047ecc6-a159-455d-8951-eaf0c02e1a89/home
2. Select the environment from the environments selection dropdown list.
3. Click on the “+ Create” button from the left side panel.

How to create a canvas App in PowerApps?

Then, click on the “Canvas app from blank” icon.

Provide the app name.

Select the app format, we could select the app format either as “Tablet” or “Phone”.

Here we have selected the format “Tablet” which is the default selection.

Step to create canvas app from the blank template

Click on the “Create” button.

Canvas app design

Design the app you want, and connect it to hundreds of data sources.

Now, we will see the welcome to the Power Apps studio screen. Here are a few ways to start building an app from a blank canvas. There are two options to start with or even skip both of them.

• Create a form
• Create gallery

Welcome to Power Apps studio – Create Form

Here we are going with the “Skip” option as this just shows proof of concept of how we can develop a canvas app.

Click on the “skip” button.

Design and develop a sample canvas app in Power Apps

In this section, we will design a sample canvas app using the Power Apps drag and drop control as part of the demo.

Add three labels for “First Name”, “Last Name” and “Mobile Number” and accordingly input the textbox for these controls (user input) and a sample “Submit” button from the insert menu.

Preview the app to see how it works

Press (F5) or click on the play button to preview the app to see how it works.

Now click on the (Control+S) button or save as from the left side file menu to save the app in the cloud (Save to Power Apps).

There we need to provide the app name and click on the Save button.

Note:

• The default saves as the selection is the cloud however, we could select the other option – this computer (save a copy to my computer).
• The first time, while you save the Power Apps automatically it gets published the first version of the app.
• When you save the model-driven app the first time, it gets published automatically however, in the subsequent changes in the app, we need to exclusively handle the publishing method.

How to create a model-driven app in PowerApps?

In this section, we will learn what is the model-driven app in PowerApps and how to create it.

What is the model-driven app in PowerApps?

In simple words, the model-driven app is designed out of the data model available; you have your source data available, which may be in SharePoint, SQL, or Microsoft Dynamics 365, etc., and you want to develop the app out of these data connections. Here, the design time of the app is much faster than that of the canvas app.

A few key points from the model-driven app:

• As with the Canvas app, simple drag-and-drop controls are available.
• The app is data-oriented, developed based on predefined source data.
• For example, if you want to develop a canvas app for the CRUD operation in a SharePoint list, it takes a significant amount of time, whereas the CRUD operation in a SharePoint online list using the model-driven app is much faster—we can achieve it with just a few clicks.

How to create a model-driven app in PowerApps?

Below are the steps to create a model-driven app in PowerApps:

Follow the same navigation as the canvas app – click on the “+ Create” link from the app section (https://make.powerapps.com/environments/9047ecc6-a159-455d-8951-eaf0c02e1a89/templates), then click on the “Model-driven app from blank” icon as shown below.

Select the app experience from the “Select a creating experience” as a classic app designer which is a default selection, however, we can select the “Modern app designer (preview)”.

Click on the “Create” button.

Model-driven app from blank

Model your data to create the building blocks of your app, and let Power Apps design the look.

On the next screen, we can see the below message.

“No database found

You’ll need a database to use this feature. Choose Create database and we’ll set one up for you.”

Click on the “Create database” button.

In the next screen, we can see the database creation parameters along with the below message:

“By choosing to Create my database, you agree Microsoft can use table and column names that you create (but not content in the database tables) to help improve our common data model. These names may be stored in our diagnostic systems and copied across regions. Learn more”

Note:

• The database cannot be created from a trial tenant account, so we are not extending this topic here, we will take another approach to create the model-driven app.

Create a model-driven app – start from data

Go to the same app creation navigation, there we need to go to the start from the data section, then we could select any of the below data sources:

• SharePoint
• Excel Online
• SQL Server
• Microsoft Dataverse
• Other Datasources

For this demo, we are selecting “SharePoint” as a data source. Click on the “SharePoint” icon from the “Start from data” section.

In the next screen, we could see lots of other data connections, here SharePoint is selected by default.

In the “How do you want to connect to your data?” selection select “Connect directly (cloud services), the other option “Connect using the on-premises data gateway” is for the on-premises data connection.

Click on the “Create” button.

In the next screen, we need to enter the SharePoint site URL for the location of your list, here either we could select the site from the recent sites list or could enter the site URL and click on the “Go” button.

Then click on the connect button which you will at the bottom of the page.

Wow, done !!!

Without designing the form, we could see the nice-looking Power App form with the New, Edit, and View options.

Notes:

• Press the F5 key or the play button from the top right-most corner to preview the app.

How to save the model-driven app in Powe Apps?

From the File menu, click on the “Save as” button or click on the ctrl+S button to save the model-driven Power App and name the app appropriately.

Note:

• The model-driven app could be saved as “The cloud – Save to Apps” or
• This computer – save a copy to my computer.

Difference between canvas app and model-driven app in PowerApps

There are many differences between the canvas app and the model-driven app; below are a few points:

• We will use model-driven apps when we use forms and views created on Power Apps inside Dynamics 365.
• “Model-driven apps” are apps created to support deployment into Dynamics 365.
• The Model Drive app is data-centric, which means the app gets designed automatically based on the data entity.

On the other hand, we have the following with respect to designing the Canvas app:

• The canvas app can be designed from scratch with the empty template, and later you can give it a better look and feel.
• The canvas app can be designed with drag-and-drop controls.
• There are two types of layouts for the Canvas app: tablet and phone. And there is no layout for the desktop or laptop view.
• The canvas app can be deployed to Microsoft Teams, the Apple Store, the Play Store, SharePoint Online, and many other tools.

As of now, we have learned about the Canvas app and the model-driven app in Power Apps; now we will understand and learn about the portal app in Power Apps.

Power Apps Portal

The Power Apps Portal is a new feature or add-in added to the Power Apps platform, using which we can create a very responsive website. In the backend, it uses Microsoft Dataverse as the database table. Previously, we developed publishing-facing websites using other technologies such ASP.Net, SharePoint, and so on; now, if we develop some products (apps) using the Power Apps platform and want to market those products (apps) within the Power Apps platform, the Power Apps portal is the right choice.

A few key points about the Power Apps Portal:

• Enable external access with Power Apps portals and empower anyone—inside or outside your organization—to interact with Microsoft Dataverse data using the Power Apps portals.
• Using the Power Apps portal, we can enable anyone to build responsive websites.
• Using the Power Apps portal, we can engage with external customers and partners.
• You can extend the power of your solutions to your external customers and achieve amazing results.
• With Microsoft Dataverse, you can bring all your data together, including Power BI and Power Automate, and enable your users to interact with it anytime, anywhere.
• easily accessible from all devices, like desktops, tablets, and mobile.
• Anonymously, external users can access the Power Apps portal site.
• External users can log in to the Power Apps Portal using LinkedIn, Microsoft accounts, and other commercial login providers’ accounts.

PowerApps portal from blank – steps to create Power Apps portal

Browse the power apps maker URL – https://make.powerapps.com/environments/9047ecc6-a159-455d-8951-eaf0c02e1a89/templates

Select your environment from the environment selection.

Click on the “+ Create” button.

Click on the “Portal from blank” web icon/link.

In the next screen, we will see the option to pass the below parameters:

• Name:  Here we need to enter the portal name for example. My Portal
• Address: Here we need to enter the Portal Address, for example, “myportal”
• Language: Select the langue of your choice from the language selection dropdown list.

Then, click on the “Create” button.

After clicking on the “Create” button, it might take up to 10 minutes to create the portal So we have to wait till that time unless we are not getting the successful message “Portal created successfully”.

Notes:

• Using the trial tenant you might not get the option to create the portal as the portal needs a database and the database can only be created using the paid tenant or you need to buy a portal creation package (add-on).

Summary: What do we have here (3 types of Power Apps)?

Thus, in this article, we have learned the following with respect to various types of apps in the Power Apps platform:

• Types of Power Apps: various ways to create Power Apps
• What is the Canvas app?
• How do I create a canvas app in PowerApps?
• How to design and develop a sample Canvas app in Power Apps
• How to preview the power app or how to publish the power apps
• How do I create a model-driven app in PowerApps?
• What is the model-driven app in PowerApps?
• How do I create a model-driven app in PowerApps?
• How to create a model-driven app: start from data
• Difference between a canvas app and a model-driven app in PowerApps
• What is the Power Apps Portal?
• PowerApps portal from blank: steps to create a PowerApps portal

See Also

For the update on the PowerApps, you can refer to What is Power Apps? MSDN article.

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:

 

 

About Post Author