Wednesday 26 June 2019

Capture and Document User Information with Image on SharePoint - Part II


This is second part of article on capturing and documenting user details on to Office 365 SharePoint. The previous article shows setting up the Microsoft Flow to capture and creation of document with user details.
In this article, recording of user details is discussed. PowerApps forms are used to capture the user details. The details includes user name, picture, etc. Then integrating the form with Microsoft Flow is discussed.


Setting up the User Form

In my scenario, there are only two user entries recorded.
  • User Name
  • User Picture
Let us set the form.
  • Navigate to PowerApps portal/ app, and then select blank app.
  • From insert option, select two screens-
    • New blank screen - For user input
    • New Success screen - For showing user success message.
Screens & Controls Configured on the Form
Screens & Controls Configured on the Form

In the user input screen, insert the following controls.
  • Label and Text box for getting user information
  • Camera for capturing user image.
  • Button to trigger the flow.

On the camera control, navigate to properties and set the stream rate to 100 to capture images.
Set up stream rate to capture images
Set up stream rate to capture images


Microsoft Flow Integration from PowerApps (Form Submission)


Integrate the Flow: First, integrate the flow with the form's submit button. 
  • Select the button. 
  • From ribbon, choose flow under actions.
  • Select the previously created Flow. 
  • Once chosen, the flow will be listed under flow associations as shown below.
Action - Integrate the Flow to PowerApps
Action - Integrate the Flow to PowerApps 

Two set of actions are configure on form submission.
  • Submitting the data, triggers the flow
  • One data submitted, navigate and show the success screen.

1. Configure the Inputs to the Flow from PowerApps: Again select the submit button, to configure the inputs to the flow integrated. 
  • Select the submit button. 
  • Navigate to onSelect property. 
  • And set the run action, to send the entries to flow.

The required inputs for data submission are
  • CreatefileFileName - User Name (TextInput1.Text)
  • CreatefileFileContent - User Picture (Camera1.Stream)
Note: The above default entries are enabled and available to pass as parameters to Flow, once flow has the PowerApps trigger configured (Explained in the previous article). If more than 2 input parameters are required from PowerApps forms to Microsoft Flow, then "Ask in PowerApps" option has to be selected on Microsoft Flow.

2. Success screen on submission of data: Once data is saved, success screen has to be shown. That could be done by inserting success screen on the app. (The screen insertion was done in the beginning of the article)

onSelect property of submission button should look like the below snapshot.
Form Submit - Configuration to send the PowerApps Form data to Microsoft Flow.
Form Submit - Configuration to send the PowerApps Form data to Microsoft Flow.

Try running the PowerApps to test the form data flow to SharePoint via Microsoft Flow configured. The following snapshots shows the flow.

  • User Input Form.

User Input Form on PowerApps
User Input Form on PowerApps

  • On data submission, flow will be triggered and the data will be saved on to SharePoint. Then success form is shown for users. The document generated is shown below.

Generated document for user details captured via PowerApps and MS Flow
Generated document for user details captured via PowerApps and MS Flow

Thus, we have seen how to capture the user details easily via PowerApps and Microsoft Flow.

Advantage of using this approach could be,
  • No code solution
  • All steps are easily configured within a hour
  • Technical skills are not configured to set up the entire solution. You know what I mean :)..