Canvas App and Model-Driven App

PowerApps allows you to create canvas app and model-driven app. Canvas apps start with your user experience, allowing you to create a highly customizable interface by using various UI controls such as labels, text-input boxes, drop-down lists, media, charts, and so on.

Canvas App

Canvas apps start with your user experience, crafting a highly customizable interface with the power of a blank canvas and ability to connect to 275+ data sources.

In this topic, you will learn what the main building blocks of canvas apps are. Before you create your first canvas app it is important for you to understand each component and how you can use them to create an enterprise-grade app.

This image shows that you can create a canvas app starting from blank which lets you create a custom app to meet your needs or connect to an existing data source and get a ready-made canvas app:

In this section you will learn what the different types of screens and controls are that you can use to customize your PowerApps app.

Screens

Screens in an application hold controls such as text, images, and other data. Canvas apps allow you to add multiple screens and add ways for users to navigate between them. Here is an example of multiple screens:

PowerApps provides different types of screens that you can readily use in your app, including the following:

• Blank: Empty screen
• Scrollable: Infinite scrolling canvas
• List: Browse items, thumbnail image, header and description
• Success: screen with confirmation text
• Tutorial: screen with customizable tutorial template
• Email: Office 365 outlook and users connected email composition screen
• People: Office 365 users connected user search screen
• Meeting: Office 365 outlook and Users connected meeting scheduling screen
• Calendar: Office 365 outlook connected calendar events screen

Controls

PowerApps provides a wide collection of user interface (UI) elements called controls which can be added to the canvas app to customize the look and provide appropriate functionalities to the users. You can customize the appearance and behavior of these controls from the toolbar, formula bar, or properties tab. Under the insert tab you can find all controls available in PowerApps.

This image shows a blank screen (tablet) in a PowerApps web studio:

The types of controls that you can add to enhance your apps are as follows:

• Galleries: A gallery can show multiple records from a data source. A common example is a collection of items from a SharePoint Online list which can be displayed in a gallery control. This control is a layout container that can be customized as per business requirement, as demonstrated below:

• Data Table: The Data Table control (as shown in the image below) shows data from a data source in a format that has column headers for each column that control shows. You can customize which field to display from the data source.

Data Table can display multiple records as shown in this image.

• 
  Forms: Forms can be used to show a detailed view of each record and to display selected or all fields in that record. The below image of a form shows details of a selected product record:

• Media: These controls let you add images, sounds and other media files. You can upload video files to Azure Media services and then display them in your app. You can also save images in a cloud storage account (OneDrive for Business) and display the images in a gallery control in your app.

• 
  Charts – These controls let you add charts and connect to various data sources.
• Icons – These controls include shapes, graphics, and symbols to enhance the user interface.

Formulas: Formulas enable you to improve functionality and change the behavior of your canvas app. You can configure canvas apps with formulas that can calculate values provided on the screen, perform different tasks, and respond to user input.

You can use formulas for a wide variety of scenarios. For example, you build a formula that determines how your app responds when a user selects a specific value from a drop-down list. These formulas might change the screen background color, update a data source, or return your location as a map coordinate by using the global positioning system (GPS).

The below image shows an example of how to write a formula in PowerApps. In this example we are doing two tasks:

• Creating a global variable and initializing its value to 25
• Creating a collection variable and initializing its value from a SharePoint list

Components

Components are reusable building blocks for canvas apps so that app makers can create custom controls and use them across apps. Components can be exported and imported in different apps across organizations.

Components are useful in building larger apps that have similar control patterns. For example, we can build a navigation control and use it across our app on different screens. Once we update a component, all instances in the app reflect your changes. Components improve performance and help in standardizing the look-and-feel of PowerApps apps in an organization.

A component has input properties that can receive values from the app, and the component can use these internally. Components also have output properties that can provide output values to the app. We will create a component in Chapter 2 and use it across our app.

This image shows a list of components defined in the app:

Canvas apps for enterprise developers

Developers can extend canvas apps, allowing them to build more powerful solutions for organizations and customers. These are the different ways in which developers can implement advanced capabilities in their app:

Build custom connectors – Developers can develop custom connectors to connect with services that are not available as prebuilt connectors. A custom connector is a wrapper around a REST API that allows PowerApps to communicate with the REST or SOAP API

Build Azure Functions – Developers can implement their custom server-side logic using Azure functions.

Build an app with offline capability – Developers can develop apps that users can use even when they are not connected to the internet. Collections can be used to store data locally on a device when the user is not connected.

Model-driven app

Model-driven app development starts with your data model and uses a component-based approach to developing a robust app. Model-driven apps are comprised of components such as entities, views, charts, forms, business processes, and dashboards which together form a great UI.

Model-driven app consists of three focus areas:

• Modeling business data
• Creating business processes
• Creating the model-driven app
• The following steps can be used to create a model-driven app:

• Create or edit an app – You can create and edit a model-driven app by using the tile-based app designer
• Create a site map for an app – Site maps define the navigation for your app. You can create a site map for your app with ease by using the tile-based site map designer.
• Add or edit app components – A model-driven app consists of various components. Artifacts and entity assets are two types of components that you add to a model-driven app. In an app designer, artifact consists of entities, dashboards, and business process flows. Entity assets consist of forms, views, and charts.
• Validate and publish – when developing a model-driven app you can validate your app to check for asset dependencies that are required for the app to work. After successful validation, you can publish the app.
• Share a model-driven app – Once an app is published, you can share this app with other users in the organization using role-based security. All app users must be assigned to one or more predefined or custom roles

This image shows a sample model-driven app in the app designer:

When you develop a model-driven app, you can use standard entities, custom entities, or both. A canvas app can be embedded in a model-driven app. We will discuss in more detail about common data service (CDS) and model-driven apps in upcoming blogs.

In this blog Canvas App and Model-Driven App, you learned about building blocks of canvas-apps and model-driven apps.

For further query related to Canvas App and Model-Driven App comment below or contact us

Recommended Courses