SharePoint Online – Customization and Developing application on SharePoint using client site scripting and Office 365 services such as Power BI, Power Apps, MS Flow – Part 3

Hi Techies,
In one of my previous blog, I have described how can we design custom master page and use custom JavaScript codes or CSS to make it more interactive. Now, lets focus on developing an application “Home Expense” using Angular JS, Power Apps, Power BI and MS Flow.

In this blog we will go through most simple steps to create a Power App. We will be using “Site Menu” list we had created last time for main menu on master page.

We can create Power Apps from SharePoint lists itself and currently this option is available on modern UI only. For building simple single list based app we don’t need to go to Power Apps studio/builder. We can build Power Apps by using 2 or more List as data source using Power Apps studio/builder, but will explore on this in details on forthcoming articles.

So let’s proceed with this article…

Create App (Power-apps) from List:

Navigate to the “Site Content”. Click on “Site Content” from the action menu or by the below mentioned link. Now, the modern UI is promoted on Office 365 SharePoint Online. So, unless and until the classic UI is set as default on the site you will get the modern UI. Its important to mention that the Power-apps options for list is only available on modern UI.

<SharePoint domain>/sites/<site name>/_layouts/15/viewlsts.aspx

Figure 1: SharePoint Online – Site Content – List

As you can see here, on the command menu bar there is a link to Power-apps. This is option provided on SharePoint online modern UI. This allow us create app directly from this list itself. Click on this and it will ask for the name of the app. I named it as “HomeBudgetManagement”. Provide the name and click create. This will create an app for us and redirect us to the Power-apps studio.

Figure 2: Power-apps studio

Result:

Now, as you can see this is how easy to create a app (Power-apps) from SharePoint itself. Power-apps is a quite powerful. It’s the default editor for customizing / editing forms on Dynamics 365 CRM (Office 365).

Figure 3: Power-apps studio – HomeBudgetManagement app

On this app we can create a new, edit existing item and view all the list items. This app will be our base and we will extend it’s functionality as we move ahead in this series.

Thanks for reading 🙂

Keep reading, share your thoughts, experiences. Feel free to contact us to discuss more. If you have any suggestion / feedback / doubt, you are most welcome.

Stay tuned on Knowledge-Junction, will come up with more such articles