3 ways to create Power Apps (Types of Power Apps)

3 ways to create Power Apps – Types of Power Apps

2 comments

 3,401 total views,  18 views today

In this article, we will learn about how different 3 ways we can create the 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 – Types of Power Apps

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 the scratch and during the app development you will connect this app with any of the data sources which you would like to. We can compare the Canvas app with PowerPoint empty template or if you are from the InfoPath Form developer background, we can compare the Canvas app with InfoPath form blank template. In all the cases, the tool will you to select the empty template and you can customize it as per your need.

The main purpose of the canvas app in PowerApps is their ease of use – 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 canvas App in PowerApps?

How to create canvas App in PowerApps?

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

Three ways to make an app - Canvas app from blank template
Three ways to make an app – Canvas app from the blank template.

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 as “Tablet” which is the default selection.

Step to create canvas app from blank template

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

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 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 textbox for these controls (user input) and a sample “Submit” button from the insert menu.

Design and develop sample canvas app in Power Apps
Design and develop sample canvas app in Power Apps

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.

Preview the app (F5) - Preview the app to see how it works
Preview the app (F5) – Preview the app to see how it works
Canvas app in preview mode in Power Apps
Canvas app in preview mode in Power Apps

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 save canvas app in cloud in Power Apps
How to save canvas app in cloud in Power Apps

How to create 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 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 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 very faster than the canvas app.

A few key points from the model-driven app:

  • Easily drag and drop controls are available same as the canvas app.
  • The app is data-oriented – developed based on the predefined source data.
  • Easy to develop than the canvas app, 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 to develop it whereas CRUD operation in SharePoint online list using the model-driven app is very faster – with just a few clicks we can achieve it.

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.

Create model-driven app from blank in Power Apps
Create model-driven app from blank in Power Apps

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

Create model-driven app from blank using classic app designer experience in Power Apps
Create model-driven app from blank using classic app designer experience in Power Apps

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.

In 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.”

No database found - create database in PowerApps
No database found – create a database in PowerApps

Click on the “Create database” button.

In the next screen, we can see the database creation parameters along with 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”

New database creation parameter in Power Apps
New database creation parameter in Power Apps

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.

Create model-driven app with the start from data approach
Create a model-driven app with the start from data approach

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.

Create SharePoint data connection - Connect directly (cloud services)
Create SharePoint data connection – Connect directly (cloud services)

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.

Connect to a SharePoint Site for model-driven app in Power Apps
Connect to a SharePoint Site for model-driven app in Power Apps
Choose a list from SharePoint Connection in Power Apps model-driven app
Choose a list from SharePoint Connection in Power Apps model-driven app

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

Model-driven app demo in Power Apps
Model-driven app demo in Power Apps

Wow, done !!!

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

Notes:

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

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.
Save as model-driven app in Power Apps
Save as model-driven app in Power Apps

Difference between canvas app and model driven app in PowerApps

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

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

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

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

As of we now we have learned about the Canvas app and model-driven app in Power Apps, now we will understand and learn what is 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. Earlier, we used to develop publishing-facing websites using other technologies like .Net, SharePoint, etc. these days if we develop some products (apps) using the Power Apps platform and if we want to market those products (apps) within the Power Apps platform, then Power Apps portal is the right choice.

A few key points about the Power Apps Portal:

  • Enable external access with Power Apps portals, empower anyone, either 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.
  • You can bring all your data together – including Power BI and Power Automate, together with Microsoft Dataverse and enable your users to interact with it anytime, anywhere.
  • Easily accessible from all devices like desktop, tablet, and mobile.
  • Anonymously external users can access the Power Apps portal site.
  • External can login to Power Apps Portal using the LinkedIn, Microsoft Account, other commercial login providers account.

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.

PowerApps portal from blank - steps to create Power Apps portal
PowerApps portal from blank – steps to create Power Apps portal

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.
Create Power App portal from blank
Create Power App portal from blank

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 we had here?

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

  • Types of Power Apps – various ways creating Power Apps
  • What is the Canvas app?
  • How to create a canvas app in PowerApps?
  • How to design and develop sample canvas app in Power Apps
  • How to preview the Power App or how to Publish the Power Apps
  • How to create model driven app in PowerApps?
  • What is model driven app in PowerApps?
  • How to create a model driven app in PowerApps?
  • How to create a model-driven app – start from data
  • Difference between canvas app and model driven app in PowerApps
  • What is Power Apps Portal?
  • PowerApps portal from blank – steps to create Power Apps portal

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


Buy SharePoint Online & Office 365 Administration eBook

 

 

2 comments on “3 ways to create Power Apps – Types of Power Apps”