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)

Once again select Create from Blank button

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

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)

Select +New Step

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

Enter Body Property textbox

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

Enter Response Body JSON schema (Fig.6)

{

    "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)

Enter Name of the Flow on top and select Save

Select Test button and Choose I’ll perform trigger action

Select Run flow and then choose Save & Test 

Ideal result can be seen in the Custom Get Employee action outputs

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

In formula bar section enter the following code line

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

Run the PowerApp to see the Values populated in dropdown from the Web API

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/