Create a PowerApp from SharePoint list

In my last post we explored PowerApps and the associated development tools available like PowerApps desktop studio and PowerApps web studio. Without writing a single line of code we created our first basic three screen PowerApp and were able to perform CURD (create, update, read, delete) operations on our SharePoint data source.

In this, we will try an create a App from SharePoint list. we’ll create an app from a “Roster” SharePoint list.

First, we will see how PowerApps is integrated into SharePoint Online. Second, we will try to customize the app from the basic app created by PowerApp.

Lets get going…

To start here:

  • Login on to our SharePoint Online site.
  • Go to the list, “Roster”in our case.
  • List has columns like Employee Name, Skills, Shift Timings (Choice) , Image (Picture), Hours (Number), Shift Frequency, Overtime (Calculated).

PowerAppRosterList.png

To build an app, click PowerApps and then Create an app. In the right hand pane, enter a name of the app “RosterDetails”, then click Create.

Things to note:

  • The App will open an PowerApp web studio.
  • It will use our SharePoint list as our datasource

PowerAppCreatePowerAppFromList.png

So, after much of hard work!!! Yes I know… I get my Roster App as below, which to be honest looks very funny… and not very useful.

GeneratedApp.png

Lets make it better presentable…

Lets try quickly changing the theme:

  •  From left pane ‘Screens’, select thumbnail view and select ‘BrowseScreen1’

ScreensThumbnail.png

  • Click Home -> Theme and select ‘Coral’ (thats my choice, we can chose any we want…)

ScreensTheme.pngScreensCoralThemeView.png

Lets add more information on browse screen:

  • On the middle section, select browse gallery -> Layouts -> and select Layout as Image, title, subtitle and body
  • We set the values respective to reach property like Title 4 as ‘Title’, Body3 as ‘Hours’ and so on…

ScreensUpdateBrowseView.png

Small Confession to make…

I added the Images in picture library on SharePoint and linked it with my custom list ‘Roster’… but GUESS WHAT… PowerApp didn’t loaded the images.

But, when I linked the Image column with public URL for the image, it works. And yes… I did tried absolute URL but no luck…

So, after updating my custom list, my RosterDetails App look like:

ScreensNewBrowseView.png

Time for updating Detail screen

ScreensDetailsView.png

You know what, I really like this view, but I don’t want to show field Compliance Assest Id and Overtime field looks to be having too many 000000000000000, so we need to fix it.

  • We select the DetailForm on detailscreen
  • Click Layouts on right -> Uncheck the checkbox next to Compliance Assest Id field.
  • The field is no more on the view.

ScreenDetailFormView.png

  • On the same screen press ‘…’ next to Overtime field -> click Advanced options -> click Unlock to change properties

ScreenDetailFormUnlockPropertiesView.png

  • Unlockling the card will make this card as ‘Custom card’, do this will make all the properties of the field editable
  • Click next to label showing the overtime value, then on the right panel, click Text property and we update the function next to Text property from

Parent.Default ——–> Value(Parent.Default)

So, in order to get rid of ‘0’ decimals, we used function Value which converts a string to a number.

ScreenDetailFormFormula.png

Point to note:

  • I tried using formula as Text(Parent.Default,”#.00″), but it doesn’t do anything, but if use the formula as Text(2.0000000,”#.00″) it would give us 2.00
  • ‘[$-en-US]’ the language placeholder can appear anywhere in the custom format but only once. While writing a formula, if we do not provide a language placeholder, the format string is ambiguous from a global standpoint, the authoring tool will automatically insert the language tag for your current language.[$-en-US] is assumed if this placeholder is not present when your app is run.NOTE: In a future version, the syntax of this placeholder may change to avoid confusion with a similar, but different, placeholder supported by Excel.

Time to make changes to Edit Screen

ScreenEditScreen.png

  • Skills can be more then one so, lets change skills to have multi-line input field.

To do this, we just select Edit form -> click Layouts -> click ‘…’ next to Skills -> select Edit multi-line text.

ScreenEditScreenMultiline.png

  • Overtime needs to be same as detail screen

We will follow exactly the same steps as we did for Browse Screen.

  • Remove Compliance Assest Id

We will follow exactly the same steps as we did for Browse Screen.

And, yes we are done!!!

 

Conclusion

We created an PowerApp from SharePoint in no time, updated all the three views with minimum effort and got ourself a fine looking App which displays all the records, add and allow edit of the items in SharePoint.

References

Building my first PowerApp, a basic roster, pulling data from SharePoint Online

What is PowerApps?

PowerApps is a set of services and apps, that enable power users to build line of business application rapidly. It can connect to the cloud services and data sources that we may be already using.

Why PowerApps?

PowerApps gives power user ability to quickly build apps that suit specific needs. They can share apps instantly with Team across the web, tablets, and mobile devices. To list down, few of the advantages of PowerApps are:

  • Simple and fast – capable of producing an app in minutes that pulls in data from Excel or a cloud service.

  • Can be integrated with Microsoft Flow, making it possible to trigger workflows from within apps.

  • Robust and enterprise-grade, so can be used for complex requirements.

What you need to get started?

We can chose from two options:

  • PowerApps Studio for web

  1. Go to the url: https://web.powerapps.com

  2. You need to use your tenant account which would be something like xxx@yyy.onmicrosoft.com

  3. Choose from any of the start option
  • PowerApps Studio for Windows

  1. Go to the url: https://powerapps.microsoft.com/en-us/downloads/

  2. Download the App for windows.

  3. You need to login using your tenant account which would be something like xxx@yyy.onmicrosoft.com

We would need to use web.powerapps.com to configure and manage data connections and on-premises gateways, and to work with the Common Data Service.

Few points to note:

After we create an app, we can administer it in the admin center.

We run apps in a browser from Microsoft Dynamics 365 or by using PowerApps Mobile, which is available for Windows, iOS, and Android devices.

PowerApps components:

  • web.powerapps.com – manage and share the apps we build
  • PowerApps Studio – build powerful apps with easy to use visual tools
  • PowerApps Mobile – run apps on Windows, iOS, and Android devices
  • PowerApps admin center – administer PowerApps environments and other components

PowerApps Studio

PowerApps Studio has three panels and a ribbon, which gives the view same as creating a PowerPoint presentation:

  1. Left navigation bar: shows thumbnail
  2. Middle pane: shows the screen that you’re working on
  3. Right-hand pane: shows options such as layout and data sources
  4. Property drop-down list: where you select the properties that formulas apply to
  5. Formula bar: where you add formulas
  6. Ribbon: where you add controls and customize design elements

PowerAppStudio.png

PowerApps Mobile

PowerApps Mobile for Windows, iOS, and Android provides an environment where instead of going to separate app stores, we stay in PowerApps and have access to all the apps that we have created and that others have shared with us.

Admin center

The PowerApps admin center is the centralized place to administer PowerApps for an organization. This is where we define different environments, data connections, and other elements. The admin center is also where we create Common Data Service databases, and manage permissions and data policies.

Lets create our first App

Ok, now time to create our first PowerApp… so, lets fire up PowerApps desktop studio. So, for this demo, we will use data source as SharePoint and layout as phone layout

  • Click New -> SharePoint -> Phone layout

PowerAppStudioDesktopStart.png

Connect to a data source

On the next screen we need to specify the connection for SharePoint, where we will enter SharePoint Url and click Go.

PowerAppSourceConnection.png

On the next screen, we can select the list on the specified SharePoint site and select the respective list, in our example we will chose the list “Roster” and click Connectafter which PowerApps then start generating the app.

powerappsourceurl2.png

The generated app is always based on a single list and we can add more data to the app later. An app with default screen is built for us, which we can see in action by click play icon Start app preview arrow.

powerappsharepointbaseapp1.png

Our app in action

MyFirstPowerApp.gif

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

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

Conclusion

So, in this post, we tried exploring PowerApps and the development tool available like PowerApps desktop studio and PowerApps web studio. Without writing a single line of code we created our first basic three screen PowerApp and were able to perform CURD (create, update, read, delete) operations on our SharePoint data source.

In the next post we will try creating PowerApp from SharePoint list.