Sharepoint: Getting started with Microsoft Flow and PowerApps

Microsoft Flow and PowerApps

Microsoft introduced the commercial availability of Flow and PowerApps on October 2016. Microsoft quoted in the launch :

PowerApps and Flow join Microsoft Power BI to create what we on the team refer to as the power trio. Collectively they allow “power users” (read: non-developers) to get done what would have in the past required programming skills. It enables people to automate workflows and quickly build custom apps that suit their specific needs. Microsoft Flow is a cloud-based service that makes it simple to automate common tasks and business processes across your applications and services, such as Office 365, Slack, Dropbox, SalesForce.com, Dynamics 365 and many more PowerApps provides a great mobile experience, and now that experience is connected to the data stored in SharePoint lists

Getting Started with Microsoft Flow

The general availability of Microsoft Flow was announced on October 31 by Stephen Siciliano in this blog. Flow makes it easier to automate the business processes and Microsoft is investing a great amount of time in developing Power Apps and Flow, as it is going to play a huge role in the future, which is stated by the official product update. Microsoft Flow is a cloud-based service that makes it simple to automate common tasks and business processes across applications and services, such as Office 365, Slack, Drop Box, Sales Force .com, Dynamics 365 and many more. Microsoft Flow site will help us get a first-hand experience of Flow.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image001.png

We can sign in from the Microsoft Flow site to start using the Flow features. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image002.png

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image003.png

In this article, we will see how to automatically save the attachments associated with an Outlook Mail to SharePoint List using Microsoft Flow. This helps to archive the Outlook attachments. 

SharePoint Prerequisites

As the first step, let's create a SharePoint List that will hold the Outlook attachments.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image004.png

From the list, Select Create a Flow option.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image005.png

It will open up the flow options available. Select See more templates options

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image006.png

From the extended set of Flow options, select Save my email attachments to a SharePoint Document library.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image007.png

To get started with configuring the flow action, select Use this template. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image008.png

Ensure that the tick mark is present against both the components – Outlook and SharePoint. Otherwise a sign in button will be present against it. Click on Continue. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image009.png

Configure the Flow

It will open up the default flow action steps for saving the Outlook attachment to a SharePoint List. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image010.png

In the On new email action, specify the folder of the Outlook mail where the flow will be attached. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image011.png

Here let�������s specify it as Inbox as we are more concerned about saving the email attachments that come to the inbox.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image012.png

In the Create fileScope action set the Site URL and Folder Path variables to appropriate SharePoint location values. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image013.png

Click on Create Flow and subsequently on Done to create the Flow. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image014.png

The new flow has been created. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image015.png

Test the Flow

In order to test the flow, create a new mail and send it to the Outlook mail address that was used in the authentication step. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image016.png

Make sure that the attachment that is intended to be copied to SharePoint is attached to the mail.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image017.png

On sending the mail, the Outlook address has received the send mail as shown below. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image018.png

Let’s head over to the SharePoint Library where the flow is attached. We can see the attachment of the mail has been copied to the Document Library. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image019.png

If we go to the Flow Site, we can edit the existing flow from My Flows. We can also conditionally turn On/Off the flow. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image020.png

The inverted exclamation mark will also show the previous run time history of the flow.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image021.png

Clicking on the arrow next to each run detail will give further internal functioning steps of the flow. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image022.png

If we have some new steps to be added to the flow, we can add them and click on Update Flow to modify the flow. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/create-a-microsoft-flow-that-saves-outlook-attachments-to-sharepoint-library/Images/image023.png

Summary

Thus we saw how to create a Flow that saves the Outlook attachment to SharePoint Document Library.

Getting Started with Microsoft PowerApps

The general availability of Microsoft Flow and PowerApps was announced on October 31, 2016, which enables users to create workflows and custom apps. Though the official confirmation has not come yet, Chris McNulty, a senior product Manager from Microsoft, has confirmed that PowerApps and Flow will be the future replacement for InfoPath forms which are set to retire by 2026. You can catch up on the interview with him here.

PowerApps lets users create custom apps based on the data we input or based on an existing data source.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image001.png

PowerApps provides mobile templates that are responsive across mobile devices. With the current functionalities provided by PowerApp, though we cannot say that it is a replacement for infopath, we can definitely see that it can mature itself into a Custom Forms Solution for SharePoint. Below is the screen shot of a SharePoint List PowerApp that I have created and viewed from a mobile device. As you can see, it is responsive and fits in perfectly with what can be called a SharePoint Mobile app. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image002.png

In this article, we will see how to get started with PowerApps and SharePoint integration. We can connect to SharePoint and make custom apps using PowerApps in two ways.

• Use the embedded PowerApps option available in the Modern List Experience in SharePoint Online.
• Connect to SharePoint from the PowerApps site and create a custom app.

We will cover both options in this walk-through.

Get started with PowerApps creation from SharePoint

The modern list view has PowerApps creation option embedded. Clicking on it will give us the option to create a new custom app. Here, we have a Products list and we will create a new View for the list, using PowerApps. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image003.png

On clicking on "Create an app", a window will open up where you can specify the name for the custom app. Click on "Create".

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image004.png

This will take us to the PowerApp site. If you are not a registered user, register yourself. You will get the below screen that lets you access the trial version.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image005.png

Once we are in the site, it will open up PowerApp Studio which will create the custom app based on the SharePoint list data. We also have a PowerApp Studio for desktop version that lets us work from the desktop. For the time being, we will stick to the web version of PowerApp Studio.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image006.png

Once it is created, we can see the available screen layouts for the app in the left pane. Here, there are three screens.

*BrowseScreen - *The display page of the list that shows a summary view.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image007.png

*DetailScreen - *Shows the drilled down details of a specific list item.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image008.png

*EditScreen - *Clicking on Edit will show this screen that lets user edit the item.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image009.png

We can customize the forms, change the layout, and modify the color scheme, using the available tools within PowerApps (which will be covered in detail in an upcoming article). We will now see the created custom PowerApp in action. Click on the Run button in the browser.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image010.png

It will display the list form using the mobile template. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image011.png

Clicking on the expand arrow will show the detailed drilled down of the list item. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image012.png

From the File menu, we can save the newly created custom app. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image013.png

Now, heading over to the SharePoint List, we can see the customPowerApp available as a new list view. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image014.png

Clicking on it will show the below screen that lets us open the view in PowerApp Site. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image015.png

Click on "Open" and you will have the mobile SharePoint list view in the PowerApps. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image016.png

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image017.png

Mobile View Testing

The URL of the Custom PowerApp can be shared among users and can be accessed from variety of devices. Let’s see how it behaves from a mobile device. Opening the URL will ask for the PowerApps authentication. I have provided the Office 365 credentials and signed in. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image018.png

It has opened the PowerApps site in the mobile. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image019.png

The Product's custom PowerApp, which we had created earlier, has come up in the mobile and it is responsive with respect to the mobile user agent. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image020.png

Clicking on details shows the Detail Screen of the PowerApp. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image012.png

We can also edit the PowerApp and all of these things happen seamlessly in the mobile device. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image021.png

Create SharePoint PowerApps from PowerApp site

Earlier, we saw how to create the PowerApp directly from SharePoint. The other option to create a PowerApp based on SharePoint List is to connect to SharePoint from PowerApp Site. Once we log in to the site, we have the option to create a new app, as shown below. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image022.png

On Clicking on New app, we can choose the kind of PowerApp Studio we would like to use. We can go with either the Web based or Desktop version of PowerApps Studio. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image023.png

From the next screen, choose SharePoint and proceed.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image024.png

Now, let’s set up the connection to SharePoint Site. Specify the SharePoint Online site URL .

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image025.png

Now, specify the SharePoint List based on which we have to create the custom app. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image026.png

This will create the custom PowerApp based on the SharePoint List data. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image027.png

As we saw in the beginning of the article, the PowerApp created is similar and functions the same way as the app created from SharePoint. 

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/getting-started-with-power-apps-for-sharepoint/Images/image028.png

Summary

Thus, we saw how we can create a custom PowerApp from SharePoint List. Lots of work is still going on in the PowerApps Team at Microsoft, and we can expect more features to be added on. Stay tuned for the latest updates at the PowerApps Blog.