INTRODUCTION (2/3) : Create your first application in Power Apps
Discover how to create an application to view and add new data to a SharePoint list.
Prerequisites for this tutorial:
You must have SharePoint
You must have followed the Power Automate tutorial: Build your first automation with Power Automate
The second pillar of the "Power" softwares Triforce:
Power Apps.
As the name suggests, we use it to create homemade applications to meet user needs.
I'm not exaggerating when I say that your imagination will reach its limits with Power Apps faster than it will technically speaking.
But as with Power Automate, the best way to discover what it can offer is to practice.
First and foremost, make sure you have followed the following tutorial: Build your first automation with Power Automate to have the "Star Wars Data" list available because we will use it as a database.
Go to: Power Apps and select your account to log in.
You should land on the following page:
For our first application, we will keep it simple. Microsoft allows us to create a "pre-built" application by associating it with data.
So, we will select "Start with data."
This choice is interesting because we already have a database, which is our SharePoint list.
An interesting point to note: if you have an Excel file, you can also use it as your data source if it is in a tabular format, although I strongly recommend using SharePoint or Dataverse:
You are prompted to choose how to get your data source. Our SharePoint list is in the "External Data" category, so we will select this option:
Here, we will select our SharePoint site and the list we want to use.
Once done, we can click on "Create app" in the bottom right.
After a few seconds, we land on the following screen:
Congratulations, your first application is complete!
Don't forget to subscribe to the newsletter to stay updated...
I'm just kidding, although we could really stop here! 😄
Let's take a quick tour of what we see here. If you can't wait to test your app, you can click on the "Play" button to see a preview of the user experience.
As you can see, the application has expanded, and now we can interact with the data. For example, click on "+ New" in the upper left:
As you can see, Power Apps allows us to add a new hero directly without going through our SharePoint list. Imagine the possibilities offered by this interface:
You can secure your data.
View, add, modify, and delete records.
Decide who can see which information.
The user experience is improved compared to a standard SharePoint list.
However, we need to make some modifications. As you can see, the "Name" column in our list still appears as "Title." But before that, let's add a new character.
I suggest adding Qui-Gon Jinn, Obi-Wan Kenobi's master. Here are the character's details:
After adding the information, click the checkmark icon in the upper right:
Our character has been successfully added to our list:
A little aside: if you left your Power Automate flow from the previous tutorial enabled, go to Outlook.
Our automation worked correctly there too!
Now, let's return to Power Apps. We want to modify Obi-Wan Kenobi to associate him with a master.
Simply click on his name in the items on the left, and Power Apps will select it:
If you click directly on the Master field, you will see that it is not editable. On the right side of the screen, you can see two icons: a pencil and a trash can.
If you click on the pencil, the field will be editable, and you can select Qui-Gon Jinn from the drop-down list.
Don't forget to save by clicking the checkmark icon in the upper right.
Shall we check our SharePoint list to see if our additions/modifications have been properly taken into account?
Everything seems to be in order. Qui-Gon Jinn appears as a new item and as Obi-Wan Kenobi's master.
Let's go back to our app to make some modifications. We are still in "Preview" mode; to exit, click on the exit button in the upper right.
Now we are back in the editing format, which allows us to modify our application. First, save your app so that you don't lose it (I recommend doing this because it happened to me during the tutorial 😁).
Click on the floppy disk icon in the upper right to save the app.
Power Apps will ask you to give it a name. For example, you can call it "1_App Star Wars Data."
After clicking "Save", let's make our first modification. For example, let's modify the "Star Wars Data" format that appears in the header.
To do this, click on it once.
On the right side of the application, you can see a multitude of settings. We can modify the font, size, text alignment, etc.
Let's do it!
For example, we can modify it as follows:
Font size: 20
Font: Lato Black
Alignment: Middle
Also, it's important to change the element's name. We will see this in a dedicated tutorial, but it's important to give a clear name to the element in the application.
Here, the default name is TableNameLabel1, which is not very meaningful.
Let's rename it to HomeTitle for example (or any other name that makes sense to you).
As you can see on the left side of the application this time, the name is clearly visible.
While we're here, know that this part of Power Apps allows you to find all the elements in your app.
We will use it to find another element.
Earlier in the tutorial, I mentioned that we would rename the "Title" field to "Name" to match what we have in our list.
This one:
We could click on it as we did for the previous example. However, I'll show you another way to do it.
In the left part where we were, click on the arrow to the left of BodyContainer1:
This opens new containers (we'll see in a future tutorial what they correspond to).
Then click on the arrow to the left of RightContainer1. Then the one to the left of MainContainer1, and finally the one to the left of Form1.
We found it! We have located our Title, which is named Title_DataCard1.
When we click on it, it selects the entire box corresponding to the “Title” field.
But we only want to modify the field title.
You can see that there is a small lock when we click on Title_DataCard1:
This means that the field is locked to prevent accidental changes.
But since we are fully capable, let's unlock it by right-clicking on Title_DataCard1 and selecting Unlock:
We can click on the small arrow to the left of Title_DataCard1 to see if anything seems interesting.
It may not be obvious the first time, but if you click on DataCardKey1, you will select what we want: the field title!
There are two ways to change the title:
The brute force way: you double-click on "Title" and edit it directly in the field (not recommended).
The right way: go to the settings on the right and click on the field next to Text:
A formula bar at the top of the application, similar to Excel, will show you this:
Parent.DisplayName, in a language adapted to mere mortals, means that Power Apps will show the column name as it appears in the SharePoint list (with the exception of our main "Name" column, which appears as "Title" here, but that doesn't change much).
Remove this Parent.DisplayName and type this in while retaining the quotes:
"Name"
As you can see, the name of our field has been updated correctly!
We could make more modifications, but the tutorial would last for days. Instead, I suggest sharing this application with your colleagues since it is generally operational.
Here's how: go to the top right of the application and click on the rightmost small logo.
A window will open, asking if you want to publish this version. First, modify some settings by clicking on "Edit details":
For example, customize the application logo, which will appear in Power Apps. We can use the Star Wars logo, for example, by clicking on "Add an image," then change the background color to light gray:
Once you have added your image, close this window and click on the publish logo again in the upper right.
This time, click "Publish this version."
One last step: share your app with your colleagues by sending them the link via email.
Click "Back" in the upper left and select "Leave" in the window that appears.
Now we're back to the Power Apps home screen where you can see our application. Click on the three dots and then "Share":
In the window that opens on the right, choose the people you want to share the app with (internally only) and check whether you want to notify them by email instantly.
Once this is done, click on the "Share" button so they can access your application.
This time I can say: