Home >Tips > Office 365 from Scratch > PowerApps Introduction kalmstrom.com site map icon Site map  

Create a Projects PowerApp from a SharePoint List

An Office 365 tutorial by Peter Kalmström

Office 365When we have our business data in the cloud it can be reached from everywhere via the internet, and today people work a lot out of office, using phones, tablets and laptops.

Working from outside the office is convenient and gives freedom to move around, but we often have to be content with the same interface as in the PC even if we are using a small touch screen. This creates issues, but now Microsoft has given a solution to the problem: the no-code development service PowerApps. From a user perspective, a PowerApp can be regarded as a new view for the data that the PowerApp is connected to.

With PowerApps, IT professionals can create apps for both mobile and desktop devices and distribute them to users within the organization. Office 365 users can even create their own apps, because it is not very difficult.

PowerApps cannot only be used with Office 365. It can also be connected to cloud services such as Dynamics CRM, Salesforce, Dropbox and OneDrive and on-premises systems as SharePoint, SQL Server, Oracle databases and SAP.

Product decision flow
In the demo below, Peter Kalmström, CEO and Systems Designer of kalmstrom.com Business Solutions, shows how to create a PowerApp called Projects. In this app, items in a SharePoint Projects list can be viewed, edited or removed, and new items can be created.

Any changes you make in the Projects PowerApp will be reflected to the Projects SharePoint list and vice versa.

Peter starts in a SharePoint Projects list, which has the new experience interface.
(Set the experience in the Advanced list settings.)

Create a Projects PowerApp

  1. In the Projects list, click on 'PowerApps' in the command bar and select 'Create an app'.
  2. Give the PowerApp the name "Projects" and click on Create.
The new app will now open at create.powerapps.com. It will have a touch friendly design and three different screens: Browse, Details and Edit, where some of the fields from the list will be shown. The design might not be optimal, but it is possible to modify which fields are displayed, and in which order.

Click on the Play button to the right in the top banner to see the Play screen and test your modifications.

Modify the Projects PowerApp Browse screen

The Browse screen has a search box on top, and under it a few fields of each list item are displayed. It is important that the most informative list fields are shown, so Peter suggests some changes in the design:
  1. Set the search box to look in the Title field by changing the search parameter shown in the Functions field. This is Peter's formula: 'SortbyColumns(Search(Projects, TextSearchBox1. Text, "Title"), "ID", If(SortDescending1, Descending, Ascending))
  2. To show the project title first, select the first field in the app and then select Title from the right pane.
  3. To show Status in the second field, select the field and click on Advanced in the right pane. Type 'Status.Value' after ThisItem instead of the existing text.
  4. To show the project region in the third field, select the field in the app and then select Region from the right pane.
  5. Microsoft PowerApps iconTo show cancelled items with a red title, select the Title field in the PowerApp and type 'If(Status.Value ="Cancelled", Red,' before the standard text color in the Functions field: 'If(Status.Value ="Cancelled", Red,RGBA(47,41,43,1)) '

Modify the Projects PowerApp Details and Edit screens

The details and Edit screens only show the fields of one item, and you can change the order of the fields by dragging and dropping the corresponding parameters in the right pane. The right pane shows the displayed fields first. Click on any not displayed fields to make it possible to display and drag.

Save and use the Projects PowerApp

When you are finished, save the PowerApp under the File tab. It will be stored at web.powerapps.com, which you can reach via the PowerApps tile in your Office 365 App Launcher. Sign in with your Office 365 account and select 'Apps I own' above the list of apps.

At web.powerapps.com you can remove or edit your PowerApps and also create new PowerApps.

To use the Projects PowerApp we have created here, you can just click on the Projects view in the SharePoint list. That view was added automatically when you created the PowerApp from the SharePoint list. The Projects view opens in the web player, web.powerapps.com.

When you have PowerApps installed on a smartphone or tablet, you will have the new PowerApp among the other apps in that device.

In the next article we will create a Phone Messages PowerApp

Learn more


Always the latest news in the kalmstrom.com blog

Follow kalmstrom.com on LinkedIn Facebook, Google+  or Twitter!

back icon next icon