As part of my 30-Day Challenge I was required to build a functional app for a mobile device using Power Apps. This would be an ideal way for users to view the latest blog posts from the list of RSS Feeds on the go.
If you haven,t been following my end goal has been go from complete Microsoft 365 novice to someone that can create a professional-grade solution using SharePoint, Teams, Power Apps, Power BI, and Power Automate.
The solution I am building is the “Collab365 Curator” an RSS Aggregator. Here is the Design Specification.
Back to the Power App, before creating a finalized app ready to ship I began a prototyping stage where I could piece together a variety of screens and functionality as specified from the design specification.
The design specification requires 7 screens to present the necessary information from my data sources (SharePoint lists and RSS feeds).
Using the methods I learned from the Collab365 #GlobalCon3 Beginners Day, I was able to create and name screens and begin adding elements to the individual pages.
In this blog I will cover the following topics:
- How to create new screens in Power Apps
- How to add a form using SharePoint Data Sources to a Power App page
- How to Create a button to submit a form to a SharePoint list in Power Apps
- How to Create Navigation buttons in Power Apps
- How to use Gallery to show information in a SharePoint List
How to create new screens in Power Apps
To create a new screen in Power Apps you first need to Create a Power App. Now we are in our editorial screen for our new Power App, you can see that we already have a screen that is created with our new Power Apps project.
I added more screens to my project by using the “New screen” option from under the Home or Insert menu.
You are presented with multiple different options for your new screen. I’d personally like to understand the functionality behind each of these screen types so I will choose “Blank” to give me the ability to build everything from scratch. However if your looking for a quick solution, some of the templates will better suit your needs and are a great way to get started.
I now have my 6 screens created as listed in the Design Specification.
How to add a form using SharePoint Data Sources to a Power App page
Inside my “Form Screen” I want to add a form in which the end user can fill in and submit. With the screen selected I need to first add a form.
There are 2 types of form you can insert in to a Power Apps screen.
- Edit Form: Lets users add existing fields and add new rows to a data source.
- Display Form: Display fields from a data source in a read-only form.
Both are viable options and prove powerful in their functionality. To put it simply I would use an Edit Form where users need to view and submit data and a Display form where users need only view data.
The purpose of my form screen as specified is to “Allow a user to suggest a new web site feed to add to the the company curator. When this form is submitted it should add a new item to SharePoint“.
I began by inserting an Edit form onto my Form Screen.
I now have a blank form inside of the Power Apps page. There is plenty of functionality and the ease of controls allows me to integrate seamlessly with my SharePoint site and the created lists within it.
The next step, I need to point my form to my Feed List inside SharePoint. Power Apps makes this incredibly easy to accomplish.
With the newly created form selected, you have a properties panel on the right hand side.
We will first look at the Data Source and Fields fields and point them to the relevant place.
I will click the drop-down box next to Data Source and search for SharePoint.
I can then select my SharePoint site from the list.
And then choose the list I want to be able to submit data to.
Our form is now beginning to take shape. All of our columns from our feed list are now being displayed in our editable form. However, a few of the fields in this list are controlled by automation and be only available to admins. As this app is designed for the end user we need to hide and remove columns that must not be edited.
These fields are:
- Approved: Controlled by an approval workflow inside of Power Automate
- Paused: Controlled by an admin in the back end if the feed is returning errors
- Last Fetch Time: Controlled by an automation in Power Automate
- Requester: This will be controlled in the back end, and not be edited by the end user
Power Apps automatically splits the form into relevant sections. So we can select the sections we want to hide and toggling the Visible option from the properties panel as shown below.
Now we have hidden the sections of the form we don’t want to see our app is now looking like this.
How to Create a button to submit a form to a SharePoint list in Power Apps
Now our form is setup, and we have a couple of pages inside our app, we need to create some basic functionality using buttons. There are other interesting ways to add functionality for navigation and form submission, but this is the simplest and most common method.
Let’s start by creating a ‘submit’ button for our form.
I do this by selecting Insert then clicking button.
Note: When hovering over items inside Power Apps you are shown a brief summary of what you can use each item for. This has helped me a lot to understand some of the uses inside Power Apps.
I now have a button on my Form screen. I will begin giving it some functionality.
What do we want the button to do?
We need it to submit the information in the Editable form to our SharePoint List, specifically the Feed List.
To do this we need to select the button, and switch to the advanced tab on the edit panel on the right hand side. We are looking for ‘OnSelect’ which will be set to ‘false’ by default.
This expression tells the button to Submit a form. We need to specify which form needs to be submitted which is inserted between the open and close brackets.
Power Apps is powerful and knows after using the expression SubmitForm() that you are going to be selecting a form to submit. selecting after the open brackets you are presented with suggestions based on the forms inside your Power App.
Note: The name of your form is the name used inside the brackets. Without naming my form, it will point to Form1 which is the assigned name for a form that I create. As you get to more complex Power Apps it is a good idea to rename all controls with meaningful names in order to help with understanding when maintaining and changing the App in the future.
Without changing the name I will insert ‘Form1’ inside the brackets of the expression.
I can also edit the name of the button and the text wrapped inside the button as needed.
My button should now submit the form to my SharePoint list.
How to Create Navigation buttons in Power Apps
Buttons can also be used for Navigation around your Power App for instance, switching between screens. Lets use the same method to add a button as before.
This time the Expression we will use is going to be different.
For this to work you will need to have created more than 1 screen. Click here to find out how.
With our new button selected, we will go to the ‘OnSelect’ section in the advanced tab and write the expression:
Just like before, Power Apps will search and suggest all of the pages in your project, which you can insert inside the brackets.
You will need to surround the page name inside single quotations inside the brackets. For Example:
Navigate(‘Latest Post Screen’)
You can test the functionality of your buttons by holding ‘Alt’ or entering the test window at the top right.
How to use Gallery to show information in a SharePoint List
I will head over to my Latest Post Screen. This is where I will show a scrollable list of RSS articles from my Articles list in SharePoint. I will render this to the screen by using a Gallery.
There are a bunch of different gallery styles all with different a different look and feel, which one you choose would depend on the type of information you are wanting to show, the style and design of your application and how you want the gallery to function.
For the purpose of this demonstration I am going to use the common Vertical Gallery which will sit flush with my Mobile style application.
To add the Vertical Gallery you can go to Insert then your preferred gallery from the drop down menu alternatively you can find it from the Insert list on the left hand panel.
We can now select our new gallery and setup our data source.
As with the previous form screen, it works in an identical way. We head to the properties panel and find the Data Source.
We can then search for SharePoint and choose our Articles list from the relevant SharePoint Site.
SharePoint is currently receiving data from an automation in Power Automate to retrieve an automatically updated list of articles. However the method and principle of using a gallery to show information from a SharePoint list is the same.
There are many tools to get started with in Power Apps, and so much of it is self explanatory. There are many other tweaks and other functions to add and learn about which is outside the scope of this blog post, such as importing images, and playing with colour and item positioning. I spent a few hours playing with the expressions, seeing what is possible and I cant wait to go wild with this.
I hope this has given you a good insight to how I am using some of the elements inside of Power Apps to begin building my application.