Creating a PowerApps + Flow App integrated with OnPrem Data source

This article explains how to create a PowerApp with Flow, calling custom web API hosted on local IIS to connect to local data sources

Creating a Microsoft Flow to access local data sources using Custom connector

Open the Flows in Office 365

Select Sign in and Login with your credentials

Select My Flows and then + New Flow and choose Create from Blank (Fig.1)

Figure 1: Creating a Flow

Once again select Create from Blank button

Enter PowerApp in search box and select PowerApp from the dropdown under Trigger tab (Fig.2)

Figure 2: Choosing the PowerApp

Select +New Step

Enter Custom web in search box and select Custom Web API

Select Get Employee from the drop down under Actions tab (Fig.3)

Figure 3: Choosing Custom web API connector

Select +New Step

Enter Response in search box and select Response Request in actions (Fig.4)

Enter Body Property textbox

 Figure 4: Sending Response to Power app

Select Body from Dynamic Content from left side pop up (Fig.5)

Figure 5: Selecting Body from Dynamic Content

Enter Response Body JSON schema (Fig.6)

Figure 6: Updating the schema

{

    "type": "array",

    "items": {

        "type": "object",

        "properties": {

            "ID": {

                "type": "string"

            },

            "FirstName": {

                "type": "string"

            },

            "LastName": {

                "type": "string"

            },

     "Title": {

                "type": "string"

            }

        },

        "required": [

            "ID",

            "FirstName",

            "LastName",

            "Title"

        ]

    }

}

Schema can also be generated by entering sample values in Using Sample Payload to generate schema (Fig.7)

Figure 7: Schema generation

Enter Name of the Flow on top and select Save (Fig.8)

Figure 8: Naming the Flow

Select Test button and Choose I’ll perform trigger action

Select Run flow and then choose Save & Test (Fig.9)

Figure 9: Testing the trigger action

 

Ideal result can be seen in the Custom Get Employee action outputs (Fig.10)

Figure 10: Test result

 

Building a PowerApp to access local data sources using Flow

In a web browser, open the PowerApps web app in Office 365

Select Apps then choose + Create an app then select Canvas

Select Phone or Tablet Layout

Go to Insert tab and click Controls and then click on drop down

Select Screen1 à in Action tab à

Select on visible à Choose Flows

Flow which is created can be seen under the Data tab you

Select the Flows to add to PowerApp (Fig.11)

Figure 11: Adding Flows to the PowerApps

 

In formula bar section enter the following code line (Fig.12)

 

ClearCollect(Employees,PowerAppGetEmployees.Run())

In the Dropdown, choose Items formula and enter remove Dropdownsample and add Employees in formula bar

In the right side of dropdown properties window under Advanced tab, Select Field from Value (Fig.13)

Figure 13: Selecting field from the Value dropdown

Run the PowerApp to see the Values populated in dropdown from the Web API (Fig.14)

Figure 14: Resulted values by running the PowerApp

Conclusion: 

Connecting and accessing data from on-premises is straight forward for both Microsoft Flow and PowerApp.  You can use this PowerApps even in mobile and tablet devices for data access and submission. Going forward you can implement PowerApp can work with maximum of 2000 records of a data source. If the data source having more than 2000 records is used, the Flows are more helpful to filter the data source and sends the data to PowerApp for further data manipulation in the app. So, both combination of PowerApps and Flows can build a better application across business usecase.

Refer Links:

https://docs.microsoft.com/en-us/connectors/custom-connectors/use-custom-connector-flow

https://powerapps.microsoft.com/nl-nl/blog/return-an-array-from-flow-to-powerapps-response-method/

 

Related posts