Recently I had to explore on a scenario where a real time API call result to be displayed on a Power App. Phone number validation is the current context. There are different providers like Loqate, Prove etc who provides third party APIs to validate a phone number.
Scenario: Given a User enters a phone number on an embedded canvas app and clicks on the validate button. And Canvas App triggers a Power Automate. And Power Automate triggers a third party API. Then Canvas app displays result (Valid number / Not valid) in realtime.
Here is an architecture diagram to understand this scenario. Please note that API Management part is optional but highly recommended. In the demo, I haven't used it.
As you could see in the diagram, a user accesses an embedded Power App to validate a phone number. Behind the scene, Embedded Power App triggers a Power Automate and Power Automate does a Third party API call ( via API Management - optional ) And result is returned back to Power App. Power App displays the result back to the user.
Invalid Number Case:
Valid number case : Tested with my own number : )
Let's see how it works!
For demo purpose, I have signed up a trial from Loqate to test the phone number validation scenario. This API doesn't have to be Loqate, whichever provider you prefer.
Loqate documentation could be found here -https://www.loqate.com/resources/support/apis/PhoneNumberValidation/Interactive/Validate/2.2/
This API can be tested from Postman first. Unfortunately the result from this webservice is in a table format. So it is a bit tricky to parse the results. In this case I just did the bare minimum. If you have a provider which returns in JSON, you could easily parse it using JSON parser in Power Automate.
Now let's take a look at the embedded canvas App. Very simple Canvas App here. Validate button calls a PowerAutomate as shown here.
Please note the formula Set(outputFromPowerAutomate,PowerAutomatePhoneNumberAPI.Run(txtNumberInput.Text))
Here outputFromPowerAutomate is a new variable which would hold the return value from Power Automate. So we set this variable with the result. txtNumberInput is the phonenumber value from the user.
Now I have a simple label Text with the below formula.
If(IsMatch( outputFromPowerAutomate.result, "Yes", Contains),"Result: Number is Valid","Result: Not Valid")
It displays the result based on the result from the Power Automate. As it is simple demo, it is only checking for the word Yes here. In a real scenario, the result needs to be parsed correctly and display accordingly.
Now let's the main one, Power Automate.
Key steps are here. But will expand each step further below.
First step is just a Power Apps step which represents a trigger received from a Power App. Second step is an HTTP call as shown below. Phone number value is received from the Power App. Key needs to be provided. Method is a GET operation. URL depends on your provider. In this context, Loqate webservice is used.
Final step is return to Power App. Result is a variable which holds the body results from the HTTP step.
Please note that this is a simple demonstration of API call from Power App + Power Automate. So it just returns the API response to Power App as it is.
You might need further steps to process the results in a real scenario. For instance, parse the JSON from the API call etc.
Depending on your scenario / requirements, you could add / remove steps from Power Automate and modify the Power App accordingly.
I hope it helps : )
