Creating an app from the Common Data Service

Generate a three screen app from the Common Data Service, then explore screens and controls from the app. Update app screens, controls, and fields; bring in additional data and trigger a flow from the app.

You will learn how to...

Generate an app

In this section of the course, we'll create an app based on entities in the Common Data Service. Entities are chunks of shared data that can be modified, stored, retrieved, and interacted with. We'll generate the app from an entity, show you how to customize the app, add another data source, and call a flow from the app. If you already completed the section on creating an app from a SharePoint list, we will cover some of the same territory but in more depth, especially around customizing the app.

We'll create a case-management app that an IT department could use to track, prioritize, and act on hardware and software issues across an organization. As you go through the topics, you might also think of other uses for an app like this. We're using data from the Common Data Service because it's well-suited to storing app data, but you could build the same app with a different data source.

PowerApps includes a more complex Case Management template that uses the same entities as the app we'll build. After you've completed this section, we encourage you to explore that template to get a sense of what you can build in PowerApps.

Create a Common Data Service database

The first step in building this app is to create a Common Service database if you don't already have one. You create a Common Data Service database in an environment. An environment is a container for apps and other resources (you'll learn more about environments later in the course). An environment admin can follow these steps to create a database (if you're not an admin, check with an admin in your organization).

From the Home tab, click Create Database.

Common Data Service create database

Specify whether you want to restrict access to the database (we'll keep it open), then click Create my database.

Common Data Service specify access

When the process is complete, you see all the standard entities that are included in the common data model. Some of them are shown below.

Common Data Service standard entities

Generate an app from the Case entity

Now that the database is created, we connect to the Case entity and generate an app. Click New app, then PowerApps Studio for web.

New app in PowerApps Studio for web

We're building a phone app for a Common Data Service entity, so under Common Data Service click or tap Phone layout.

Phone app from Common Data Service

In the next screen, you choose a connection and an entity to connect to, then click Connect.

Connect to Case entity

After you click Connect, PowerApps starts to generate the app. PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.

View the app in PowerApps Studio

Your new three-screen app opens in PowerApps Studio. All apps generated from data have the same set of screens:

  • The browse screen: where you browse, sort, filter, and refresh the data pulled in from the list, as well as add items by clicking the (+) icon.
  • The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • The edit/create screen: where you edit an existing item or create a new one.

In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

Toggle the views

Click or tap each thumbnail to view the controls on that screen.

The generated app

Next we'll explore the app in more detail and then customize it to better suit our needs.

Explore a generated app

In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. We won't go through all the details, but seeing more about how this app works will help you to build your own apps. In a later topic, we'll look at the formulas that work with screens and controls.

Run the app in preview mode

Click or tap Start app preview arrow in the top right to run the app. If you navigate through the app, you see that it includes data from the entity and provides a good default experience.

Run the app in preview mode

Understanding controls in PowerApps

A control is simply a UI element that has behaviors associated with it. Many controls in PowerApps are the same as controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on. But PowerApps has more specialized controls like Galleries (which display summary data) and Forms (which display detail data and enable you to create and edit items). And also some other really cool controls like Image, Camera, and Barcode. To see what's available, click or tap Insert on the ribbon, and then click or tap each of the options in turn, Text through Icons.

Controls tab on PowerApps Studio ribbon

Explore the browse screen

Each of the three app screens has a main control and some additional controls. The first screen in the app is the browse screen, named BrowseScreen1 by default. The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). There are also separate controls on the screen, like IconNewItem1 (an icon control - click or tap it to create an item in the edit/create screen).

Browse screen with controls

PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. You will see more ways to control layout later in this section.

PowerApps gallery options

Explore the details screen

Next is the details screen, named DetailScreen1 by default. The main control on this screen is a display form named DetailForm1. DetailForm1 contains other controls, like DataCard1 (a card control, which displays the question category in this case). There are also separate controls on the screen like IconEdit1 (an icon control - click or tap it to edit the current item on the edit/create screen).

Details screen with controls

There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

PowerApps form options

Explore the edit/create screen

The third screen in the app is the edit/create screen, named EditScreen1 by default. The main control on this screen is an edit form named EditForm1. EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the question category in this case). There are also separate controls on the screen like IconAccept1 (an icon control - click or tap it to save the changes you made on the edit/create screen).

Edit screen with controls

Now that you have a sense of how the app is composed of screens and controls, we'll look at how you customize the app in the next topic.

Customize the app

In the first two topics in this section, you generated an app from a Common Data Service entity and explored the app to get a better understanding of how three screen apps are composed. The app that PowerApps generated is useful, but you will often customize an app after it's generated. In this topic, we'll walk through some changes for the browse screen of the app. You can customize any of the screens, but we wanted to focus on one and provide a bit more depth to the customizations. We encourage you to take any app you generate - from an entity, an Excel file, or another source - and see how you can customize it. It really is the best way to learn how apps are put together.

When PowerApps generated the app, it decided on a layout to use, and particular fields to show on each screen. For this app, let's choose a gallery control that has a status bar (we'll customize the status bar shortly). In the right-hand pane, on the Layout tab, select the layout you want. You see the results right away because PowerApps updates the app as you make changes.

Change the browse screen layout

With the right basic layout, now change the fields that are displayed. Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. This provides a better summary of each item in the entity.

Change the browse screen fields

Change the app theme

PowerApps provides a set of themes you can use in your app, much like PowerPoint. In the following screen, you see the Dune theme applied, and a simple logo that we pasted into the app. These are basic changes, but can do a lot to improve the appearance of your app.

Change the theme and add a logo

Use a formula to show the case status

One of the major benefits of PowerApps is not having to write traditional application code - you don’t have to be a developer to create apps! But you still need a way to express logic in an app and to control an app’s navigation, filtering, sorting, and other functionality. This is where formulas come in.

If you have used Excel formulas, the approach that PowerApps takes should feel familiar. Suppose you want to show the status bar in green if a case is resolved, or in red otherwise. To do this, you select the status control on the screen, and then set the Fill property of that control to this formula in the formula bar: If(Status="Resolved", Color.Green, Color.Red). This is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. The following image shows where to set the formula, and the result in the app.

Formula to show case status

Sort and filter based on date

On the browse screen, the generated app lets you search for cases and sort the list of items in the gallery. We're going to remove the search and sort functionality in favor of showing cases based on a date. You could combine these methods, but we'll focus on the date-based approach for this app. In the image below, you see the items we added:

  • A text label ("Show cases after:") so users know what to do: Insert > Text > Label; change the Fill formula to White.
  • A date picker: Insert > Controls > Date picker.
  • A formula that connects the browse gallery Items property to the date picker: Filter(Case, DatePicker1.SelectedDate < LastModifiedDateTime).

The date is set to Oct 20 and you see the result that the app is showing the cases created after this date. Note that by default, all cases in the entity have the same last modified date. You can update one or more to see how filtering works. We cover working with entity data later in the course.

Updated app to use data picker

Show total number of cases

We're covering a lot of ground here, but we're almost done with the customizations. The last thing we'll do in this topic is add labels that show two numbers: the total number of cases and the number of cases that match our date-based filter.

Show total and filtered cases

The video goes into detail about how to add the two labels, but here's the basics on which properties we set for each label:

  • Align = Center
  • Width = Parent.Width/2
  • Left box Text = "Total cases: " & CountRows(Case). This includes all cases that are in the entity.
  • Right box Text = Filtered cases: " & CountRows(BrowseGallery1.AllItems). This includes only those cases that match the date-based filter.

OK, that wraps up the app customizations - in the next topic we'll add a data source, and a flow, and show you the finished app.

Add a data source and flow

So far in this section, we have generated an app based on the Case entity from the Common Data Service, explored the app to see how it's put together, and customized the app in several ways. In the final topic for this section, we will bring in another standard entity, and use Microsoft Flow to send an email. The app will trigger a flow so that the person who opened a case is notified when the case is updated. We're completing a particular scenario in this topic, but the skills you learn are applicable across many kinds of apps. Let's get started with the entities.

Review entity relationships

We'll add the Contact entity shortly, but first we'll look at how the Case and Contact entities relate to each other. In the Case entity, you see that one of the fields is CurrentContact, with a data type of Lookup. This means that this field is used in a relationship with another table.

Case entity fields

On the Relationships tab, you see that the related entity is Contact. Keep that in mind because we will use this relationship later in this topic.

Case entity relationships

Add an entity to the app

Adding a data source in PowerApps is straightforward. In the right-hand pane, click or tap Data sources, then Add data source. In this case, then choose the Common Data Service connection and select the Contact entity. After you click or tap Connect, the entity is added to the app.

Add Contact entity

Note that in this example, we're adding data from another entity, but you can combine data from many sources in your apps.

Look up contact information

Now that we have access to the Contact entity data in our app, it's time to put it to use. As mentioned in the introduction, we want to send an email when a case is updated. We will use two formulas and a flow to accomplish this. The first formula is for the edit screen, specifically the OnSelect property of the save button.

App edit screen

By default, this button uses the formula SubmitForm(EditForm1) to submit the update when a user edits data in the form. We need to add to the formula so that it first looks up the contact information for the person who opened the current case, and then stores that information locally in the app:

UpdateContext({contact:LookUp(Contact, ContactId=BrowseGallery1.Selected.CurrentContact.ContactId)}); SubmitForm(EditForm1)

Yes, it's a little complex, but James does a great job of explaining this formula in more detail, starting at 2:04 in the video.

Trigger a flow from the app

Now that we know who the contact is for each case, we can send an email to them. We could send an email directly from the app, but for this example we'll show you how to trigger a flow from the app. Here's the flow, which is as simple as it gets: send an email based on an action in an app. We won't get into more detail on flows here, but there is a whole Guided Learning series for Microsoft Flow.

Flow to send email

Back in the app, we need to call the flow based on an event. We'll use the OnSuccess property of the edit form, so the flow is triggered when the edit succeeds. Click or tap the edit form, then on the ribbon click or tap Action > Flows. Select the flow you want to use.

Flow to send email

The flow is now associated with the OnSuccess event of the edit form, and we can refer to the contact for the email. The following formula calls the flow with the email address of the person who opened the case, as well as a subject line and the body of the email.

CaseResolvedEmailConfirmation.Run(contact.EmailPrimary, "Your case has been updated", "Check it out")

That's it for adding a data source to the app, and triggering a flow that sends an email. If you haven't watched the videos in this section already, we encourage you to do it. They fill in lots of the details that we've moved through quickly in the topics.

Wrapping it all up

This brings us to the end of this section. We hope you've enjoyed it and learned a ton. We started out generating a basic app from an entity, and explored the app a little to understand how it's put together. We spent a good deal of time on customizing the app, then added a data source and saw how to trigger a flow. We built out a specific case management app in this section, but the skills you learned could be applied to many types of apps. As we mentioned at the beginning of this section - if you want to dig into a more complex case management app, be sure to check out the template that's available in PowerApps Studio for Windows.

Next up we'll move into managing apps. The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources.

Congratulations!

You've completed the Creating an app from the Common Data Service section of Microsoft PowerApps Guided Learning.

You learned how to...

Next Tutorial

Managing apps

Contributors

  • Michael Blythe