Power Apps Development in Fusion Teams
Tags: azure, powerapps, serverless, fusionteams
Published: 2021-05-14 00:00:22

---
title: Power Apps Development in Fusion Teams
published: true
description: This post shows how a fusion dev team develops a Power Apps app with a citizen developer, with a real-world example.
tags: azure, powerapps, serverless, fusionteams
canonical_url: https://devkimchi.com/2021/05/12/power-apps-in-fusion-teams/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okuq19zaywnki3zuphth.png
series: Fusion Teams in Action

---
Microsoft has published a [learning path for fusion dev teams][pa fusion path]. In addition to that, they also [published an e-book][pa fusion ebook] for it. We can see how an organisation can build up a fusion team and deliver services through this fusion development approach.

[Gartner][gartner fusion] claims that 84% of organisations have at least one fusion team. According to the article, Gartner defines the fusion team as a "cross-functional team that uses data and technology to achieve business outcomes". Because of this nature, the fusion team's leader often comes from the business side rather than the IT side and makes decisions from the perspective outside of IT. In other words, the fusion team pursues the business achievement from the broader organisational aspects, although they use technologies. What can the fusion team deliver a service or product for their customers, then?

Lamna Healthcare Company is a fictitious company that provides health and fitness services for their members. They are about to build a mobile app using [Power Apps][pa]. Throughout this post, I'm going to observe how they cope with it within the fusion team.

> You can find the sample code used in this post at this [GitHub repository][gh sample].


## Scenario ##

Lamna Healthcare Company runs a fitness centre in Korea. Ji Min is a team leader for personal trainers. The centre has built a system that the trainers put the workout logs for their members through a system. For their customer experiences, they at the same time also write the records to their members' journal by hand. Ji Min wonders whether it's efficient for both trainers and members because it seems they write the same log twice. Fortunately, she's willing to build a Power Apps app for those workout logs. When a trainer or member logs the workout details through the app, the centre stores the data to their data storage ([Azure Cosmos DB][az cosdba]) through their backend ([Azure Functions][az fncapp] and [Azure Service Bus][az svcbus]).

As the backend API has already been up and running, all she needs to do is to use the API within Power Apps via a [custom connector][pa cuscon]. The end-to-end application architecture looks like:

![GymLog Architecture][image-01]

* [Azure Functions][az fncapp] used as the backend API adds the [OpenAPI extension][az fncapp extension openapi], which increases discoverability.
* A custom connector is generated by the OpenAPI document.
* Through the custom connector, the Power Apps app sends the workout data to the backend system.
* The backend system implements the [Pub/Sub pattern][eip pubsub] that handles data asynchronously.
* At the publisher's end, data from the Power Apps app keeps accumulated. Then it is aggregated when a workout routine ends and sent to [Azure Service Bus][az svcbus].
* At the subscriber's end, another Azure Functions takes the message from Azure Service Bus and finally stores it to [Azure Cosmos DB][az cosdba].


## Improving Backend API ##

As Ji Min is a part of the fusion team representing the personal trainers' team, she contributes many ideas to the team to achieve more business outcomes. Su Bin is a pro dev in the same fusion team who is responsible for the backend APIs. Ji Min asked Su Bin to make the API discoverable so that Ji Min can do something on her side. Therefore, Su Bin added the OpenAPI extension to the Azure Functions app by installing the [NuGet package][nuget openapi].

```bash
dotnet add package Microsoft.Azure.WebJobs.Extensions.OpenApi --prerelease
```

By adding minimal efforts, Su Bin added a few OpenAPI-related decorators to the function endpoints. The following code snippets are just an example API for creating a routine when a workout begins. As it's over-simplified codes for brevity, you can check out the full codes at [this link][gh sample api routine].

{% gist https://gist.github.com/justinyoo/1cb47ec0dad64609d26f1fa69a75b60d file=01-create-routine.cs %}

After the decorators being added, deploy the function app, and you will see the Swagger UI screen like:

![Publisher Swagger UI][image-02]

As the OpenAPI extension supports both V2 (Swagger) and V3, you'll see either V2 or V3 doc depending on your configurations when you visit `https://<function_app_name>.azurewebsites.net/api/swagger.json`. The screenshot above renders the V3 doc.


## Create Custom Connector ##

The serverless API has now got better discoverability. Now it's time to create a custom connector for Power Apps to access the API. As Power Apps is a low-code app maker platform, Ji Min, as a citizen dev, can easily make the custom connector. Click the `Custom Connector` menu at the left-hand side, click the `➕ New custom connector` button and select the `Import an OpenAPI from URL` menu.

![Import OpenAPI from URL][image-03]

Put the OpenAPI document URL to the field of `Paste in the URL for the OpenAPI`. Currently, the custom connector only supports the OpenAPI spec v2. Therefore, use the URL, `https://<function_app_name>.azurewebsites.net/api/openapi/v2.json` for import.

![Import OpenAPI from URL Pop-up][image-04]

Sometimes, you'll have the following error during the import. It's because the CORS setting is missing between the Power Apps Studio and Azure Functions app instance.

![Import OpenAPI from URL CORS Error][image-05]

To figure this out, add the URL, `https://flow.microsoft.com`, to the Azure Function's CORS settings.

![Azure Functions App CORS][image-06]

After the CORS configuration, go back to Power Apps Studio and create the custom connector again. It's now OK without an error. As the rest of creating the custom connector process is the same as [this process][pa cuscon create], I won't repeat it here. Finally, you've got the custom connector for the Gym Logs.

![Custom Connector Created][image-07]


## Connecting Custom Connector via Authentication ##

In order for Ji Min to use the custom connector within her Power Apps app, a new connection must be created beforehand by providing authentication details. As API keys protect Azure Functions API endpoints, give the key for the authentication. Click the `➕` button.

![New Connection][image-08]

Enter the API key to the field and click the `Create` button.

![API Key Auth][image-09]

Now, you've got the connection and can use the custom connector within the Power Apps app.

![Connection Created][image-10]


## Accessing Custom Connector in Power Apps ##

Ji Min is now able to enter her members' workout logs through the Power Apps app instead of hand-writing them. Add the custom connector on your Canvas app.

![Custom Connector in Power Apps][image-11]

It's all done! Ji Min finally can manage all the workout logs through the mobile app! Here are a couple of screenshots while using the app.

![Power Apps in Action #1][image-12]
![Power Apps in Action #2][image-13]

All members' workout logs are stored into [Azure Cosmos DB][az cosdba] asynchronously.

![Gym Logs in Cosmos DB][image-14]

Now, Ji Min is happy, her trainer crews are happy, and all members are happy because they can easily record their workout histories.

> You can download the GymLogs app directly from the [GitHub repository][gh sample app] and import it to your [Power Apps][pa] environment.

---

So far, we've walked through how both citizen developer and pro developer can work together within a fusion team &ndash;

* Citizen devs make [Power Apps apps][pa], and
* Pro devs provide the citizen devs with discoverable APIs by adding an extension to the existing [Azure Functions][az fncapp] application.

After this collaboration practice, Lamna Healthcare Company can offer better customer experiences with the workout log apps, resulting in their business growth.

* Members can freely record their exercises, and
* Trainers can analyse the data and offer more personalised workout schedules.

In the next post, let's trace the end-to-end data flow through [Azure Monitoring][az monitor].


[image-01]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-01.png
[image-02]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-02.png
[image-03]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-03-en.png
[image-04]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-04-en.png
[image-05]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-05-en.png
[image-06]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-06-en.png
[image-07]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-07-en.png
[image-08]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-08-en.png
[image-09]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-09-en.png
[image-10]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-10-en.png
[image-11]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-11.png
[image-12]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-12.png
[image-13]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-13.png
[image-14]: https://sa0blogs.blob.core.windows.net/devkimchi/2021/05/power-apps-in-fusion-teams-14.png


[gh sample]: https://github.com/aliencube/GymLog
[gh sample api routine]: https://github.com/aliencube/GymLog/blob/main/src/GymLog.FunctionApp/Triggers/RoutineHttpTrigges.cs
[gh sample app]: https://github.com/aliencube/GymLog/blob/main/packages/GymLogs.zip

[pa fusion path]: https://docs.microsoft.com/learn/paths/transform-business-applications-with-fusion-development/?WT.mc_id=power-27849-juyoo
[pa fusion ebook]: https://docs.microsoft.com/powerapps/guidance/fusion-dev-ebook/?WT.mc_id=power-27849-juyoo

[gartner fusion]: https://blogs.gartner.com/hank-barnes/2021/03/30/fusion-teams-a-critical-area-for-vendors-to-develop-understanding/

[eip pubsub]: https://www.enterpriseintegrationpatterns.com/patterns/messaging/PublishSubscribeChannel.html

[az fncapp]: https://docs.microsoft.com/azure/azure-functions/functions-overview?WT.mc_id=power-27849-juyoo
[az fncapp extension openapi]: https://github.com/Azure/azure-functions-openapi-extension

[az svcbus]: https://docs.microsoft.com/azure/service-bus-messaging/service-bus-messaging-overview?WT.mc_id=power-27849-juyoo
[az cosdba]: https://docs.microsoft.com/azure/cosmos-db/introduction?WT.mc_id=power-27849-juyoo

[az monitor]: https://docs.microsoft.com/azure/azure-monitor/overview?WT.mc_id=power-27849-juyoo

[pa]: https://powerapps.microsoft.com/?WT.mc_id=power-27849-juyoo
[pa cuscon]: https://docs.microsoft.com/connectors/custom-connectors/?WT.mc_id=power-27849-juyoo
[pa cuscon create]: https://docs.microsoft.com/connectors/custom-connectors/define-openapi-definition?WT.mc_id=power-27849-juyoo

[nuget openapi]: https://www.nuget.org/packages/Microsoft.Azure.WebJobs.Extensions.OpenApi/