Canvas apps: How to build your own custom, low-code apps
"I need an app for something, but I'm not a developer." If this is you, you can build your own using Power Apps, no deep tech skills needed! Just read this guide.
Apr 16, 2024 • 7 Minute Read
Do you ever find yourself thinking, “We need an app for that”? Well, with Power Apps, you can create your own apps, even if coding isn’t your jam. The Power Apps platform is all about enabling “citizen developers” to build business apps and automate processes without needing deep technical skills.
In this article, I’ll walk you through how to build your first Power Apps canvas app. We’ll pretend you’re part of the Party Planning Committee at your office, and you need an app for creating and managing events. Let’s get started!
Creating a new solution and publisher for our app
To get started with this project, navigate to the Maker home screen at make.powerapps.com.
Make sure you’re in the right environment at the top right (a common gotcha that could impact the features available). Your environment will need to have a Dataverse database.
On the left-hand navigation, navigate to Solutions.
Solutions are essentially containers that hold the changes you make as you build your application. It’s considered a best practice to create a solution for your app because it isolates your changes from the rest of the things in the environment. The solution also enables you to move or deploy your application to different environments (such as one for testing and one for production).
On the top command bar, click + New solution.
In the New solution pane that appears, fill in the Display name (the Name field should automatically fill in for you).
Then we need to fill in the Publisher field. Just like a book publisher, the publisher here will be the name that gets attached to your app and changes. It’s a best practice to create a custom publisher so that you know who did what (rather than everything showing up under the Default Publisher).
So click + New publisher.
Fill in the details for:
- Display name
- Name
- Prefix: The prefix is appended to the front of objects you create, such as tables, columns, forms and so on. So if we see a table called ps_Event, we know it was created by this Pluralsight publisher (which is what the final highlight in this screenshot is illustrating).
After the details are filled in, click Save to save the publisher.
This will take you back to the New solution pane. Here, under Publisher, select the publisher you just created and then click Create.
Setting up a data model in Dataverse
Now that we have a solution to hold our changes, we can get to work on our data.
Apps in the Power Apps platform can pull data from a variety of sources, including Dataverse (the built-in data layer), Excel, SharePoint and even SQL. Let’s keep things simple and go with Dataverse.
For our scenario, we’ll need two different tables (sometimes called entities). These represent the “objects” of the application, and make up what’s called the data model (the tables, columns and relationships that drive the app). Specifically, we’ll need one table for “Event” and one for “Contact.” “Event” will need to be a custom table, but for “Contact,” we can use the out-of-the-box Contact table.
Here’s a look at the data model we’ll be building.
You’ll also notice the pink arrow between the tables. That represents a relationship, which we’ll cover in a little bit. For now, let’s build out the custom Event table.
Creating a new table in Dataverse
After creating your solution, you should automatically be taken to it. But at the moment, it’s an empty solution—no tables or anything else. Let’s fix that. (You can also get some help from Copilot on this part if you’d like).
On the left-hand navigation, click Tables.
On the top command bar, click New→Table→Table.
In the New table pane that appears, enter the Display name of “Event.” The Plural name will automatically fill in for you.
Click Save.
Adding new columns to the table
We now have a table called Events. Now we need to add columns to hold our data.
Under the Schema section, click Columns.
When you click into Columns, you’ll see there’s actually a lot of stuff on the screen—but not stuff we created. A new table will have quite a few default columns—things like Created By, Created On and more.
I’ve highlighted one column in particular, which is Name. This is the primary name column. All Dataverse tables will have one of these. This is the name or primary description of the record, and will be shown in list views and so on. I point it out because it means we won’t need to create our own column for the event name.
But we DO need to create columns for:
- Event Type (the kind of event, like Birthday Party, Holiday, Team Building, etc.)
- Event Date and Time (the date and time of the event)
- Event Location (where the event will be held)
- Event Organizer (who’s organizing the event)
To create a new column, click + New column on the command bar.
For our first column, fill in the Display name with “Event Type.” For Data type, select Choice.
Scrolling down, we now need to define the choices (the different types of event this could be).
- For Sync with global choice, select No
- Fill in choices as shown below, using the New choice button to add more (you can add additional event types if you’d like)
- For Default choice, select None
Click Save.
Now we need to create the next two columns. In the list below, I’ve included the display name to use, as well as the data type. Go ahead and create these columns using steps similar to what we did above.
- Event Date and Time, data type of Date and time (defaults for everything else)
- Event Location, data type of Single line of text (defaults for everything else)
Creating relationships between tables in Dataverse
Before we create the final column for Event Organizer, we need to talk about relationships.
Remembering back to our data model from earlier, the Event Organizer will be represented by the built-in Contact table/entity. But we need a way to “connect” those contacts to our events. That’s done by creating a relationship between the Event table and the Contact table.
One-to-many relationships
The relationship between the event organizer and the contact is a one-to-many or many-to-one relationship (sometimes shown as 1:N or N:1). Here’s a visual that might help. In truth, this is the same relationship; it just depends on which direction you read it.
To create these types of relationships, you have two choices:
- Add a Lookup (a type of column) on the “Many” side that points to the “1” side; this will automatically create the relationship behind the scenes
- Create the relationship manually
The first option of the Lookup column is the easiest, so let’s do that.
For this, we’ll want to start in the Event table. By adding a Lookup column that points to Organizer (Contact), we’ll create a many-to-one relationship, Event-to-Organizer (many events can have the same 1 organizer).
Make sure you’re in the Event table, and click + New column.
Fill in the following details:
- Display name: Event Organizer
- Data type: Lookup→Lookup
- Related table: Contact
Click Save.
We’re making progress! We’ve built out our data model, and have the tables and columns we need to drive the app. Now let’s put a UI on top of everything.
Creating a new canvas app on top of Dataverse
To create a new app, let’s back up to Maker home, at https://make.powerapps.com. While it’s possible to create a new app from scratch, Power Apps offers some nice templates and to get us started.
Select Start with a page design.
Now select Gallery connected to table.
On the next page, select the Event table and click Create app.
Power Apps will get busy creating your application, and when it’s done, it’ll drop you into Power Apps Studio. Click the Skip button.
Now, before you do anything else, you’ll actually want to save the app. This doesn’t happen automatically when you create it (if you were to leave the page now, the app would be gone).
On the top right, click the Save button.
Give your app a name and then click Save.
Running a canvas app and entering data
Now that we have some basic screens, let’s run the app and see what it looks like. On the top right, click the Preview button or use the F5 shortcut key.
On the left of the screen, click the + New button to create a new event.
This will bring up a new screen to enter details for a new event.
But you might notice it’s missing a place to enter the Event Organizer (you’ll remember this was “hooked up” to the Contacts table through a relationship). So let’s go fix that.
Click the top right X to exit out of preview mode.
On the top command bar, select Add data, then choose the Contacts table.
Now, oftentimes, even though your table is now included in the app, the actual data won’t be available until you refresh the data source.
To do that, on the left Data pane, click the … next to the right of the Contacts table and then select Refresh.
Now that the data is available, let’s add a field for it on the Event form.
Back on the canvas, click anywhere under the event details until there’s a purple outline around this part of the form. Then select Fields on the top tab area.
Click Add field, select Event Organizer and then click Add.
That will place the Event Organizer field on the form. You can move the fields around with a simple drag-and-drop if you want to rearrange them.
Now let’s go run the app and enter some data!
On the top right, Save the app and then Preview it.
Enter details for a new event (I have some sample Contact data in my environment that’s being pulled in for Event Organizer) and then click the Checkmark on the top right of the form to save it.
Very nice! Now as you add additional events, they’ll appear as a list on the left-hand side of the app.
Conclusion
And that’s a wrap! At this point, you should have a fully-functioning canvas app that you can use to create and manage events. But there’s a lot more to Power Apps, both canvas apps and model-driven apps. If you want to dig deeper, check out these additional resources:
