• Thank you! ❤️
• Recap of #30DaysOfLowCode
• Continue the Journey
• Get Started: Sign up for your Free Developer Plan

Thank you! ❤️​

It's hard to believe that #30DaysOfLowCode is coming to an end! It seems like just yesterday that we launched this initiative, and yet here we are, 30 days later, with an incredible amount of learning and growth behind us. So... it's time for a wrap!

The numbers for the #LowCodeFebruary campaign are truly impressive, with over 130,000 visitors to the event page, 16,000 attendees (live and on-demand) to the Powerful Dev Conf, and 2,500 participants taking part in the cloud skills challenges. What's more, we have welcomed countless attendees joining the various events and activities, from blogs series, to workshops, learn lives, webinars, and more.

From the bottom of our hearts, we want to thank each and every one of you for your participation, engagement, and enthusiasm. It's been truly inspiring to see the passion and dedication from this strong community, and we're honored to be a part of it. ✨

Recap of #30DaysOfLowCode​

As we wrap up this exciting event, we wanted to take a moment to reflect on all that we've accomplished together. Over the last 30 days, we've covered a lot of ground, from the basics of Power Platform to more advanced concepts like custom code and app lifecycle management.

Now that the campaign is ending, we want to make sure that you have all the resources you need to continue honing your skills in the future. Whether you're looking to build your first app, collaborate with others, or simply keep learning, there are plenty of resources out there to help you achieve your goals. So, let's dive in and explore all the ways you can continue to skill up in Power Platform!

Important skill-up resources:

1. 📅 #30DaysOfLowCode By following the sequence of the blogs, you can build your knowledge step-by-step, gaining a deeper understanding of the various tools and capabilities of Power Platform along the way. This approach allows you to build a solid foundation of knowledge while also challenging yourself to grow and develop your skills.

   #30DaysOfLowCode Roadmap:

   • Week 1️⃣: Fundamentals: Power Platform core concepts, getting onboard and developer stories
   • Week 2️⃣: Backend Integrations: Connectors, dataverse, custom connectors, API management, Azure integration and hand-on practices & turorials
   • Week 3️⃣: User Interface: Building a Canvas app, introduction to PowerFx, Power Component Framework Controls, Power Pages as well as OpenAI and Power Platform.
   • Week 4️⃣: Dev Experience: Tutorials on ALM (App Lifecycle Management), GitHub Actions, App Governance, Automated testing, as well as ACS and OpenAI.
   • Week 5️⃣: Wrap-up: API Management, Power Platform Pipelines and Monthly Recap

2. 🚀 #ZeroToHero Get the latest updates on technologies and products for low code development directly from product teams.

3. 📺 Video + Livestream 📻 Join online conversations with product teams and ask questions.

   🎉 Sign Up for Low Code February Ask The Experts! on Mar 09, 9AM PST for the hero Q&A session from the Low Code February leadership team. Our experts will be available to answer questions about full code and low code integration.

   Recap on past hero sessions🌟:

   1. Powerful Devs Conference: On-Demand The Powerful Devs Conference is a fantastic resource for developers who want to learn more about the Power Platform and how to build applications quickly and easily.
   2. Webinar: Power Platform & Azure Deploys with GitHub: On-Demand Watch the on-demand webinar, where you'll get a chance to explore the powerful capabilities that the Power Platform opens up for GitHub.
   3. Powerful Dev Ask The Expert: On-Demand - Watch the last session for Q&A from the Powerful Devs Conference team. The Powerful Devs Conference is all about showing how code-first developers can integrate with the Power Platform to innovate faster.
   4. Learn Live! - On-Demand Check out our Learn Live recordings if you have any questions or concerns about the Microsoft Learn modules or the Cloud Skills Challenge.

4. 📖 Self-Learning Resources

   1. Low Code February Video Turorials collection
   2. Power Platform Learn Modules
   3. Cloud skills Challenge: gives you a free curated set of learning modules to jumpstart your learning journey into Low Code and fusion development.

5. ⚒️ Dev Workshops Learn by doing! These labs help you gain hands-on experience from intro to advanced, whereever you're in the learning path.

6. 😁 Community Buzz Connect with the community and contribute your expertise by building interesting demos or writing articles.

Continue the Journey​

We believe that initiatives like #30daysoflowcode are critical in empowering developers to build up the technical skills they need to succeed in the digital transformance era.

Stay tuned and 🔖 save the page, as we will be back soon with more exciting content and resources to help you continue your learning journey. We're committed to supporting you in your growth and development, and we'll be providing even more opportunities for you to learn and build with low code! 🎉

Introducing Authorizations in Azure API Management and showcasing its capabilities together with the Microsoft Power Platform. Last time, we talked about how we can provide extra security to our web APIs using Azure API Management. In this section, we will talk about the Authorizations feature in Azure API Management and how this can elevate your low-code journey with web APIs.

What We'll Cover​

• What is API Management Authorizations
• Scenario - Power Apps integration with GitHub and API Management Authorizations
• Scenario Overview
• Prerequisites
• Step 1: Register an application in GitHub for your organization
• Step 2: Configure an authorization in API Management
• Step 3: Create an API in API Management and configure a policy
• Step 4: Create a custom connector for the Microsoft Power Platform using API Management
• Step 5: Call your web API via your Power App

What is API Management Authorizations​

API Management authorizations allows you to delegate authentication to API Management to let it authenticate against a given backend service or a given SaaS platform. It greatly simplifies the process for authenticating and authorizing users across these services and reduces development costs in ramping up, implementing and maintaining security features with service integrations. It lets you configure OAuth, Consent, Acquire Tokens, Cache Tokens and refreshes tokens for multiple services without writing a single line of code. API Management does all the heavy lifting for you, while you can focus on the application/domain logic.

Note: It differs from managed identity in that it spans multiple identity providers (IDP), as it is not tight to Azure Active Directory. It also leverages OAuth flows, such as the Authorization code flow, while managed identities stick to the Client Credentials Grant.

Scenario - Power Apps integration with GitHub and API Management Authorizations​

Scenario Overview​

Imagine having a GitHub organization with multiple team discussions. In one of your team discussions, you want to collect issues from users via comments. Now, to post a GitHub comment, every user requires a GitHub account and needs to understand where to find the relevant team discussion.

Let's create a Power App that uses a custom connector to call the right GitHub API to post a comment about an issues to a team's discussion.

Note: Microsoft Power Platform offers wide varity of pre-installed connectors, one of them for GitHub. For our scenarios however, this connector doesn't provide us with the right capability. Creating a custom connector using Azure API Management is an easy and secure way to expose your microservices/APIs directly. This way, you can expand the possibilities with the Microsoft Power Platform and adapt it according to your organization's use cases.

Prerequisites​

• A GitHub account is required.
• A team discussion in your GitHub organization. Follow Creating a team discussion for more information.
• A running API Management instance. Complete the following Quickstart: Create a new Azure API Management service instance by using the Azure portal.
• Enable managed service identiy for API Management in the API Management instance.
• Make sure you have a Power Apps or Power Automate environment.

Step 1: Register an application in GitHub for your organization​

1. Sign in to GitHub.

2. In your account profile, go to Your organizations and select the organization that the scenario is for.

   

3. In your organization's profile, go to Settings > Developer Settings > OAuth Apps > New OAuth App

• Enter teamdiscussion as your Application name
• https://portal.azure.com as your Homepage URL
• Optionally, add an application description.
• In Authorization callback URL (the redirect URL), enter https://authorization-manager.consent.azure-apim.net/redirect/apim/{YOUR-APIM-SERVICENAME} (substituting the API Management service name that is used).

4. Select Register application.

5. In the General page, copy the Client ID, which you'll use in a later step.

6. Select Generate a new client secret. Copy the secret, which won't be displayed again, and which you'll use in a later step.

   

Step 2: Configure an authorization in API Management​

1. Sign into Azure portal and go to your API Management instance.

2. In the left menu, select Authorizations > + Create.

   

3. In the Create authorization window, enter the following settings, and select Create:

   Settings	Value
   Provider name	github-discussion
   Identity provider	Select GitHub
   Grant type	Select Authorization code
   Client id	Paste the value you copied earlier from the app registration
   Client secret	Paste the value you copied earlier from the app registration
   Scope	write:discussion
   Authorization name	auth-discussion

4. After the authorization provider and authorization are created, select Next.

5. On the Login tab, select Login with GitHub. Before the authorization will work, it needs to be authorized at GitHub.

6. Sign in to your GitHub account if you're prompted to do so. If prompted during redirection, select Allow access.

7. After authorization, the browser is redirected to API Management and the window is closed. In API Management, select Next.

8. On the Access policy page, create an access policy so that API Management has access to use the authorization. Note: Ensure that a managed identity is configured for API Management.

9. Select Managed identity + Add members and then select your subscription.

10. In Select managed identity, select API Management service, and then select the API Management instance that is used. Click Select and then Complete.

    

Step 3: Create an API in API Management and configure a policy​

1. Sign into Azure portal and go to your API Management instance.

2. In the left menu, select APIs > + Add API and select HTTP.

   

3. Enter the following settings. Then select Create.

   Settings	Value
   Display name	githubdiscussion
   Name	githubdiscussion
   Web service URL	https://api.github.com
   API URL suffix	githubdiscussion

4. Navigate to the newly created API and select Add Operation. Enter the following settings and select Save.

   Settings	Value
   Display name	POSTdiscussioncomment
   URL for POST	/orgs/{org}/teams/{team_slug}/discussions/{discussion_number}/comments

Please find here an example of a POST URL:

/orgs/AuthorizationsOrganization/teams/AuthorizationEngineering/discussions/1/comments

5. Next, we need to add a Request Body to your API. For this, within your Frontend section scroll down and select Request.

   

6. Now Add representation and insert the following information:

   Representations
   CONTENT TYPE	application/json
   DEFINITION	{"body":"This is a test issue"}

   

7. Select All operations and in the Inbound processing section, select the (</>) (code editor) icon.

8. Copy the following, and paste in the policy editor. Make sure the provider-id and authorization-id correspond to the names in our previous step. Select Save.

Inbound policy:

<policies>
    <inbound>
        <base />
        <get-authorization-context provider-id="github-discussion" authorization-id="auth-discussion" context-variable-name="auth-context" identity-type="managed" ignore-error="false" />
        <set-header name="Authorization" exists-action="override">
            <value>@("Bearer " + ((Authorization)context.Variables.GetValueOrDefault("auth-context"))?.AccessToken)</value>
        </set-header>
        <set-header name="Accept" exists-action="override">
            <value>application/vnd.github+json</value>
        </set-header>
        <set-header name="X-GitHub-Api-Version" exists-action="override">
            <value>2022-11-28</value>
        </set-header>
        <set-header name="User-Agent" exists-action="override">
            <value>API Management</value>
        </set-header>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <base />
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>

Note: The policy to be used consists of five parts.

1. Fetch an authorization token.
2. Create an HTTP header with the fetched authorization token.
3. Create an HTTP header with an accept header [(API requirement)](https://docs.github.com/en/rest/teams/discussion-comments?apiVersion=2022-11-28#create-a-discussion-comment).
4. Create an HTTP header with a X-GitHub-Api-Version header [(API requirement)](https://docs.github.com/en/rest/teams/discussion-comments?apiVersion=2022-11-28#create-a-discussion-comment).
5. Create an HTTP header with a User-Agent header [(GitHub requirement)](https://docs.github.com/rest/overview/resources-in-the-rest-api#user-agent-required).

9. Test the API in Azure API Management:

• Select your operation.
• Go to the Test tab.
• Select Send.

You should get a HTTP/1.1 201 Created response and a comment should have been posted in your team's discussion.

Step 4: Create a custom connector for the Microsoft Power Platform using API Management​

As soon as your API was tested successfully, you are now able to export your web API to the Microsoft Power Platform. Please find a detailed guide here: Export APIs from Azure API Management to the Power Platform. If you want to add additional security to your API, check out our blog post on 10. Providing Power Platform custom connector with additional security via Azure API Management

Step 5: Call your web API via your Power App​

Next, we want to make an API call within your Power App. For this, we created a very simple Power App as our front-end with a Send Button and a TextInput field.

1. In your Power App, add your custom connector to your Power App via the tab data > + Add data.

   

2. Next, we modify our Send Button with the following PowerFX formular:

githubdiscussion.postdiscussioncomment({body:TextInputFeedback.Text}); Reset(TextInputFeedback); Notify("Success: 201 Created",NotificationType.Success)

3. Now, you are able to test your Power App and create a new comment in your GitHub team's discussion.

Enjoy this fun little tutorial and let us know what you think! @jukasper

What We'll Cover​

• Look Back: Recap Developer Experience Week
• Important events: Powerful Dev Conference, Learn Live and Webinar for Power Platform and GitHub
• Skill Up: Self-Study Resources & Cloud-Skills Challenge
• Look Ahead: Continue The Journey!
• Resources: Explore the Low Code February Collection
• Exercise: Sign up for your Free Developer Plan

Look Back: Week 4 Recap​

It's hard to believe that our #30daysoflowcode event is coming to an end. Time really flies, doesn't it? But what an amazing month it has been! Thanks to the incredible support from each and every one of you, we've welcomed 100,000+ visitors to our event! We're thrilled to provide something useful and valuable to your learning journey and we hope that you've fallen in love with the power of low-code development tools.

We would love to hear your thoughts, and please don't hesitate to reach out to us through GitHub Discussions. Your feedback is essential for us to improve and provide even better content and resources in the future. ❤️

Throughout the month, we've taken a comprehensive view of Power Platform and its capabilities, from creating custom integrations to building UI and more. And this week, we've focused on a critical topic for Power Platform: developer experience. As you know, it is essential for developers to build and deploy effective solutions, while managing app governance at the same time.

Let's take a look at what we've covered this week!

• ALM For Power Platform - App lifecycle management can be a broad but critical topic for every developer, who is building, maintaining, or even retiring an application. By following best practices for app lifecycle management, developers can ensure that their applications are stable, reliable, and performant, while also meeting the needs of end-users and stakeholders. In this blog, we introduce you to app lifecycel management, and explore how you can manage the entire app lifecycle with Power Platform.

• GitHub Actions for Power Platform - GitHub actions is a powerful tool that allows you to define workflows in code, and Power Platform provides a range of features and connectors that can be used to integrate with GitHub Actions. In this blog, we walk you through basic GitHub Actions concepts and show you how to connect to a Power Platform environment using GitHub Actions to streamline your development process and automate your workflows.

• Power Platform and Governance - Governance is a key concern for many organizations when it comes to using low-code platforms like Power Platform. This blog provided guidance on how to manage your app governance at ease using Managed Environments for Power Platform.

• Power Apps & Automated Testing - When we talk about app lifecycle management, automated testing is an important part of it. This blog introduces automated testing, and provides you with an overview of tools available to test your Power Apps.

• Power Automate, ACS and OpenAI - Integrating Power Automate with OpenAI and Azure Communication Services can enable you to build powerful and intelligent applications that can understand natural language and respond accordingly. In this blog, we'll show you a tutorial step-by-step how to build a SMS conversational bot yourself!

Important events​

• Ask The Experts!

  1. 🎙 Mar 09, 9AM PST - Join our upcoming hero Q&A session from the Low Code February leadership team, including authors of this #30DaysOfLowCode series. We will have experts live to answer questions related to the content of the Low Code February events. Sign Up if you haven't already ✨

  2. 🎙 Powerful Dev Ask The Expert: On-Demand - Watch the last session for Q&A from the Powerful Devs Conference team. The Powerful Devs Conference is all about showing how code-first developers can integrate with the Power Platform to innovate faster.

• Learn Live! If you have any questions or concerns about the Microsoft Learn modules or the Cloud Skills Challenge, be sure to tune in to our "Learn Live" sessions.

  1. 🎙 Feb 27 - Manage Microsoft Power Platform deployments. Sign Up for our last session during #LowCodeFebruary! ✨

  

• Powerful Devs Conference: On-Demand The Powerful Devs Conference is a fantastic resource for developers who want to learn more about the Power Platform and how to build applications quickly and easily. The conference features a wide range of sessions and talks from industry experts, Microsoft Cloud Advocates, community leaders, and members of the Power Platform Team.

• Webinar: Power Platform & Azure Deploys with GitHub: On-Demand Watch the on-demand webinar, where you'll get a chance to explore the powerful capabilities that the Power Platform opens up for GitHub. You'll learn about the inner and outer loop functions that are available with Power Platform and GitHub, and see firsthand how to author CI/CD pipelines that can help you streamline your development process.

Skill Up: For Self-Study​

Check out these our self-study materials designed to help you learn at your own convenience:

1. Sign up for the Free Power Apps Developer Plan to start your low-code advanture!
2. Resource Collection: Bookmark the collection for a 1-stop resource containing all relevant links to documentation and training, as covered in the #30DaysOfLowCode blogs.
3. Hands-on Workshops: learn by doing! These labs help you gain hands-on experience from intro to advanced, whereever you're in the learning path.
4. Cloud skills Challenge: gives you a free curated set of learning modules to jumpstart your learning journey into Low Code and Fusion development.

Look Forward: Continue The Journey!​

We're in the last week of #30daysoflowcode, but don't worry, we still have some exciting things for you! We've got two ZeroToHero blogs lined up, as well as our Feb 27th Learn Live session and March 09th Ask the Experts session! If you haven't already, make sure to sign up today so you don't miss out. And to top it off, we'll also have a recap of all the amazing content we've covered this month! 🎉

Don't forget to bookmark the #30DaysOfLowCode page, then follow along to read the daily blog post, ask questions, and connect with other learners. Get empowered with low code development!

What We'll Cover​

• Why automated testing is important
• Tools available today to test your Power Apps
• Plans and investments in this area
• Resources: Explore the Low Code February Collection
• Activity: Sign up for the free Power Apps Developer Plan.

Why automated testing is important​

Automated testing is an important part of the app lifecycle. Our goal is to provide customers with the right selection of tools to support good testing practices. Customers often start with manual testing when apps are in their earlier stages. But, we hear about customers who strive to introduce automated testing into their overall workflows and processes once they reach these inflection points:

• As apps grow in complexity - As usage increases and makers respond to more and more feature requests in their apps, complexity grows as well. Maybe an app calls out to an external API or has extensive Power Fx logic within it. These are pieces that all must work together to ensure the proper functioning of your app, so it's important to make sure that they all come together to provide value from the end-user's perspective.

• As collaborators get involved - Collaboration is key, but the more cooks in the kitchen you have the more things can change unexpectedly. How can you best ensure that when multiple people are collaborating on an app that changes don't introduce instability and other uenxpected behavior? Running automated tests when changes are made can help ensure that apps stay functional when their are multiple collaobrators.

• As apps become more business critical - More and more customers are trusting Power Apps with business critical processes. Simply put, if the app doesn't function then core business processes or functions may also be impacted. Automated testing can help to ensure continuity of the app functionality upon which your business processes depend. And, better stability can lead to increased end user trust and satisfaction when using apps.

Let's take a look at what's available.

Tools available today to test your Power Apps​

There are a set of tools available today that you can use to test your apps.

Test Studio​

Power Apps Test Studio is low-code solution to organize, record, and automate tests for canvas apps. Test Studio features the following capabilities:

• Test step recorder - Test Studio includes recording capabilities. When you start the recorder, you can interact with the app as you expect your end users will. Test Studio will record your interactions as test steps.

• Test editor - Once you've recorded test steps with Test Studio, the next step is to add your custom assertions. You can use the Test Studio UI to insert the assertions where they make sense in your app's flow.

• Test playback - Test Studio can be run in Studio by pressing Play. If any of the assert statements you configured in the previous step were to fail, the test step will fail and you will be shown the error. or it can be integrated into CI/CD flows by following these instructions: Automate tests with Azure Pipelines using YAML

  

Test Engine​

Test Engine is an evolution of our Power Apps testing tools. Test Engine builds upon the key use cases of Test Studio, but takes it in a new, powerful direction through open source collaboration and use of the Playwright browser testing platform. The goals of Test Engine are to provide customers with a robust testing platform for all types of Power Apps, and to make it super easy to integrate automated testing into your app development processes.

A lot more information about Test Engine can be found in the blog post Introducing Test Engine: An open platform for automated testing of canvas apps

Test Engine supports canvas apps today, with support for model-driven apps to come in the future. Some of the key benefits of Test Engine are:

• Power Fx test authoring - Test steps are written in familiar Power Fx, without the need for a pro-code solution using C#, JavaScript, or other complex code.

• Connector mocking - You can simulate the response your app receives from custom connectors. This can be useful if you app hits an endpoint that has side effects, like inserting rows into Dataverse tables or kicking off Flows.

• Screenshot function and video recording - This lets you grab screenshots and video recordings of unattended test runs. This will capture exactly what the user would see if they were interacting with the app. This makes it easy to debug and follow up on test failures.

• Robust, stable tests - Test Engine has a special set of capabilities that abstract the app's browser DOM from you. This means you create your tests by referencing the controls that you define at design-time, and you never need to worry about the specific output structure of the app in the browser. Our goal here is that your tests should never break or need updating unless you make changes yourselves to the app being tested.

• Reuse Test Studio tests - If you want to reuse any tests you have recorded using Test Studio, you can export the test plan files for reuse in Test Engine by clicking the Download suite button:

  

Plans and investments in automated testing​

We are investing in this area and are working on a couple key things in this area:

• CI/CD integration - Our goal is to make it as easy as possible for you to integrate Test Engine into your CI/CD tools and make functional testing a regular, robust part of your app development process. We are integrating Test Engine into the PAC CLI toolset to make it easy to use (so you will not have to build and run the Test Engine GitHub project), and we will be building Azure DevOps Pipelines and GitHub Actions support as well. We hope that by integrating more tightly into this tooling, we will make automated testing a no brainer for your organization.
• Model-driven app support - As stated before, Test Engine and Test Studio support canvas apps today. We want to build support for model-driven apps so that you have one set of comprehensive tools that will work with all of your Power Apps.
• Low-code recording enhancements - Eventually, we want to bring the ease of test case recording that customers have in Test Studio to Test Engine. We would love to hear your feedback around what we should be prioritizing to make it easier to create test plans for your apps.

Resources​

• Try out Test Engine - Visit the Test Engine GitHub project
• Let us know any issues or feedback - GitHub issues for Test Engine
• Let us know any general feedback about test tools - Test Studio discussion thread

What We'll Cover​

• Governance for Power Platform
• Visibility into Apps and Automations
• Control over Apps Deployment
• Manage App Estate at Scale
• Exercise: Sign up for your Free Developer Plan
• Resources: Explore the Low Code February Collection

Governing the Power Platform​

Power Platform administrators are charged with monitoring and managing a growing number of environments and resources in their tenants. Organizations are trying to find the right tools for their governance requirements in order to build guardrails around data, applications, and environments. Today, admins can enable governance-at-scale without additional IT resources and proactively build and enforce best practices with Managed Environments for Power Platform.

Managed Environments is a suite of capabilities that allows admins to manage the Power Platform at scale with more visibility, more control, and less effort. Once activated on an environment, Managed Environments allows admins to enable a suite of features that support the governance of their environments and resources by: · Increasing visibility into the apps and automations in an organization with proactive usage insights and admin digest. · Gaining more control and reducing risk by creating sharing limits on applications and proactively enforcing security and reliability with built-in solution checker integration. · Significantly reducing the complexity of ALM (application lifecycle management) with automated application lifecycle management allowing admins to setup a pipeline in less than two minutes and citizen developers to initiate deployment.

With over 5,000 Power Platform environments activated, customers are experiencing the ease of managing low-code assets at scale while reducing risk and empowering their makers to innovate. Read on to learn about current Managed Environments capabilities.

More visibility into the apps and automations in your organization​

With Admin Insights, admins have visibility into usage in their Managed Environments. Admins can enable a weekly email digest that includes top apps, flows, and makers, as well as stale apps and flows across their Managed Environments. High-usage assets may require extra security, and low-usage assets could be cleaned up. Influential makers can be tapped to build best practices and support more knowledgeable makers. With Admin Insights, there’s no need to set up a data lake; usage information is delivered straight to your inbox.

Managed Environments also gives admins a new view that easily identifies all Data Policies applied to an environment. With this, admins can ensure their Managed Environments are compliant and secure.

More control over which apps are deployed and who builds them​

With Sharing Limits, users can be prevented from broadly sharing canvas apps in order to control oversharing of information. Admins can prevent sharing to security groups and additionally limit the number of people an app can be shared with.

Solution checker allows admins to enforce validation of their solutions against a set of best practice rules, ensuring solutions are secure and reliable. Admins can configure the level of validation they want to apply: When the validation is set to Warn or Block, admins will receive a summary email when a solution is imported or blocked.

Less effort to manage and govern your entire application estate​

Pipelines make it easy to deploy solutions to environments (see tomorrow’s blog for a deep dive!). With automated ALM configured by admins, there’s no need for makers to know everything about deployments.

“Training a user or a maker on ALM was easily a couple of hours, and most of the time, people weren’t coming back because they didn’t understand most of what was there. Now, all I have to do is just add the users as Pipeline admins and then just say “Hey, you see that little rocket down there? Just press that!”

Andrew Gaskins: Global Power Platform Lead - Lumen Technologies

For all of the powerful features included in Managed Environments, Activation can be done a few simple clicks, saving time and effort for Power Platform admins.

Powerful governance made easy with Managed Environments for Power Platform​

Power Platform offers several options for organizations to implement governance and security of their low code assets including the Power Platform Admin Center, a single place admins can go to build and enforce their governance policies. There, admins can build guardrails around data, apps, and environments, and view analytics on low code assets by default. With Managed Environments, admins are able to proactively build and enforce best practices while gaining key insights and analytics, and enable governance-at-scale without additional IT resources. Managed Environments allows organizations to streamline their governance at scale with features that provide more visibility, more control, all with less effort.

Resources​

• Watch: The Low Code Revolution Show - Governance and ALM

• Watch all of the Powerful Devs Conference sessions on demand to learn from experts how you, as a developer, can leverage the Power Platform to build applications faster and with far less effort.

• Low Code February Learn Collection: Collection of resources to go from learning Power Platform Fundamentals, to understanding the Dataverse and working in Fusion Development teams.

• Sign up for the Free Power Apps Developer Plan so you have access to the Power Platform.

• Enrolling in the Cloud Skills Challenge to skill up on key cloud technologies with free, self-guided learning courses, and start climbing the leaderboard!

What We'll Cover​

• Power Automate and Azure Communication Services
• Build a SMS conversational bot
• Configuring Event Grid Trigger
• Configure Azure OpenAI
• Configure Azure Communication Services SMS
• Exercise: Sign up for your Developer Plan
• Resources: Explore the Low Code February Collection

Background​

In our last blog, we walked through the process of building a SMS conversational bot. Today we want to showcase a similar bot, but this time built completely on top of low code connectors for Power Automate. It is incredibly easy and exciting to leverage Azure Communication Services connectors in conjunction with Large Language Models (LLM) like ChatGPT to build a conversation bot. For this blog, we will be building Anton, a personal trainer bot for Contoso Gym. See the preview:

Pre-requisites​

To follow along you will need:

• An Azure account with an active subscription. Create an account for free.
• Enable Event Grid resource provided on your subscription. See instructions.
• An active Communication Services resource and connection string. Create a Communication Services resource.
• An SMS-enabled telephone number. Get a phone number.
• Azure OpenAI resource. See instructions.
• Azure OpenAI deployed model. See instructions.
• Power Automate account. Azure Communication Services connectors require a plan that supports premium connectors.

Configuring Event Grid Trigger​

This application will leverage Azure Event Grid to listen for incoming text messages to Azure Communication Services number, and an Azure Function to process the event and respond with an Azure OpenAI generated response.

We will start by configuring an Event Grid trigger for your Power Automate flow. This trigger will automatically connect to your existing Azure subscription and to the Azure Communication Services resource to configure your event subscription.

To keep the data organized, you will add a Parse JSON connector to help us parse the event. The event schema follows this structure:

<details>
<summary><b>Schema (open to see)</b></summary>

```json

{
    "properties": {
        "data": {
            "properties": {
                "From": {
                    "type": "string"
                },
                "Message": {
                    "type": "string"
                },
                "MessageId": {
                    "type": "string"
                },
                "ReceivedTimestamp": {
                    "type": "string"
                },
                "To": {
                    "type": "string"
                }
            },
            "type": "object"
        },
        "dataVersion": {
            "type": "string"
        },
        "eventTime": {
            "type": "string"
        },
        "eventType": {
            "type": "string"
        },
        "id": {
            "type": "string"
        },
        "metadataVersion": {
            "type": "string"
        },
        "subject": {
            "type": "string"
        },
        "topic": {
            "type": "string"
        }
    },
    "type": "object"
}

```

</details>

Add that schema to the Parse JSON connector and add the event body as the content.

Configure Azure OpenAI​

Next, we must add a call to Azure OpenAI to ask the model to generate a response. We will use REST APIs to POST a request with our prompt. For the prompt, we will use a combination of the message sent by the user and a pre-designed text. In this example, we want the GPT-3 model to act like Anton, a personal trainer at Contoso Gym. We added some sample quotes from which the model can draw inspiration. These quotes help guide the model’s response and provide a more intuitive and conversational flow for the users. See the completed prompt below:

```text

    You're Anton Stanescu and you are a personal trainer at Contoso Gym. You are having a conversation with one of your students. You are trying to motivate them to work out.
    Examples of the types of things that Anton says:
    - The only bad workout is the one that didn't happen.
    - Strive for progress, not perfection.
    - You won't get the muscle without the dedication and the drive
    - Train hard...so you can stop a train if you need to.
    - Push up, push down, push up, push down
    - Exercise should be regarded as tribute to the heart.
    Anton: Welcome to the Contoso Gym! Big things await for you.
    Student:

```

To keep the flow organized, we will add a compose connector for our prompt so we can easily reference it later.

To communicate with the Azure OpenAI service, we will use POST request inside of an HTTP connector. In return, we will receive a text generated by the Azure OpenAI model. To configure the HTTP connector, you will need the URI to your Azure OpenAI resource. You will also need the api-key for your Azure OpenAI resource.

```text

<base_url> + /openai/deployments/ + <deployment_name> + /completions?api-version=2022-12-01

```

Using the compose output for our prompt, we will concatenate together the prompt, the message the user sent through SMS, and a stop trigger for the Open AI model to stop generating text:

```text

concat(outputs('Compose'), body('Parse_JSON')?['data']?['Message'], '\nAnton:')

```

Once we have the HTTP connector configured, we will use a Parse JSON connector to process the response from Azure Open AI. The expected schema from Azure Open AI takes the following format:

<details>
<summary><b>Schema (open to see)</b></summary>

```json

{
    "properties": {
        "choices": {
            "items": {
                "properties": {
                    "finish_reason": {
                        "type": "string"
                    },
                    "index": {
                        "type": "integer"
                    },
                    "logprobs": {},
                    "text": {
                        "type": "string"
                    }
                },
                "required": [
                    "text",
                    "index",
                    "logprobs",
                    "finish_reason"
                ],
                "type": "object"
            },
            "type": "array"
        },
        "created": {
            "type": "integer"
        },
        "id": {
            "type": "string"
        },
        "model": {
            "type": "string"
        },
        "object": {
            "type": "string"
        }
    },
    "type": "object"
}


```

</details>

We will configure it to use the body of the http request as the content the schema above.

Configure Azure Communication Services SMS​

Finally, we will configure our SMS connector for Azure Communication Services to respond with the new response generated by Azure OpenAI. You will need a connection string for your Azure Communication Services resource to initialize the SMS connector.

Now that everything is connected, test the flow by sending an SMS from your phone to the phone number you acquired through the Azure Communication Services resource.

Next Steps and Resources​

Congratulations! You have created a conversational SMS bot using Power Automate. Azure Communication Services provides out of the box connectors for SMS, Email and Chat. Whether it is having Anton, the personal trainer bot talk to your customers or having a real person interact with them, Azure Communication Services can help. To learn more about other resources that Azure Communication Services offers see the links below:

• Overview of Azure Communication Services.
• SMS Connector
• Email Connector
• Chat Connector
• Identity Connector
• Want to learn how to do this in code, checkout out last blog post.

Also consider -

• Signing up for the free Power Apps Developer Plan so you have access to the Power Platform.
• Enrolling in the Cloud Skills Challenge to skill up on key cloud technologies with free, self-guided learning courses, and start climbing the leaderboard!

Yesterday we talked about foundamentals of App Lifecycle Managament with Power Platform. Today we'll explore the topic of GitHub Actions and show you how can you connect to Power Platform environments with GitHub Actions.

What We'll Cover​

• Intro to GitHub Actions
• GitHub Runners
• Power Platform and GitHub Actions
• Exercise: Sign up for your Developer Plan
• Resources: Explore the Low Code February Collection

Basic GitHub Actions Concepts​

Before we get into details on the Power Platform GitHub actions, we need to understand some key terms of GitHub, that enable GitHub to do Continuous Integration/Continuous Delivery (CI/CD).

• GitHub actions are components to enable CI/CD of Power Platform Applications using GitHub Workflows.
• GitHub Run : GitHub run is a term used when the workflow runs
• GitHub Workflow : This is the actual CI/CD script that is used by GitHub and it consists of Jobs
• GitHub Job : A Job is a composition of a GitHub Runner (container where the CI/CD script is run)
• GitHub Steps : Step has a set of actions that accomplish an the overall outcome of the workflow (such as deploying to Power Platform)

The GitHub actions for Power Platform are available at the GitHub market place. The GitHub actions, provide the ability to import export solutions, deploying to different environments, provisioning and decommissioning an environments, and validate the solution when it is being imported into a target environment.

GitHub Runners​

Runners in GitHub are a type of machine where you need to run your GitHub job on. Runners can GitHub hosted or self-hosted. GitHub hosted runners are managed by GitHub and all you need to do is to use runs-on and GitHub will automatically allocate such a resource during the runtime of a CI/CD script.

Self-hosted Runners run on your identified resources such as VMs in the Azure Cloud or On-premises. This runners are configured and controlled based on your needs, as in you have more control on the kind of operating system version, pre-installed software tools that need to install for your CI/CD script to run.

Power Platform Actions on GitHub, support Windows and Linux images for both GitHub hosted and self-hosted runners.

How to connect to Power Platform environments using GitHub Actions?​

Power Platform Actions for GitHub have support for the following:

• UserName/Password : Generic connection which uses username and password to authenticate to the Power Platform environments. Please do not enable MFAs this account otherwise your GitHub workflows will break
• Service Principal and Client secret (Recommended) - This allows your workflow to authenticate to the Power Platform using a service principal identity with a client secret. This is an approach we generally recommend when deploying Power Platform applications at scale.

Use Environment Variables within GitHub workflow scripts when deploying Power Platform applications​

If you want to use the same workflow to deploy multiple Power Platform solution to either one environment or different environments. GitHub Workflows support environment variables.

Once you have the environments in place you can then call these environment variables from within the actions

Exercise​

• Try out our Hands on lab for GitHub actions

Resources​

• Get the GitHub actions from the GitHub marketplace
• Self hosted runner information
• About GitHub hosted runners
• Azure AD service principal
• GitHub Power Platform Actions tutorial
• GitHub Power Platform Actions: Hands on lab

The theme for this week is Developer Experience. Today we will take a look into the foundamentals of App Lifecycle Management (ALM) and walk you through how can you implement ALM with Power Platform.

What We'll Cover​

• Intro to Application Lifecycle Management (ALM)
• Power Platform and Application Lifecycle Management
• Solutions for Application Lifecycle Management
• Deployment management
• Exercise: Sign up for your Developer Plan
• Resources: Explore the Low Code February Collection

What is Application Lifecycle Management (ALM) ?​

Application Lifecycle Management is an very large encompassing term. Which is absolutely true, because you are managing the life of an Application from its birth to finally retiring it. Now, there is a perception that ALM is only valid traditional software development projects, and those perceptions maybe right. The applications being built by Power Platform are also applications, and applications by nature need to be managed especially when low code applications are now being built for organization's turn key products. Application Lifecycle management is culmination of a problem solving effort by combining people, process, and tools to address a purpose/outcome.

What falls within realm of ALM?​

ALM can be seen via various terms, such as:

• Digital transformation : where an organization adopts technology to help improve value, productivity,risk management, efficiency, and manage costs
• DevOps (Development + Operations) : It is the union of people, process, and tools to enable continuous delivery to your users of your service
• DevSecOps (Development + Security + Operations) : It is an approach built on top of DevOps and incorporating a security mindset from the get go
• Legacy Application development : Managing the Application lifecycle of a mature product line
• New Application development : Managing the Application lifecycle of a nascent product line

Now there is SDLC which stands for Software Development Lifecycle, it is also part of ALM but focuses mostly on the software development side of things.

In short, all these terms are part of application lifecycle management, as a matter of fact, any time a new application is developed, it will have to be managed eventually!

Power Platform and Application Lifecycle Management​

Power Platform helps you develop applications quicker and faster, so it has the capabilities to be part of Application Management initiatives of an organization. When implementing Application Lifecycle Management with Power Platform, three things need to be considered

• Environment Management : This entails the strategy you want to implement when embarking on ALM. Typically most common ALM pattern from an environments perspective is to have environments that map to Development, Test, and Production.

• Organize the artifacts in Solutions : PowerApps, PowerAutomate Flows, Power Virtual Agents, AI Builder, PowerBI, and Power Pages assets need to be within solutions

• Managing Deployments : When solutions are deployed from Development, to Test, to Production what are the mechanism that need to be employed and managed (i.e. Azure DevOps pipelines, GitHub actions, and Pipelines for Power Platform)

Solutions are important for Application Lifecycle Management​

Beyond the components listed in the prior section, the additional components that are part of solution for enabling successful Application Lifecycle Management

In addition, there are two types of solution, which are managed and unmanaged solutions.

• Managed solutions : Are immutable, as in once a solution becomes managed, it cannot be changed. Think of components that you use as a library for your application
• Unmanaged solutions: These solutions can be changed, solutions when in your development environment are generally in the unmanaged state.

When committing solutions from a Power Platform developer environment, you need to export them, the solution renders itself as a zip file that can be then committed to source code repository.

Deployment management​

As mentioned before, there are various ways and means to deploy power platform applications, there are integrations with Azure DevOps and GitHub Actions. In addition, Power Platform has an in-product deployment capability called Pipelines for Power Platform. This is designed for developers who may not have sophisticated ALM deployment needs.

Resources​

• ALM with Power Platform
• Environment Strategy
• Solution Concepts
• ALM Automation: Power Platform Build Tools for Azure DevOps
• ALM Automation: Power Platform actions with GitHub
• ALM Automation:Pipelines in Power Platform

What We'll Cover​

• Look Back: Recap User Interface Week
• Recap events: Powerful Dev Conference, Learn Live and Webinar for Power Platform and GitHub
• Skill Up: Self-Study Resources & Cloud-Skills Challenge
• Look Ahead: Are you ready for the Developer Experience Week?!
• Resources: Explore the Low Code February Collection

Look Back: Week 3 Recap​

Hey there! Week 3 is a wrap! We had a blast exploring the user interface of Power Apps together. First up, we took a deep dive into canvas apps 101 and got familiar with the low code programming language - Fx. We also got to play around with the PCF (Power Apps Component Framework) control and learned how to build stunning, eye-catching front-ends. To top it off, we even built a PCF control together!

In our ZeroToHero blog post, we provided a detailed step-by-step guide on how to create a highly flexible and interactive app using the powerful combination of OpenAI, API Management, and Power Apps. Last but not the least, we also discussed how professional developers can take advantage of Power Pages to quickly build enterprise-ready internal and external websites.

Here's what we've covered this week:

• Build a Canvas App - Introduction to Canvas Apps, a powerful tool that allows developers to create highly tailored and personalized experiences for their users.

• Intro to Power Fx - Intoduction to Power Fx, a low-code programming language that enable you to add logic to your Power Apps. By delving into this language, you'll gain a deeper understanding of how Power Apps really work and be able to add more complex functionality to your apps.

• OpenAI & Microsoft Power Platform 🚀 - Over the past few weeks, there has been a lot of buzz around the topic of ChatGPT and OpenAI. In this blog, we're going to dive deeper into one of the many exciting scenarios where OpenAI and the Power Platform can be combined to create something truly amazing.

• Intro to PCF Control - Introduce to the Power Apps Component Framework (PCF), a powerful tool that allows developers to build custom components for their Power Apps, giving them complete control over the look and functionality of their apps.

• Build a PCF Control - Build a simple code component step-by-step, giving you the opportunity to follow along and see exactly how the process works.

• Power Pages for ProDevs - Intoduction to Power Pages, a powerful tool that provides developers with a wide range of features and tools to help them create professional websites quickly and easily.

Recap events​

• Ask The Experts! During these sessions, you'll have the chance to have a face-to-face discussion with our leaders and experts, who will be able to provide you with valuable insights, guidance, and best practices:

  1. 🎙 Feb 23, 9AM PST - Join this session for Q&A from the Powerful Devs Conference team. The Powerful Devs Conference is all about showing how code-first developers can integrate with the Power Platform to innovate faster. Our experts will be available to answer questions about full code and low code integration.

  2. 🎙 Mar 09, 9AM PST - Join this session for Q&A from the Low Code February team, including authors of this #30DaysOfLowCode series. We will have experts in code-first integration with the Power Platform live to answer questions related to the content of the Low Code February events.

• Learn Live! If you have any questions or concerns about the Microsoft Learn modules or the Cloud Skills Challenge, be sure to tune in to our "Learn Live" sessions. During these sessions, you'll have the opportunity to hear directly from experts in the field and get tips and insights that can help you succeed in your learning journey:

  1. 🎙 Feb 27 - Manage Microsoft Power Platform deployments

• Powerful Devs Conference: On-Demand The Powerful Devs Conference is a fantastic resource for developers who want to learn more about the Power Platform and how to build applications quickly and easily. The conference features a wide range of sessions and talks from industry experts, Microsoft Cloud Advocates, community leaders, and members of the Power Platform Team.

• Webinar: Power Platform & Azure Deploys with GitHub: On-Demand Watch the on-demand webinar, where you'll get a chance to explore the powerful capabilities that the Power Platform opens up for GitHub. You'll learn about the inner and outer loop functions that are available with Power Platform and GitHub, and see firsthand how to author CI/CD pipelines that can help you streamline your development process.

Skill Up: For Self-Study​

Unable to keep up with the daily pace? No problem! Check out these our self-study materials designed to help you learn at your own convenience:

1. Resource Collection: Bookmark the collection for a 1-stop resource containing all relevant links to documentation and training, as covered in the #30DaysOfLowCode blogs.
2. Hands-on Workshops: learn by doing! These labs help you gain hands-on experience from intro to advanced, whereever you're in the learning path.
3. Cloud skills Challenge: gives you a free curated set of learning modules to jumpstart your learning journey into Low Code and Fusion development.

Look Forward: Week 4​

During week 4 of the learning journey, you'll get a deep-dive in developer experience. You will get a chance to learn about Power Platform app lifecycle management, app governance as well as managing your apps with GitHub Actions, Power Platform pipelines and Azure DevOps.

Don't forget to bookmark the #30DaysOfLowCode page, then follow along to read the daily blog post, ask questions, and connect with other learners. Get empowered with low code development!

What We'll Cover​

• Power Pages ❤️ Fusion Dev teams
• No Code & Configuration
• Low Code & Pro Code
• Supporting the large teams
• Activity: Sign up for your Power Apps Developer Plan
• Resources: Explore the Low Code February Collection

Power Pages loves Fusion Dev teams​

Power Pages provides rich features and supports a variety of tools that enable fusion teams with technology and domain expertise to collaborate on developing professional websites.

Power Pages is unique in Power Platform as it address various audiences for your application that are external and internal to your organization. With Power Pages you can build websites that are completely public without users having to login or have users login via wider range of Identity Providers.

Power Pages makes it easy for low code makers to get started and launch sites quickly. Power Pages also enables Pro-developers with Web Development & Design background and help Fusion team shine by adding their skills to the project. For IT admins we alleviate worry about infrastructure without giving up trust with security and governance tools.

Thousands of customers across the global have been building and shipping solutions on Power Pages for years. PwC is one such customer who used their professional developer team skills, familiar tooling, and fusion team capabilities in Power Pages to deliver a compelling solution migrated from a full stack web application. Read more about it on Microsoft Customer Story : PwC builds multitenant enterprise decision support site with Power Pages

Supporting Fusion teams​

Fusion teams usually consist of members with varying skills – 1) There are domain experts, business users, subject matter experts who possess the functional knowledge and understanding of the uses cases of the websites they’d want to build for their business or organization and can usually contribute to the development via no-code / low-code configuration. 2) There are professional developers who can write code and use advanced tools for developing pixel-perfect user experiences and implement complex functional requirements required for the website.

Here is a diagram detailing features and capabilities from no code to pro code:

We’ll get into more details of the ways in which Power Pages can support both ends of the Fusion team and their respective needs.

No Code & Configuration​

Makers can jumpstart the design of a site with out-of-the box site templates and customize with Power Pages Studio to meet their requirements.

Power Pages studio is designed for low-code makers to rapidly build and style data centric business sites. It provides different workspaces for authoring, styling, data modelling and site configurations.

• Pages workspace - enables maker to design and build Web Pages with component like Forms, Lists, Power BI, Power BI Embedded and Power Virtual Agents.
• Styling workspace - enables makers to create and apply global site styling.
• Data workspace - enables makers to model, visualize and mange Dataverse tables, columns and their respective views and forms without leaving the studio.
• Setup workspace - enables makers and admins to configure site settings/security. Security is an important consideration when building public facing websites and ensure that critical business information is only accessible by the correct stakeholders.
  • Configure Web roles, Table Permissions and Page Permissions to provide and protect access to business information.
  • Administrators can use Power Apps portals admin center to manage their sites and environments. Administrators can configure custom domains, Restrict IP addresses and enable application integrations.
  • Configure and enable Identity Providers like OpenID Connect, SAML 2.0, OAuth 2.0, Azure AD, LinkedIn, Facebook, Google, Twitter.
  • Enable site performance managed with CDN
  • Enable Azure Web Application Firewall (WAF) to safeguard against common threats or setup IP Range to bring your own WAF or limit the site access
  • Set Site Visibility while the project team is working on initial stages of the solution without potential of exposing it outside of the working team
  • Enable and setup Progressive Web Application (PWA) configuration
  • Integrate reporting using Power BI AAD and Power BI Embedded (with RLS) features
  • Use Go live checklist to make sure your website is ready for production use.

Low Code & Pro Code​

Power Pages also provides dedicated pro-developer tooling for fusion team members who are technology experts and want to customize the experience based on the specific business needs that are not supported via low code/no code experience.

Support for code editor: Visual Studio Code & Visual Studio Code for web​

Right in the same Power Pages Studio makers can switch between Studio low code experience to Visual Studio Code for Web an Online code editor for web pro-developer experience in case they want to do advance customization. Alternatively, makers can go into advanced configuration via Portal Management Apps.

Makers who prefer working with Visual Studio Code desktop can use Power Platform Tools extension to unlock many Power Pages specific features like Autocomplete support, Power Apps CLI support, Power Pages file icon theme and more.

Extend power pages site with web development technologies​

Familiar web development technologies like JavaScript, CSS and HTML to build custom design and interaction experience. Power Pages also provide extensibility points which pro-developers can leverage for their use case.

• Tailor to the branding needs the stylesheet via CSS
• Add just the right custom business logic via JS Script
• Write custom UI or use any UI framework (React, Angular, etc)
• Add dynamic content using Liquid
• Use Power Pages Web APIs to bind data in custom UI or perform more complex data operations safely using Power Pages security model
• Create re-usable Code Components or use existing Code Component (PCF) allowing your team to use similar skills from other areas of Power Platform
• Integrate with external data sources using Virtual tables

CLI support​

Developers can also download the Website as local files via Power Platform Command Line Interface (aka PAC CLI) translated into physical files, so popular tools like desktop Visual Studio or Visual Studio Code can be used and it’s easy to work with files in source control.

PAC CLI downloads Power Pages website customization into files and makes website friendly for source control. So, teams can use GitHub actions, Azure DevOps to standardize their deployment workflow and improve productivity.

Supporting the large teams​

It is important to set up automated CI/CD (continuous integration and continuous delivery) pipelines when a large team is working on a project. So, teams can catch bugs in the initial stages. This improves the project quality and increases team productivity by reducing the manual steps to perform these activities.

Power pages supports tooling required for CI/CD setup. And this includes

• Native integration with GitHub Actions and Azure DevOps
• Support for deployment profile which can be used for custom deployment on Dev/Test/Production environments.
• Easy to use any web test framework (Example: Selenium)

What’s Next?​

• Signing up for the free Power Apps Developer Plan so you have access to the Power Platform and you can try Microsoft Power Pages

• Watch the Power Pages session from Powerful Devs 2023 Conference

• Watch the Power Pages session from Microsoft Ignite 2022 from Power Pages: Low-Code Web Development | BRK40 - YouTube

Resources​

• Video: Getting started videos
• Training: Power Pages training
• Documentation: Microsoft Power Pages documentation
• Blog: Microsoft Power Pages Blog
• Community: Microsoft Power Pages Community

The theme for this week is User Interface and we're ending it off with a quick tutorial on PCF Components! Yesterday, I wrote about the Power Apps Component Framework and highlighted why you would want to use it, what the advantages are, as well as the composition of a PCF Component. Today, as promised, we'll be building a simple code component step-by-step.

What We'll Cover​

• Power Apps Component Framework Recap
• What are we building today?
• Let's make a Code Component!
• Test and Run your component
• Where to from here?
• Exercise: Training - Use advanced features with Power Apps component framework
• Resources: Explore the Low Code February Collection

Power Apps Component Framework Recap​

As mentioned in yesterday's blog, Power Apps Component Framework (PCF) empowers professional or traditional developers and app makers to create reusable code components for Canvas Apps and Model-Driven Apps. Sometimes, as app makers, we might reach certain limitations when it comes to building consistent, eye-catching but functional user experiences. The out-of-the-box controls within Power Apps might not fit all of our needs or maybe, we just want to stretch Power Apps' capabilities a little further. With PCF, you can build code components which are essentially visual controls that help you create a more customised user interface.

What are we building today?​

So, with Power Apps, there is generally a large amount of data that end users input into the app via a Text Input control. However, as we can see in this reference page, there is no "auto height" property. What I mean is whenever you use a Text Input, and you have a lot of text, the text input does not inherently have the ability to increase its own height based on the amount of text that you have. The normal behaviour here is that the Text Input will have a scrollbar that you can use to navigate through the large amount of text.

This is the perfect opportunity for a professional developer to use their skills to solve this "low code" problem. And just to make sure, I'm not saying that a low code developer does not have the ability to create some sort of walkaround for this problem - we are just looking at this from the perspective of a professional developer and how they can contribute to Power Platform Solutions. Also, by creating a code component, app makers will be able to use this throughout all of their Power Apps.

Let's Make a Code Component!​

Time to get started building with the Power Apps Component Framework, but first -

Pre-Requisites​

Note: This tutorial was completed using a Windows 11 Machine.

Before we get started, we will need to install the following:

1. Install Visual Studio Code (VS Code) and ensure that the "Add to PATH" option is selected during installation.
2. Install Node.js (comes with npm). I recommend that you use a LTS (Long-Term Support) version.
3. Once VS Code is installed, go ahead and download and install the Power Platform Tools VS Code extension.

Configure Power Apps Environment​

Since we are building a code component for Power Apps, we need to make sure our Power Apps environment is prepared and configured.

1. If you don't have a Power Apps Developer Plan yet 👀, go ahead and sign up for one. It's FREE.

2. Once that's done, log into the Power Platform Admin Center

   • Select "Environments" on the left-hand side
   • Click on the development environment that you've just created above. This will usually have the name: *[Your Name]'s Environment.*

   

3. Select "Settings" from the top command bar and navigate to Product > Features > Power Apps component framework for canvas apps.

4. Activate the Toggle On setting for the Allow publishing of canvas apps with code components feature.

5. Scroll down and select Save.

Now we're good to go! 😃

Create a Component Folder​

We will need a working folder to store our Code Component solution. For ease of use, I usually create a folder in a place where I can easily access from a Command Prompt. On my computer, I've created a new folder called LowCodeFeb directly in the C:\ drive. So, I will be using C:\LowCodeFeb.

Create a New Component Project​

1. Start Visual Studio Code
2. Select Terminal and select New Terminal.
3. Change directory to your working folder.

cd C:\LowCodeFeb

4. From your LowCodeFeb directory, create a directory named dynamicTextInput-pcf.

mkdir dynamicTextInput-pcf

5. Change directory to dynamicTextInput-pcf.

cd dynamicTextInput-pcf

6. Initialize your component project by using Power Platform CLI with the following command:

pac pcf init --namespace SampleNamespace --name DynamicInputPCF --template field

This image shows an example of the output you should see:

7. Install the project build tools by using the command npm install. Don't worry about any warnings you may see at this point.

npm install

8. Once completed, run the command below to open the component project in Visual Studio Code.

code -a .

Your opened project should look like this so far:

Update Code Component's Manifest​

Remember, from yesterday's blog - we established that the manifest is an XML file that defines the metadata and configuration of a code component. The manifest is an important file for a PCF code component because it is used by the Power Apps authoring tools to register and manage the component. This also includes the kind of data which is to be configured (field or dataset) and any other properties that can be configured in the application when the component is added.

1. Expand the DynamicInputPCF folder and open the ControlManifest.Input.xml file.
2. Near the top of the file, Change the version to 1.0.0 and description-key to Dynamic Input.

3. Locate the <property ... /> node and replace it with this:

<property name="TextValue" display-name-key="TextValue" description-key="TextValueDescription" of-type-group="strings" usage="bound" required="true" />
<property name="AutoHeightValue" display-name-key="AutoHeightValue" description-key="AutoHeightValueDescription" of-type="Whole.None" usage="bound" required="true" />

<type-group name="strings">
    <type>SingleLine.Text</type> 
    <type>SingleLine.TextArea</type> 
    <type>Multiple</type> 
</type-group> 

4. Locate the <resources ... /> node and include a reference to a CSS file named DynamicInputPCF.css that you'll soon create.

<css path="css/DynamicInputPCF.css" order="1" />

5. Save your changes by selecting File and then Save.

Add styling to your code component​

Now we're going to be adding some basic styling to our component. Just to get a feel of what the process is like and how you can further customise code components.

1. Make sure you still have the ControlManifest.Input.xml file selected and then select New Folder.

2. Name the new folder css and then select the css folder you've created and select New File.

3. Name the new file DynamicInputPCF.css
4. Open DynamicInputPCF.css and paste the following CSS:

.DynamicInputPCF textarea { 
    padding: 5px; 
    box-sizing: border-box;
    width: 100%; 
}
            
.DynamicInputPCF textarea:focus, .DynamicInputPCF textarea:enabled:hover { 
    border: 2px solid black;
} 

5. Select File and select Save.

Build your code component​

In order to ensure that the right TypeScript types are generated to match the properties in your ControlManifest.xml document, we need to run a build on our component.

Return to the terminal and perform a build b using the following command:

npm run build

Once the build is successful, you'll notice in the project folder, that the component is compiled into the out/controls/DynamicInputPCF directory. The results of this compilation are:

• css folder
• bundle.js - Bundled component source code
• and the ControlManifest.xml which is the actual component manifest file that is uploaded to the Microsoft Dataverse organization

With those artifacts generated, we can now start implementing our component logic.

Implement Component's Logic​

Let's get straight into it.

1. Open the index.ts file and insert the following variables above the constructor method.

// The PCF context object
private context: ComponentFramework.Context<IInputs>;

// The wrapper div element for the component
private container: HTMLDivElement;

/* The callback function to call whenever your code 
has made a change to a bound or output property */
private notifyOutputChanged: () => void;

//Variable to track the height of the control
height: number; 
    
textarea: HTMLTextAreaElement; 
defaultLoaded = false; 

2. Find the init method and replace its contents with this:

//Track all elements
this.container = container;
this.context = context;
this.notifyOutputChanged = notifyOutputChanged;
this.textarea = document.createElement("textarea");
this.textarea.rows = 1;
this.textarea.style.resize = 'none';
this.textarea.style.overflowY = 'hidden';
this.textarea.oninput = this.onTextAreaInput;
this.textarea.onchange = this.onTextAreaChanged;
this.container.appendChild(this.textarea);

After pasting the code above, you may have a couple of errors. No need to worry - we'll be defining a few methods, in a moment, which will clear these errors.

3. Underneath the init method, add the following:

/* These methods are responsible for telling the framework 
that there is a new value in the text input and then it 
starts calculating the new height */
onTextAreaInput = (): void => {
    this.autoSizeTextArea();
}

onTextAreaChanged = (): void => {
    this.notifyOutputChanged();
}

autoSizeTextArea(): void {
    this.textarea.style.height = 'auto';
    const newHeight = (this.textarea.scrollHeight) + 'px';
    const heightChanged = newHeight !== this.textarea.style.height;
    this.textarea.style.height = newHeight;
    if (heightChanged) { this.notifyOutputChanged(); }
}

4. Look for the updateView method and add the following:

const value = context.parameters.TextValue;
    let disabled = context.mode.isControlDisabled;
    let masked = false;
    if (value && value.security) {
        masked = !value.security.readable;
        disabled = disabled || masked || !value.security.editable;
    }

// Update text value if input value changes
if (!this.defaultLoaded || context.updatedProperties.indexOf("TextValue") > -1) {
    this.defaultLoaded = true;
    const newValue = masked ? "****" : value.raw as string;
    this.textarea.value = newValue;
    this.autoSizeTextArea();
}

5. And one of the last major things we need to do is find and update the getOutputs method with the following code:

/* This provides the output/bound properties back to 
the PCF after notifyOutputChanged() has been called. */
const  height = Number.parseInt(this.textarea.style.height);
return {
    TextValue:  this.textarea.value,
    AutoHeightValue:  height
}

6. Go ahead and Save everything.

Test and Run your Component​

Now that we have configured and built out the component logic, let's give it a go! Now is a great time to test your component before you import it into Power Apps.

1. Let's return to the Terminal and rebuild our component.

npm run build

If you've followed everything correctly, the build should succeed. If not, feel free to take some time and check if you've copied all code correctly.

Now we get to run and test our component in a test harness that simulates the Power Apps runtime, so you get to see how your component behaves.

2. In the Terminal once more, run the following command:

npm start

A new browser window should automatically load the test harness.

Go ahead and write some text directly into the text input (1) on the right. Be sure to press the Enter key a couple of times to see the text input automatically resizing. You can also play with the pre-set width and height properties (2) to find how the text input behaves under various conditions. Also, you'll notice that the AutoHeightValue (3) dynamically changes as you're writing as well.

Where to from here?​

At face value, it doesnt seem like much however I wanted to give you a just a taste of what is possible when professional developers use their skills and their tools to contribute to Power Platform Solutions. Once a code component is built and you've verified that it works. The next step is to create a solution package and import that into the Power Apps Environment.

See this article for guidance on how to package a code component and then when you want to add your code component to a Power App, you can read the guidance for Canvas Apps and/or Model-Driven Apps.

Exercise​

Try the exercise in this learn module where you will get to learn EVEN MORE about code components. You'll be able to get details on how to address more complex scenarios as it applies to the PCF. What makes this exciting is that it covers how to use client frameworks such as React and Angular within a component, along with how to address scenarios such as file upload, localization, and integration with the Microsoft Dataverse Web API.

Resources​

• Exercise: Training - Use advanced features with Power Apps component framework
• Documentation: Power Apps Component Framework Overview
• Watch: The Low Code Revolution Show
• Watch all of the Powerful Devs Conference sessions on demand to learn from experts how you, as a developer, can leverage the Power Platform to build applications faster and with far less effort.
• Low Code February Learn Collection: Collection of resources to go from learning Power Platform Fundamentals, to understanding the Dataverse and working in Fusion Development teams.

Also consider -

• Signing up for the free Power Apps Developer Plan so you have access to the Power Platform.
• Enrolling in the Cloud Skills Challenge to skill up on key cloud technologies with free, self-guided learning courses, and start climbing the leaderboard!

The theme for this week is User Interface! Yesterday, Julia spoiled us with a blog that highlighted OpenAI and the Power Platform. Today we'll explore the topic of the Power Apps Component Framework!

What We'll Cover​

• What is the Power Apps Component Framework (PCF)?
• Why would you want to use PCF?
• What are the advantages?
• The composition of a PCF component
• Exercise: Training - Build a Power Apps component
• Resources: Explore the Low Code February Collection

What is the Power Apps Component Framework?​

Power Apps Component Framework (PCF) empowers professional or traditional developers and app makers to create reusable code components for Power Apps. What's great about these code components is that they work for both Canvas Apps and Model-Driven Apps and they can be used to enhance the user experience for users working with data on forms, views, dashboards, and even canvas app screens.

Why would you want to use PCF?​

Sometimes, as app makers, we might reach certain limitations when it comes to building consistent, eye-catching but functional user experiences. The out-of-the-box controls within Power Apps might not fit all of our needs or maybe, we just want to stretch Power Apps' capabilities a little further. With PCF, you can build code components which are essentially visual controls that help you create a more customised user interface.

Types of PCF Components​

These code components also allow for the integration of business logic which complements the visualisation for unique scenarios. There are two main types of components that you can create:

• Field: A custom control for a field on a form. If you have a numeric value, instead of a simple text box with a number, you can represent it as a slider code component.
• Dataset: A custom control to display rows of data. If you would like to go the more advanced route, you could take a boring dataset and represent that as a specialised interactive graph instead of a normal table.

What are the advantages of using PCF?​

With the PCF's ability to tailor-make your apps to fit your specific needs and requirements, there must be other advantages to take note of, right? Of course! These include;

• When it comes to integration, you have access to a rich set of framework APIs, 3rd-party libraries, and services that lets you incorporate external functionality and exposes capabilities like component lifecycle management, contextual data, and metadata.
• Drastically improve and enhance the user experience with seamless server access via Web API, utility and data formatting methods; device features like camera, location, and microphone; and easy-to-invoke user experience elements like dialogs, lookups, and full-page rendering.
• The reusability aspect because PCF components can be easily reused across multiple Power Apps reducing the development time and cost associated with creating custom functionality for each individual app.
• Components built with PCF are optimised for performance due to the fact that they are designed to be lightweight ensuring that they do not slow down the overall application.
• Use of responsive web design principles to provide an optimal viewing and interaction experience for any screen size, device, or orientation.

Web Resources vs PCF​

Before the PCF existed, HTML web resources were used to provide any type of custom presentation to a Power Apps' form. However, with the introduction of PCF, code components can now be bundled into a single solution file and rendered as part of the same context at the same time as any other components, providing a seamless experience for the user.

The composition of a PCF component​

A solution can have code components, which can then be imported into a Dataverse environment. Professional / Traditional developers and app makers can then specify columns, subgrids, views, and dashboard subgrids to use in place of default components after importing the solution containing the code components. These coding elements can be added to Canvas Apps as well as Model-Driven Apps.

Code Components consists of 3 elements;

• Manifest
• Component implementation
• Resources

Manifest​

The manifest (ControlManifest.Input.xml) is the file that defines the metadata and configuration of a code component. It is an XML document that describes:

• name: The name of the component, which is used to identify it within the Power Apps authoring tools.
• description: A brief description of the component, which helps users understand what it does.
• version: The version number of the component, which is used to track changes and updates.
• resource files: A list of resource files that the component needs.

The manifest is an important file for a PCF code component because it is used by the Power Apps authoring tools to register and manage the component. This also includes the kind of data which is to be configured (field or dataset) and any other properties that can be configured in the application when the component is added.

Component implementation​

The component implementation in (PCF) refers to the code that defines the behaviour and appearance of the component. The component implementation is typically written in TypeScript or JavaScript and is compiled into a single solution that is loaded into the Power Apps authoring and runtime environments.

The Power Platform CLI will auto-generate an index.ts file that includes stubbed implementations for methods described in the code component interface. These methods control the lifecycle of the code component and can include, but is not limited to;

• init: This is the entry point for the component and is called when the component is first loaded. The initialization function is responsible for setting up the component and registering any event listeners or other functionality.
• updateView: This function is called whenever the component's properties or state changes. It is responsible for re-rendering the component's user interface to reflect the updated state.
• getOutputs: Called by the framework prior to a component receiving new data.
• destroy: This method is invoked when the component is to be removed from the DOM tree. Use it for the cleanup and to release any memory that the component is using.

Overall, the component implementation is responsible for defining the functionality and appearance of the component, and for integrating it into the Power Apps environment so that it can be used by app makers.

Resources​

With PCF components, resources refer to the files and assets that are used to support the component implementation to implement its visualization. Resources can include things like images, icons, stylesheets, and other files that are necessary for the component to function properly. These are typically organized into a separate folder within the component project and are referenced by the component implementation code as needed.

Exercise​

Try the exercise in this learn module where you will learn how to build your very first custom PCF component, create a code component solution package, and then test and debug the code component.

Also be sure to look out for tomorrow's blog where we will be building another PCF code component in a detailed step-by-step fashion.

Resources​

• Exercise: Training - Build a Power Apps component
• Documentation: Power Apps Component Framework Overview
• Watch: The Low Code Revolution Show
• Low Code February Learn Collection: Collection of resources to go from learning Power Platform Fundamentals, to understanding the Dataverse and working in Fusion Development teams.

Also consider -

• Signing up for the free Power Apps Developer Plan so you have access to the Power Platform.
• Enrolling in the Cloud Skills Challenge to skill up on key cloud technologies with free, self-guided learning courses, and start climbing the leaderboard!

The theme for this week is OpenAI and Microsoft Power Platform. Over the past few weeks, social-media feeds and newsletters have been filled with stories and conversations about artificial intelligence (AI). ChatGPT and OpenAI were often center of these conversations and today we will take a look at an exciting OpenAI and Power Platform scenario. We will discuss how developers can leverage OpenAI's APIs to build next-gen application using Microsoft Power Apps. For our scenario, we will use DALL·E 2 (a new AI system model) to create realistic images and art from a text description in natural language.

What We'll Cover​

• What is OpenAI
• Scenario - Power Apps integration with GitHub and API Management Authorizations
• Scenario Overview
• Prerequisites
• Step 1: Add OpenAI's API into your Azure API Management instance
• Step 2: Configure a policy in Azure API Management
• Step 3: Create a custom connector via Azure API Management
• Step 4: Call your web API via your Power App
• Resources

What is OpenAI​

OpenAI is an AI research and deployment company. Developers can use OpenAI's APIs and build applications using their different trained models. OpenAI offers a spectrum of models with different levels of understanding or generating natural language or code. These models can be used for everything from content generation to semantic search and classification. Their current most popular model is GPT-3 that can understand and generate natural language. For today's scenario, we will use DALL·E 2 (a new AI system model) to create realistic images and art from a text description in natural language.

Note: Like GPT-3, DALL·E is a transformer language model. DALL·E is a 12-billion parameter version of GPT-3 trained to generate images from text descriptions, using a dataset of text–image pairs.

Scenario - Power Apps integration with OpenAI and Azure API Management​

Scenario Overview​

We want to build a Power App and leverage OpenAI's trained model DALL·E 2 to create a realistic image from only a text description. All of this can be done by just a simple API call for OpenAI's image creation. We will use Azure API Management to help us securely expose OpenAI's API to the Microsoft Power Platform.

Azure API Management​

Web APIs have experienced an exponential increase in popularity and usage in the past few years. APIs exist at the intersection of business, products, and technologies and have transformed the way businesses interact with each other and the way they provide value to their customers. The need for organizations to securely manage, deploy, monitor and share APIs has increased as well. Azure API Management helps to create consistent and modern API gateways for existing back-end services hosted anywhere, secure and protect them from abuse and overuse, and get insights into usage and health.

Prerequisites​

• A running API Management instance. Complete the following Quickstart: Create a new Azure API Management service instance by using the Azure portal.
• Make sure you have a Power Apps or Power Automate environment.

Step 1: Add OpenAI's API into your Azure API Management instance​

1. Sign into Azure portal and go to your API Management instance.

2. In the left menu, select APIs > + Add API and select HTTP.

3. Enter the following settings. Then select Create.

   Settings	Value
   Display name	openAIAPI
   Name	openaiapi
   Web service URL	https://api.openai.com/v1
   API URL suffix	openaiapi

4. Navigate to the newly created API and select Add Operation. Enter the following settings and select Save.

   Settings	Value
   Display name	createimage
   URL for POST	/images/generations

5. Select your newly created operation and edit Frontend.

6. Next, we need to add a Request Body to our API. For this, within our Frontend section scroll down and select Request. Now Add representation and insert the following information:

   Representations
   CONTENT TYPE	application/json
   DEFINITION	{"prompt":"A cute baby sea otter","n":1,"size":"512x512"}

7. Next, we will add a Response to our API. Select Responses and insert the following information via + Add response for 200 OK:

   Representations
   CONTENT TYPE	application/json
   DEFINITION	{"created": 1589478378,"data": [{"url": "https://..."},{"url": "https://..."}]}

8. Select Save.

Step 2: Configure a policy in Azure API Management​

1. Next, we need to assign a policy to our API to make sure we are passing along an API key for authentication.

Note: OpenAI API uses API keys for authentication. Visit your API Keys page to retrieve the API key you'll use in your requests.

2. Select your operation and in the Inbound processing section, select the (</>) (code editor) icon.

Inbound policy:

<policies>
    <inbound>
        <base />
        <set-header name="Authorization" exists-action="override">
            <value>Bearer YOUR_API_KEY</value>
        </set-header>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <base />
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>

3. Select Save and we can now test our API in Azure API Management:

• Select your operation.
• Go to the Test tab.
• Select Send.

Step 3: Create a custom connector via Azure API Management​

As soon as your API was tested successfully, you are now able to export your web API to the Microsoft Power Platform. Please find a detailed guide here: Export APIs from Azure API Management to the Power Platform. If you want to add additional security to your API, check out our blog post on 10. Secure Connectors with APIM.

Step 4: Call your web API via your Power App​

Next, we want to integrate our newly create custom connector in our Power App and make an API call.

1. In your Power App, add your custom connector to your Power App via the tab data > + Add data.

2. Next, we modify a Generate Picture Button with the following PowerFX formula:

ClearCollect(_datacollection, OpenAIAPI.createimage({prompt:TextInput1.Text,n:1,size:"512x512"}).data); 
Reset(TextInput1)

3. Next, we modify an Image with the following PowerFX formula:

$"{First(_datacollection).url}"

4. Now, you are able to test your Power App and create a picture via your text input parameters. This picture will be generated using OpenAI's DALL·E model. Enjoy generating some fun pictures like me:

Let us know what you think! @Julia Kasper

Don't forget to Sign up for the Powerful Dev 2023!

Resources​

Sign up for Powerful Dev 2023

Microsoft Power Platform:

• Overview of creating apps in Power Apps
• Microsoft Power Platform developer documentation
• Custom connectors

Azure API Management:

• What is Azure API Management?
• Azure API Management connector on the Power Platform

It's Valentine's Day, a celebration of love in many regions of the world! Hopefully you're developing a love for the Power Platform as you make your way through Low Code February!

Yesterday, we explored how to get started building apps with Power Apps Canvas apps. Today, we're going to look at how we add logic to our Power Apps by exploring the low code programming language that it uses, Power Fx.

What We'll Cover​

• What - What is Power Fx?
• Where - Where can we use it?
• How - How do we use it?
• Exercise: Training: Understand Power Fx
• Resources: Explore the Low Code February Collection

What is Power Fx?​

What if you could build an app as easily as you build out a worksheet in Excel?

Power Apps and Power Fx makes this a reality.

While there's a lot we can do without having to write any code in the Power Platform, we need a programming language to enable the full spectrum of development and that's where Power Fx comes in.

Power Fx is the low-code language for the Power Platform. It's a strongly-typed, declarative and functional programming language that is based off of the Microsoft Excel formula language that is designed to be easy to use for everyone; from those who have never programmed before to seasoned professionals.

Where can we use Power Fx?​

Power Fx started as the low code language that we use to add logic to our Power Apps canvas applications, however, it is expanding to be used across the Power Platform.

Currently, we can use Power Fx with the following:

• Power Apps Canvas Apps
• Dataverse Calculated Columns
• Model Driven App Modern Commanding
• Power Apps Ideas (AI assisted formulas)

And more to come!

How does Power Fx work?​

All programming languages, including Power Fx have expressions which are a way to represent a calculation over numbers, string or other data types.

Power Fx, however, is inspired by Excel and in Excel we don't just write expressions, we write formulas or "recipes" for how to calculate a specific cell's value.

B1 = C2 * 5 is an example of a formula that defines the value of B1 and is recalculated automatically as C2 changes. Power Fx follows this same formula pattern except "cells" are replaced with properties of controls and objects.

Here's an example of a Power Fx formula in action:

Because Power Fx is a declarative formula language, it offers many things including:

• Excel syntax translation : Because it's based on excel, most of the Excel syntax is used and available in Power Fx.
• Asynchronous: All data operations in Power Fx are asynchronous!
• Relational Data: With Power Fx we can use simple dot notation to access the entire graph of relationships from a record.
• Local and Remote: Power Fx automatically delegates what it can to the server to process filters and sorts more efficiently.
• Always Live: Power Fx formulas are always live and changes are reflected instantaneously.

Pro Code Integration​

If you're a professional developer, you can work with Power Fx in your professional developer tooling like Visual Studio and Visual Studio code. Power Fx formulas can be stored in YAML source files which are easy to edit in any text editor.

Power Fx has recently been made open source. You can see more and contribute here: Power Fx Github

Exercise​

Try the exercise in this Learn Module on creating your first Power App as a traditional developer. It has some hands on Power Fx examples.

Resources​

• Exercise: Training: Understand Power Fx
• Documentation: Power Fx Operations - on Microsoft Learn
• PowerfulDevs Conference: Learn More about Power Platform integration
• Learn Collection LowCode February

More often than not, a well thought out, consistent, eye-catching but functional user experience can define the success of your app. This is why we’ve decided to dedicate this week to the User Interface (UI). Today’s blog will begin that journey with actionable insights and resources that will get you started building amazing UI with Canvas Apps.

What We'll Cover​

• What are Canvas Apps?
• Ways to build Canvas Apps
• Working with Express Design
• Activity: Sign up for your Power Apps Developer Plan
• Exercises: Try it Yourself!
• Resources: Explore the Low Code February Collection

What are Canvas Apps?​

As mentioned in an earlier blog post, Power Apps is a tool for “creating custom applications for web and mobile that can be integrated with a variety of systems and services”. There are two types of Power Apps, namely Model-Driven Apps and Canvas Apps.

Model-Driven apps require a Microsoft Dataverse database. They're built on top of the data that's modelled in that database environment. As a result of this, the views and screens are based on a specific data structure and offer a more consistent appearance and behaviour from one screen to the next.

But with Canvas Apps, you start with a blank screen – like an artist’s canvas. You have complete control over the placement of each image, textbox, form, icon, and other elements on that canvas. Power Apps offers you a graphical, intuitive interface with a pixel perfect visual app designer which enables you to build and deploy professional looking Canvas Apps faster with tailor-made UI.

Ways to build Canvas Apps​

Now there are many starting points when building Canvas Apps. We’ve already established that you can start from a blank canvas and build out your app from there however we have other methods for getting you to where you want to be faster.

Whether it’s your first time and you want to start from a template just to get familiar with the building experience, or you already have data and you want to build your Canvas App on top of that data or even if you have an initial design and you want to start from that design and add data later on – we’ve got you covered.

Whatever method you choose, you’ll always end up in the Power Apps Studio. This is the space where you’ll design, build, and manage your Canvas App. If you want to understand the various parts of the Power Apps Studio before you get your hands dirty; I highly recommend reading this article which gives a really good insight into the various parts of it.

Start from a template​

If it’s your first time, you might want to start from a template just so you can get familiar with Canvas Apps. Power Apps provides multiple templates for all types of scenarios.

You can simply select a template from our vast gallery and then run the app to understand its default behaviour. Feel free to add some additional functionality and make it your own. For a full breakdown of how to create an app from a template, check out this article to learn more.

Start from data​

Maybe you already have some business data to work with and you’d like to build an app that connects to this data directly. It doesn’t matter where your data lives – you can create a working 3-screen app in just a few clicks and choose to customise it however you want.

The generated 3-screen app includes:

1. Browse Screen: Lets the user browse through data. It also includes search, sort, and data refresh all out of the box.
2. Details Screen: This screen just shows the extended details of a single record. It also has the option of deleting that record as well.
3. Edit Screen: This allows users to edit a single record to change any of its values.

This process takes care of the data connection for you so that you can focus on the functionality and UI straight away. Whether your data lives in SharePoint, Excel, Azure SQL or even Dataverse, you can get started building Canvas Apps, from data, today.

Working with Express Design​

Express design is a new way to quickly get started with Canvas Apps by instantly transforming any visual design artifact into an app. Every app starts with a design phase where some form of initial sketch would have been made. You may have sketched some basic UI on a piece of paper or on a whiteboard or if you’re a professional – you may have designed some assets in Figma.

Whatever your method is, Power Apps is now applying advanced cognitive AI models to generate app UI using two methods.

Image to App​

All you have to do is take a picture or screenshot of whatever wireframe, sketch, or visual design that you have, upload it into Power Apps and then follow the steps in the guided interface to tag the relevant UI components and set up your data. This will then auto-magically generate an app for you to jumpstart your app development process. See this article for more information and step-by-step guidance on how to generate Canvas Apps from an image!

Also, check out this AMAZING TikTok that shows you the whole Image to App process in under 60 seconds! Don’t forget to follow us while you’re there 😉

Figma to App​

Now the Image to App process will do it’s best to match your drawing or image however if you are looking for an exact, pixel-perfect match then you should consider creating your design in Figma using the Create Apps from Figma UI Kit. Afterwards, you will then convert your design file into a Canvas App and then add more functionality using the Power Apps Studio. More details on this process can be found here so be sure to try it out for yourself and let us know how it went!

Exercises​

So now that you've taken the time to delve into this blog post, you're essentially a pro at finding whatever your starting point is! Go ahead, give yourself a pat on the back AND why don’t you try and build some Canvas Apps UI yourself? It’s easier than you think, and we’ve got some training materials to help you get started as well.

• Training: Use the UI and controls in a canvas app in Power Apps is a Learning Path up on Microsoft Learn which takes you through the process of building a functional UI for your Canvas App. It highlights app navigation, themes, icons, images, personalization, different form factors, and so many more controls that you can take advantage of.

What's next?​

Be sure to keep yourself posted with this week’s blog posts and discover all that there is to know about working with User Interface in the Power Platform. From Power Fx to the Power Component Framework, we have so much planned for you.

Also consider -

1. Signing up for the free Power Apps Developer Plan so you have access to the Power Platform.
2. Enrolling in the Cloud Skills Challenge to skill up on key cloud technologies with free, self-guided learning courses, and start climbing the leaderboard!
3. Registering for the Powerful Devs Conference to learn from experts how you, as a developer, can leverage the Power Platform to build applications faster and with far less effort.

Resources​

• Low Code February Learn Collection: Collection of resources to go from learning Power Platform Fundamentals, to understanding the Dataverse and working in Fusion Development teams.
• Power Apps Canvas Apps Documentation
• On-Demand Viewing: Building the UI in Power Apps

What We'll Cover​

• Look Back: Recap Backend Integrations Week
• Save the Date: Powerful Dev Conference, Learn Live and Webinar for Power Platform and GitHub
• Skill Up: Self-Study Resources & Cloud-Skills Challenge
• Look Ahead: Are you ready for the Interface Week?!
• Activity Sign up for the Powerful Dev Conference on Feb 15!
• Resources: Explore the Low Code February Collection

Look Back: Week 2 Recap​

Wow, how quickly time flies! We can hardly believe that we're almost halfway through our journey. How have you been enjoying the experience so far? We truly hope that you have found value in the carefully selected blogs, videos, workshops, and events that have been put together just for you. Our goal is for you to feel empowered to apply the knowledge you've gained in various aspects of your life.

From the bottom of our hearts, we want to say THANK YOU for supporting us on this journey. If you have any thoughts or feedback, please don't hesitate to reach out to us through GitHub Discussions. We value your input and look forward to hearing from you! ❤️

Here are the highlights for week 2! If you're new to us, welcome to the party! You won't want to miss the amazing content we have in store for you in this week's #30DaysOfLowCode:

Welcome to our series of blogs on low code development! This series is designed to help you understand the full potential of Power Platform and how it can transform the way you work. This week, our discussions spanned from introducing connectors, dataverse and serverelss apps to testing and constructing your own connector, as well as exploring various integration patterns. So, hang tight and get ready to dive into the exciting world of low-code and integration!

• Connectors 101: Let's Make Some Connections!

Are you new to connectors and curious about how they can enhance the functionalities of Power Platform? This blog provides a comprehensive overview of connectors and how they interact with data from various services. You'll get a 360 degree view of connectors and understand how they can be leveraged to streamline your work.

• Do more with your Data for less - Dataverse!

Do you want to create and manage your data and insights with ease to support your applications and more? Our second blog this week provides a walkthrough of Dataverse, from introduction to managing low-code to pro-code integration as well as controlling advanced business logic in a compliant manner.

• Serverless Low Code

Did you know that you can create serverless applications with low-code technology? Our third blog walks you through how Azure Logic Apps bring low-code technology to serverless computing. You'll learn how to build and deploy serverless applications with ease, leveraging the power of low-code.

• Build and Use Custom Connectors

We also provide hands-on tutorials to help you put your knowledge into practice. Our fourth and fifth blogs Build a Custom Connector and Use the Custom Connector show you step-by-step how to build and consume custom connectors in the Power Platform environment - using a real-world OpenAPI specification and application scenario!

• Secure Connectors with Azure API Management

Azure API Management is one of the most commonly used tools for custom connectors in the Power Platform. Our sixth blog covers how to add additional security and control to your custom connectors with Azure API Management. You'll learn about different authentication types for custom connectors and how to deploy different authentication scenarios with various sample applications.

• Low-Code + Azure Integration Patterns

Last but not least, we end the week with a hands-on approach by showcasing key integration patterns that can elevate your work to the next level. It explores how low-code technology can be combined with Azure to tackle real-world challenges and provide practical solutions. We understand that people learn best from real-life examples, and this blog is designed to do just that.

#SaveTheDate: Events​

• Powerful Devs Conference: Feb 15 Get ready to be amazed! In 3 days, the highly-anticipated Powerful Dev Conf is happening on February 15th. This signature event is packed with exciting content, where you'll hear from some of the top experts, including authors from this series, about the amazing features and practical usage of the Power Platform. With a fantastic speaker lineup, you won't want to miss this opportunity to take your knowledge and skills to the next level. So, check out the scheduled sessions and visit the site to reserve your spot today!

  

• Learn Live! Do you have questions about the Microsoft Learn modules or the Cloud Skills Challenge? Then don't miss out on our "Learn Live" sessions! These sessions are the perfect opportunity to hear tips and insights from experts in the field, so join in and ask your questions:

  1. 🎙 Feb 13 - Integrate OpenAPI-enabled Web APIs with Azure API Management
  2. 🎙 Feb 27 - Manage Microsoft Power Platform deployments

  

• Webinar: Power Platform & Azure Deploys with GitHub: Feb 14 In this webinar, you'll learn about the capabilities that Power Platform opens up for GitHub, and discover the inner and outer loop functions that are available with Power Platform and GitHub. You'll also see how to author CI/CD pipelines and hear customer success stories from the retail and manufacturing industries.

  

• Ask The Experts! Have questions about Power Platform, low code development, or recent events and conferences? Then don't miss out on our "Ask the Experts" sessions! These are your chance to have a face-to-face discussion with our leaders and get all your questions answered.

  1. 🎙 Feb 23, 9AM PST - Join this session for Q&A from the Powerful Devs Conference team. The Powerful Devs Conference is all about showing how code-first developers can integrate with the Power Platform to innovate faster. Our experts will be available to answer questions about full code and low code integration.

     

  2. 🎙 Mar 09, 9AM PST - Join this session for Q&A from the Low Code February team, including authors of this #30DaysOfLowCode series. We will have experts in code-first integration with the Power Platform live to answer questions related to the content of the Low Code February events.

     

Resources: For Self-Study​

Unable to keep up with the daily pace? No problem! Check out these our self-study materials designed to help you learn at your own convenience:

1. Resource Collection: Bookmark the collection for a 1-stop resource containing all relevant links to documentation and training, as covered in the #30DaysOfLowCode blogs.
2. Hands-on Workshops: learn by doing! These labs help you gain hands-on experience from intro to advanced, whereever you're in the learning path.
3. Cloud skills Challenge: gives you a free curated set of learning modules to jumpstart your learning journey into Low Code and Fusion development.

Look Forward: Week 3​

During week 3 of the learning journey, you'll get the chance to delve deep into the user interface and explore everything from building a canvas app, to understanding the basics of PowerFx, using the Power Component Framework controls, and even creating your own PCF control. And as a special treat, you'll be taken on a journey from #ZeroToHero with a blog that showcases the integration of the Power Platform and ChatGPT✨. This is an opportunity not to be missed!

Don't forget to bookmark the #30DaysOfLowCode page, then follow along to read the daily blog post, ask questions, and connect with other learners. Get empowered with low code development!

The theme for this week is backend integration. Yesterday we talked about building secure connectors with Azure API Management. Today we'll explore some real world use cases that integrate Azure with Power Platform to help you resolve busienss challenges more efficiently. Let's talk about Low Code and Azure Integration Patterns!.

What We'll Cover​

• Why Power Platform and Azure together?
• Access data beyond a low code platform
• Use Azure API Management use low code development
• Low Code + Azure Integration Patterns

Why Power Platform and Azure together?​

By using Microsoft Azure to extend the capabilities of Power Platform, you can help solve the App Gap challenge.

Simply put, the app gap is a condition where there is an increasing need for custom applications, but you don't have enough developers to build the applications in the business units’ backlog.

For many businesses today, the app gap is already very real and getting worse. Current estimates are that the world is currently short some 4m developers … with an estimated 500 million new apps needing to be built by 2025. This challenge emphasizes the need to find creative and efficient ways to deliver more custom applications to meet the needs of the business with fewer developers.

So how do we build more apps, faster?

We can accelerate app development by letting pro developers do what they do best: traditional development and increasing the availability of organizational services & data.

We then simultaneously empower low code developers to solve some of their business problems themselves by giving them a low code development platform and controlled access to the right data, APIs & service endpoints.

This is at the heart of the fusion team development concept – joining professional & low code developers together to:

• Close the app gap
• Build applications faster to reduce the organizational app backlog
• Create new developers from untraditional places
• Incubate a culture of innovation

Resources:

• Expedite application delivery with low-code and fusion teams
• Fusion Development Ebook

How do I access data from Microsoft Azure & beyond from a low code platform?​

Power Platform uses the concept of connectors - wrappers around the OpenAPI specifications - the industry standard for documenting REST APIS.

Connectors abstract away the details of the underlying API while still offering a low code interface within Power Platform. Using connectors, low code developers can interact with APIs without having to have coding ability or extensive knowledge of the underlying API or backend systems. Connectors also give a consistent experience when authenticating to APIs without added custom code.

Power Platform provides >1000 built-in connectors which enables easy integration with a wide variety of systems & services. Pre-built connectors include Dynamics 365, Salesforce, SAP and Microsoft Teams among many others – in addition to seamless connection to Microsoft Azure services.

To connect to internal organizational APIs or solutions where there isn’t an existing connector, Power Platform includes the ability to create custom connectors, which can be used as wrappers to APIs exposed through an API Gateway.

Resources:

• Connectors overview
• Custom Connectors overview

Why use Azure API Management (APIM) with low code development?​

Azure API Management is a cloud-based platform for creating, managing & publishing APIs. It supports fusion development patterns through:

• Decoupling: Abstracting APIs from their backend implementation and hosting them under a single domain/IP address. The API layer is decoupled from a specific user interface so the same API can be used in both traditional & low code applications.
• Governance: APIM adds an additional control plane for low code development by allowing access only to specified apps & users and not exposing APIs directly.
• Monitoring and debugging: Use Azure Application Insights to debug, monitor traffic & configure analytics.
• Change Management: Versioning & revision control to manage breaking changes for traditional & low code developers.
• Internal Documentation: Creates a catalog of available APIs with downloadable Open API specifications via the Developer Portal.
• Integration with Power Platform: Pushing custom connectors directly to Power Platform environments makes them available at once for use in apps & automation flows.

Resources:

• What is API Management?
• Export custom connectors from API Management
• APIM Hands-on Lab

Low Code + Azure Integration Patterns​

The following technology patterns are generalized with regards to specific use cases but are drawn from real-world customer scenarios using Azure with Power Platform, aka “fusion development.”

A common part of many of these fusion architecture patterns is the use of custom connectors that are exported & controlled from Azure API Management.

IT Democratization

This is the most basic pattern for fusion development. This pattern allows for low code developers, without a coding background, to build applications using their organization’s data. This architecture uses APIs written by pro developers to amplify existing data and expose it to low code developers using an API gateway.

The Azure API Management Developer Portal provides an enterprise catalog which aggregates the data & APIs available to low code & professional developers alike.

Resources:

• Fusion Development Ebook

AI/ML integrations

Azure includes a rich suite of managed AI and machine learning services, including Azure Cognitive Services and Azure Machine Learning, to more easily build & deploy AI models.

By combining Azure’s AI/ML capabilities with Power Platform, you can build intelligent solutions that bring together the best of both worlds. For example:

• Building custom machine learning models in Azure AI services front-ended by a low code app that consumes the resulting models to deliver insights about images & videos uploaded by end users.
• After using AI/ML on the backend to process large amounts of data, Power Automate workflows can watch the resulting output, triggering custom actions & notifications based on the content.
• Creating a low code user interface for data labeling, making it easier for your business subject matter experts to label their datasets for use in training new custom Azure machine learning experiments.

Resources:

• Azure Cognitive Services overview
• Azure Machine Learning
• Azure Open AI
• Custom Vision + Power Apps Demo
• Power Apps and Azure Cognitive Services Demo

IoT/Event-driven Systems

IoT systems can generate large amounts of data from connected devices. By integrating Power Platform with Azure IoT, you can build custom low code apps & workflows that act on the IoT device data.

For example:

• Azure IoT Hub can collect & process data from IoT Devices, while Power Apps + Power BI can be used to build custom dashboards to supply insights & visualizations of the data.

• Designing Power Automate workflows that are only triggered based on specific events or conditions which then send notifications to other systems, like Microsoft Teams.

• Building fast, low-code interfaces for remote command & control of IoT edge devices.

  

Resources:

• Azure IoT Hub overview
• Messaging Services on Azure Overview
• Tornado Warning System Demo

On-prem data with Azure and Power Platform

Sometimes organizations have security requirements that require isolated communication between resources in the cloud and on-premises. By using Azure with on-premises systems, you can create a dedicated and private connection and bypass the public internet.

By using API Management in an Azure VNET (Virtual Network), you can also create secure connections between APIs and their backend services. Access to these APIs can be restricted to only allowing access to designated, trusted interfaces, such as Power Platform. This pattern has some of the same accessibility benefits of IT Democratization, but while respecting the security & isolation requirements of the business.

Resources:

• Connect to a VNET using APIM
• Export a Custom connector from APIM
• Custom connector for Azure AD-protected Apps
• Protect APIM with Azure AD

Azure Communication Services + Power Platform

Azure Communication Services allows you to add voice, video, and messaging capabilities to your applications. By integrating Power Platform with Azure Communication Services, you can build custom low code applications that easily incorporate these communication capabilities.

Common communication & low code scenarios include:

• Create a flow using Power Automate to send out omnichannel notifications via email, SMS, and chat.

• Using Power Automate to create Event Grid triggered flows to process inbound communication events such as incoming calls or SMS messages.

• Using Azure Cognitive services, Azure Communication Services, and Power Automate together to do sentiment analysis that empowers support personnel to create contextual, personalized responses for end users.

• Create a Power App low code UI to trigger communication workflows and manage communication related metadata, like chat/SMS history.

  

Resources:

• Azure Communication Services overview
• SMS Connector
• Email Connector
• Chat Connector
• Identity Connector
• Integrate sentiment analysis with SMS

Mainframe Modernization and Extension

Azure integration services unlocks the ability to access & use Mainframe data. Old green screen mainframe apps can be modernized to use modern technologies such as advanced data analytics & AI/ML services.

By combining Power Platform with mainframe application data, you can unlock data and democratize development that was previously limited to only professional developers. You can build low code user-friendly interfaces for accessing and working with Mainframe data, making it easier for non-technical users to interact with data. For example:

• Ingesting real-time data, like telemetry & system alerts, that trigger Power Automate flows and send notifications to Microsoft Teams. • Using Power Apps to create user interfaces that allow users to view, manage, and create visualizations for Mainframe application data.

Resources:

• Low-Code Meets Mainframe: Kyndryl data pipeline

Conclusion​

These Azure low code patterns are just a few of the many integration patterns that bring together the best of both worlds.

The combination of Azure & Power Platform supplies a comprehensive set of tools for building internal APIs to access your organization's data, designing AI experiments, and programming IoT devices.

Our low code platform’s capabilities help you quickly solve complex business problems & address the app gap problem with the fusion development process.

Get Started Today?

• Cloud Skills Challenge: Sign up for a month-long challenge and clime up the leaderboard
• PowerfulDevs Session: Enable millions of low code devs by building custom connectors
• Learn Collection : #30DaysOfLowCode resources center

The theme for this week is backend. Yesterday we talked about building custom connectors. Today we'll explore the topic of providing Power Platform custom connectors with additional security via Azure API Management. Ready? Let's go!

What We'll Cover​

• Authentication Types for Custom Connectors
• Prerequisites
• Deploying Sample Apps
  1. API Key Auth
  2. Basic Auth
  3. OAuth2 – Authorisation Code Auth
  4. BFF (Backends-for-Frontends) – Combine API Key Auth & Basic Auth
• Exercise – Try it yourself!
• Resources – For self-study!

Custom Connector Authentication Types​

Power Platform custom connectors currently support four authentication flow options – No Auth flow, API Key Auth flow, Basic Auth flow and OAuth2 Authorisation Code Auth flow. "No Auth flow" is definitely not an option this time, but let's focus on the other three options throughout this post. You also need to be aware that those authentication types are mutually exclusive. In other words, you CANNOT combine two or more authentication scenarios on one custom connector. Also, if you want to use the API Key auth flow, you CANNOT use the other two authentication types within the custom connector. I'll discuss that later in this post.

Prerequisites​

For this post, you need to have the following signed up:

• Microsoft 365 Developer Program
• Power Platform Developer Program
• Free Microsoft Azure subscription
• Free GitHub account

Deploying Sample Apps​

Let's deploy the sample apps for this post. Fork this repository and follow the detailed instruction on its README to provision and deploy the sample apps. Once everything is done, you will have one API Management instance and three Azure Functions app instances representing authentication scenarios like API Key Auth, Basic Auth and OAuth2 Auth, respectively.

Each function app has already been integrated with API Management. Let's take a look at each authentication type.

1. API Key Auth​

The first option is using an API key to provide extra security. Using Azure API Management, you can choose between:

• A concept called subscription, where you use the subscription key through a HTTP request header of Ocp-Apim-Subscription-Key
• Or you can use a HTTP request query string of subscription-key.

Both options add another security layer to your API, in addition to your Azure Function app's x-functions-key in the request header or code in the request querystring.

1. Let's take a look at the API policy configurations in API Management.

   

   Through this policy, the function app's API key is integrated. Therefore, you don't need to worry about the function app's API key.

2. Now, you want to add the API Management's API key. First, make sure your API settings have enabled the subscription. Also, ensure that no user authorization is enabled by selecting "None" against the "User authorization" option.

   

3. Export the OpenAPI document by selecting the "Export" menu and choosing the "OpenAPI v2 (JSON)" option. Then you will be able to download an OpenAPI document.

   

   You might have a question here.

   What does the "Create Power Connector" menu do? Isn't that for this API key auth?

   That's actually a valid question. The only difference between exporting the OpenAPI document and creating the connector directly through the menu is that which tenant you want to export the connector to. If you want to only use within your tenant, the "Create Power Connector" is a simple and easy way to generate a custom connector. However, if your connector is not only for your tenant, but also other tenant, you should export the OpenAPI document and use it in the other tenants.

   Therefore, throughout this post, you're assuming to use this custom connector in general purpose, rather than tied with your tenant.

4. Let's take a look at the document. It might look like the following JSON document, saying that you MUST use the API key through Ocp-Apim-Subscription-Key in the request header or subscription-key in the request querystring.

   {
     "swagger": "2.0",
     ...
     "securityDefinitions": {
       "apiKeyHeader": {
         "type": "apiKey",
         "name": "Ocp-Apim-Subscription-Key",
         "in": "header"
       },
       "apiKeyQuery": {
         "type": "apiKey",
         "name": "subscription-key",
         "in": "query"
       }
     },
     "security": [
       {
         "apiKeyHeader": []
       },
       {
         "apiKeyQuery": []
       }
     ],
     "paths": {
       ...
     }
     ...
   }
   

5. Alright. Let's import this OpenAPI document for a custom connector. Go to either https://make.powerapps.com for Power Apps or https://make.powerautomate.com for Power Automate, and create a custom connector by importing an OpenAPI file.

   

6. It automatically identifies the authentication type to "API Key", the API key parameter name of Ocp-Apim-Subscription-Key and the parameter location of "Header".

   

7. After creating the connector, let's create a connection for the connector. Then, it requires the API key. Enter the API key generated from the API Management.

   

8. Test the connector to see whether it works OK or not.

   

We've added extra security to the custom connector with API Management's API key.

2. Basic Auth​

The second option is to use the basic auth flow. It's important to know that API Management doesn't support this basic auth flow out-of-the-box. Although it's a limitation, you can still apply this flow for the Power Platform custom connectors by slightly modifying the OpenAPI document.

1. Let's take a look at the API policy, which is basically the same as the one in the previous section – integrate the function app's API key with API Management.

   

2. Make sure that you're not going to use the subscription key at this time. Therefore, disable the subscription key. By doing so, you no longer need the API key for this API.

   

   WARNING: If you disable the subscription key for this exercise, your API endpoint works as like a public API – not secure at all. Therefore, you MUST implement the logic in your function app that validates the basic authentication header sent through API Management. As mentioned above, it's required to disable the subscription key because API Management doesn't natively support the basic auth feature. Therefore, if you want to use this approach, please use it with extra care.

3. Once you're ready, export the OpenAPI document by selecting the "Export" menu and choosing the "OpenAPI v2 (JSON)" option.

   

4. Then, you will be able to download an OpenAPI document. Let's take a look at the document. It might look like the following JSON document, saying that you MUST use either Ocp-Apim-Subscription-Key in the request header or subscription-key in the request querystring.

   However, you MUST replace both with the basic auth because you will not use the API key auth this time.

   {
     "swagger": "2.0",
     ...
     "securityDefinitions": {
       // ⬇️⬇️⬇️ Remove both 'apiKeyHeader' and 'apiKeyQuery' ⬇️⬇️⬇️
       "apiKeyHeader": {
         "type": "apiKey",
         "name": "Ocp-Apim-Subscription-Key",
         "in": "header"
       },
       "apiKeyQuery": {
         "type": "apiKey",
         "name": "subscription-key",
         "in": "query"
       },
       // ⬆️⬆️⬆️ Remove both 'apiKeyHeader' and 'apiKeyQuery' ⬆️⬆️⬆️
   
       // ⬇️⬇️⬇️ Add 'basicAuth' ⬇️⬇️⬇️
       "basicAuth": {
         "type": "basic"
       }
       // ⬆️⬆️⬆️ Add 'basicAuth' ⬆️⬆️⬆️
     },
     "security": [
       // ⬇️⬇️⬇️ Remove both 'apiKeyHeader' and 'apiKeyQuery' ⬇️⬇️⬇️
       {
         "apiKeyHeader": []
       },
       {
         "apiKeyQuery": []
       },
       // ⬆️⬆️⬆️ Remove both 'apiKeyHeader' and 'apiKeyQuery' ⬆️⬆️⬆️
   
       // ⬇️⬇️⬇️ Add 'basicAuth' ⬇️⬇️⬇️
       {
         "basicAuth": []
       }
       // ⬆️⬆️⬆️ Add 'basicAuth' ⬆️⬆️⬆️
     ],
     "paths": {
       ...
     }
     ...
   }
   

5. Once you update the OpenAPI document, let's import this OpenAPI document for a custom connector. Go to either https://make.powerapps.com for Power Apps or https://make.powerautomate.com for Power Automate, and create a custom connector by importing an OpenAPI file.

   

6. It automatically identifies the authentication type as "Basic authentication", "username", and "password".

   

7. After creating the connector, let's create a connection for the connector. Then, it requires the username and password. The username and password in this sample app are for Atlassian Jira. Therefore, get your email address as the username and API token as the password from there.

   

8. Test the connector to see whether it works OK or not.

   

We've added extra security to the custom connector with basic auth.

3. OAuth2 - Auth Code​

The third option is to use OAuth2. There are many authentication flows in OAuth2, but Power Platform custom connector only supports the Authorisation code auth flow at this time of writing. Therefore, let's focus on that. The basic idea of using any OAuth2 auth flow is to get the access token and the resources you want. It's safe to assume that the function app is able to understand the access token and process it.

1. To use OAuth2 auth flow, you need to first register an app in Azure Active Directory. After registering a new app, it will give the ability to get the access codes. I'm not going into too many details here, but it's worth taking a look at this document. Once you create the app, you will have the following information:

   • Tenant ID
   • Client ID
   • Client secret
   • Endpoint URL for authorization
   • Endpoint URL for the access token
   • Endpoint URL for the refresh token

2. With this information, you need to integrate it with API Management. Go to Azure Portal, open the API Management instance, and navigate to the "OAuth 2.0 + OpenID Connect" blade. Add a new OAuth2 service under the "OAuth 2.0" tab.

   

3. Enter the following details in the fields and create the service.

   • Display name: AuthCode Auth
   • Client registration page URL: http://localhost
   • Authorization grant types: tick only on "Authorization code"
   • Authorization endpoint URL: endpoint URL for authorization noted from the above
   • Token endpoint URL: endpoint URL for access token noted from the above
   • Default scope: https://graph.microsoft.com/.default
   • Client ID: client ID noted from the above
   • Client secret: client secret noted from the above

   After that, you will have both redirect URLs:

   • null/signin-oauth/code/callback/authcode-auth
   • null/signin-oauth/implicit/callback

   Replace null with your API Management instance URL like https://{{APIM_NAME}}.azure-api.net, where {{APIM_NAME}} is your API Management instance name.

4. Add both redirect URLs to your registered app on Azure AD as redirect URLs.

5. Check out the API policy, which is basically the same as in the previous sections – integrate the function app's API key with API Management.

   

6. Make sure you will not use the subscription key this time. Therefore, disable the subscription key. By doing so, you no longer need the API key for this API. In addition to this, because you're using OAuth2 authorization, choose the "OAuth 2.0" option and select the OAuth 2.0 server of "AuthCode Auth" that you just created right before.

   

   It's also worth noting that because the custom connector sends the OAuth2 access token to the function app through API Management, it's safe to assume that the function app is able to understand the token and process it.

7. Once you're ready, export the OpenAPI document by selecting the "Export" menu and choosing the "OpenAPI v2 (JSON)" option.

   

8. Then, you will be able to download an OpenAPI document. Let's take a look at the document. It might look like the following JSON document, saying that you MUST use either Ocp-Apim-Subscription-Key in the request header or subscription-key in the request querystring.

   However, you MUST remove both because you will not use the API key auth this time. Make sure you MUST replace {{TENANT_ID}} with your tenant ID.

   {
     "swagger": "2.0",
     ...
     "securityDefinitions": {
       // ⬇️⬇️⬇️ Remove both 'apiKeyHeader' and 'apiKeyQuery' ⬇️⬇️⬇️
       "apiKeyHeader": {
         "type": "apiKey",
         "name": "Ocp-Apim-Subscription-Key",
         "in": "header"
       },
       "apiKeyQuery": {
         "type": "apiKey",
         "name": "subscription-key",
         "in": "query"
       },
       // ⬆️⬆️⬆️ Remove both 'apiKeyHeader' and 'apiKeyQuery' ⬆️⬆️⬆️
   
       // ⬇️⬇️⬇️ Keep 'oauth2AuthCode Auth' ⬇️⬇️⬇️
       "oauth2AuthCode Auth": {
         "type": "oauth2",
         "scopes": {
           "https://graph.microsoft.com/.default": ""
         },
         "flow": "accessCode",
         "authorizationUrl": "https://login.microsoftonline.com/{{TENANT_ID}}/oauth2/v2.0/authorize",
         "tokenUrl": "https://login.microsoftonline.com/{{TENANT_ID}}/oauth2/v2.0/token"
       }
       // ⬆️⬆️⬆️ Keep 'oauth2AuthCode Auth' ⬆️⬆️⬆️
     },
     "security": [
       // ⬇️⬇️⬇️ Remove both 'apiKeyHeader' and 'apiKeyQuery' ⬇️⬇️⬇️
       {
         "apiKeyHeader": [],
         "oauth2AuthCode Auth": [
           "https://graph.microsoft.com/.default"
         ]
       },
       {
         "apiKeyQuery": [],
         "oauth2AuthCode Auth": [
           "https://graph.microsoft.com/.default"
         ]
       }
       // ⬆️⬆️⬆️ Remove both 'apiKeyHeader' and 'apiKeyQuery' ⬆️⬆️⬆️
   
       // ⬇️⬇️⬇️ Add 'oauth2AuthCode Auth' ⬇️⬇️⬇️
       {
         "oauth2AuthCode Auth": [
           "https://graph.microsoft.com/.default"
         ]
       }
       // ⬆️⬆️⬆️ Add 'oauth2AuthCode Auth' ⬆️⬆️⬆️
     ],
     "paths": {
       ...
     }
     ...
   }
   

9. Once you update the OpenAPI document, let's import this OpenAPI document for a custom connector. Go to either https://make.powerapps.com for Power Apps or https://make.powerautomate.com for Power Automate, and create a custom connector by importing an OpenAPI file.

   

10. It automatically identifies the authentication type to "OAuth 2.0" and the Identity Provider of "Generic OAuth 2". Then, enter the Client ID, Client secret, and the Refresh URL noted above. Using a different registered app here is OK if it's under the same tenant.

    

11. After creating the connector, let's create a connection for the connector. As you've already provided the client ID and secret, you will immediately create the connection.

12. Test the connector to see whether it works OK or not.

    

We've added extra security to the custom connector with OAuth2 - authorization code auth.

4. BFF - Combine Auth​

Many organisations nowadays have requirements using the BFF (Backends-for-frontends) pattern through API Management, mainly if your organisation adopts microservice architecture. It's not uncommon that APIs use different authentication approaches for different APIs – one uses the API key auth, another uses the basic key auth, and the other uses the OAuth2 auth.

If you are about to build a BFF with those APIs using different authentication methods, what would you do? What could you do if you're even about to create the BFF for the Power Platform custom connector? There are many different combinations of authentication methods, but let's focus on following two – API key auth and basic auth:

1. First of all, you MUST choose which authentication type you will use for the main one for the Power Platform custom connector. If you want to use basic auth as the main one, the custom connector doesn't have to know the API key and vice versa. In other words, the other authentication method MUST be handled by the API Management policy of the BFF API.

2. Let's take a look at this OpenAPI document for BFF. It combines both apps using the API key auth and basic auth, respectively.

   openapi: 3.0.1
   ...
   paths:
     /greeting:
       get:
         tags:
           - greeting
         summary: Greeting
         operationId: Greeting
         ...
         security:
           - apiKeyHeader: [ ]
           - apiKeyQuery: [ ]
     /profile:
       get:
         tags:
           - profile
         summary: Profile
         operationId: Profile
         ...
         security:
           - apiKeyHeader: [ ]
           - apiKeyQuery: [ ]
           - basicAuth: [ ]
   ...
   components:
     ...
     securitySchemes:
       apiKeyHeader:
         type: apiKey
         name: Ocp-Apim-Subscription-Key
         in: header
       apiKeyQuery:
         type: apiKey
         name: subscription-key
         in: query
       basicAuth:
         type: http
         scheme: basic
   

   It defines API key auth and basic auth in the document and applies them to each endpoint.

3. Import this OpenAPI to API Management. Then check out the settings. Make sure you MUST activate the subscription.

   

4. Add the authentication-basic as an inbound policy that sets the basic auth token to the request header. After this, API Management automatically injects this basic auth token into every request header.

   

5. Export the OpenAPI document. As you use the API key auth, follow the 1. API Key Auth pattern.

6. In the Power Platform custom connector, you only need the API key provided by API Management to create the connection because API Management has already encapsulated the basic auth token.

7. Test the connector to see whether it works OK or not. As you can see, both endpoints work perfectly fine.

   

We've created a BFF by combining APIs that use API key auth and basic auth, and the BFF has been used for the Power Platform custom connector. However, as mentioned earlier in this post, we have to choose only one authentication type due to the restriction of authentication types in the Power Platform custom connector. Therefore, if you need more than one authentication type for your connector, you MUST choose one, and API Management MUST encapsulate all the others.

Theoretically, there are three possible combinations for BFF:

• API key auth and basic auth
• API key auth and OAuth2 auth code auth
• Basic auth and OAuth2 auth code auth

Throughout this post, we've walked through the first combination. After that, you can try the other two combinations on your end!

Exercise – Try it yourself!​

If you haven't joined the following programs, it's time to do so for further learning!

• Microsoft 365 Developer Program
• Power Platform Developer Program
• Free Microsoft Azure subscription
• Free GitHub account

Then, follow the steps below. After that, you will be the one who knows better security on Power Platform custom connectors!

• Fork this GitHub repository to provision and deploy the sample apps.
• Read and follow the instructions for each scenario:
  • API Key Auth
  • Basic Auth
  • Authorisation Code Auth
  • BFF

Resources – Self-Study​

• Cloud architecture pattern – BFF (Backends-for-frontends)
• Azure AD application model
• Azure API Management authentication and authorisation
• Power Platform custom connector parameters
• Creating Microsoft 365 Developer Environment

In the first part of the blog, Nitya showed you how to build a custom connector for the Forem v0 API. From now, I (Daniel) will take it over and show you what you can do with the custom connector in the Power Platform.

If you don't want to follow the whole tutorial, but you want to just see the solution, make sure to go the the bottom of the page for a link to the resources that you can import and explore on your own!

What We'll Cover​

• Custom Connectors in the Power Platform
• Build a front end with Power Apps
• Speed up development with the Creator Kit
• Add the Forem v0 connector to your app
• Add the Creator Kit components to your app
• Publish your app
• Completed solution

Custom connectors in the Power Platform​

When custom connectors are deployed, you will find them in multiple places. And, because the Power Platform is not just a bunch of products together, but also really advocates the 'better together' story, it gives you the possibility to even use data from the custom connector in places where the connector doesn't appear.

Let me explain that: You can find custom connectors in Power Automate, where you can automate processes.

You can also find custom connectors in Power Apps. Power Apps is the product of the Power Platform where you build apps.

But, because the products work very well together, it's also possible to for instance:

• Trigger a Power Automate workflow from a Power BI visual
• Trigger a Power Automate workflow from a Power Virtual Agents chatbot
• Embed a Power App inside of a Power BI report/dashboard

Which gives you the possibility to use the connector in places even when they don't have a custom connector experience out of the box.

Build a front end with Power Apps​

Power Apps consists of multiple types of apps: canvas apps and model-driven apps. Canvas apps are the apps that give you the possibility to design them how you want. You have the possibility to change everything on the screen. You can even build Power Apps Component Framework components if you want to build your own components with custom code.

Model-driven apps are a different type of app. It's based on data. First, you start building your data model, and when you're done with that, you start building the forms and views in your app. Lastly, you create the app to pull it all together. It doesn't offer the design freedom canvas apps have, but it gives you a bunch of functionality out of the box in exchange for that. You have responsive design out of the box and you don't have to think much about the controls and formula's that canvas has, because it will do a lot of the heavy lifting for you.

In this blog, I will focus on building a canvas app, but I wanted to make sure everyone knew about both types of apps.

Create a canvas app​

In this blog, I'm not gonna talk about how to create a canvas app from scratch, because there is a great Microsoft Learn article about that. For this example, I created a canvas app in tablet mode.

When you have created your canvas app in tablet mode, you will see Power Apps Studio:

Power Apps Studio is the place where you can design, build and manage your canvas app. If you want to learn more about all that you see here, make sure to check out this article which gives you a great explanation about what all the parts of Power Apps Studio.

Speed up development with the Creator Kit​

There are tons of components available out of the box, like text inputs, date pickers, camera controls, etc. These controls offer you a lot of flexibility, but, if you want to make it yourself really easy, it's a good idea to use the Creator Kit. The Creator Kit is a solution which you can import into your environment. The solution contains a set of components that are based on the Fluent UI framework.

There is excellent guidance on how to install the Creator Kit and how to add the code components to a canvas app.

In the app, I use the following code components:

• Details list (link)
• Pivot (link)
• Search box (link)

The end result will look like this:

Add the Forem v0 connector to your app​

To work with the forem connector, you first need to add that to your app. Go to Power Apps Studio and select the Data icon in the left menu. Next, add the connector to your app by selecting the Add data button. Search for Forem and click on your custom connector. If you already have a connection, feel free to select that. If not, add a connection here by adding the API key you need for the Forem API.

After connecting the custom connector to your app, the data tab should look like this:

To test out if the connector works, we can easily create a collection (local data that's saved in the app) by going to the tree view (layers icon in the left menu), selecting App and changing the OnStart property to:

ClearCollect(
    Articles, 
    Foremv0.GetArticles(
      { 
        page: 1, 
        per_page: 100
      }
    )
)

This ClearCollect formula will create a collection with the name Articles. The collection will be filled with whatever comes next. In this case, it's a call to the custom connector Foremv0 and specifically, a call to the GetArticles action in the connector. Inside of the call, the parameters page and per page are used to make sure we get 100 items returned.

Add the Creator Kit components to your app​

In the earlier chapter, I already wrote about installing and using the Creator Kit. To build this app, you should have the following code components added to your app:

If you don't have those code components available make sure to add them like described in the documentation.

Let's start building the app!

First, let's make sure our app OnStart property has the right content. The OnStart property of the app should have a couple of formulas:

Set(
    AppTheme,
    {
        palette: {
            themePrimary: "#000000",
            themeLighterAlt: "#898989",
            themeLighter: "#737373",
            themeLight: "#595959",
            themeTertiary: "#373737",
            themeSecondary: "#2f2f2f",
            themeDarkAlt: "#252525",
            themeDark: "#151515",
            themeDarker: "#0b0b0b",
            neutralLighterAlt: "#faf9f8",
            neutralLighter: "#f3f2f1",
            neutralLight: "#edebe9",
            neutralQuaternaryAlt: "#e1dfdd",
            neutralQuaternary: "#d0d0d0",
            neutralTertiaryAlt: "#c8c6c4",
            neutralTertiary: "#595959",
            neutralSecondary: "#373737",
            neutralPrimaryAlt: "#2f2f2f",
            neutralPrimary: "#000000",
            neutralDark: "#151515",
            black: "#0b0b0b",
            white: "#ffffff"
        }
    }
);

The above formula sets the AppTheme variable we are going to use in the Creator Kit components. The last part of the OnStart property should be as follows:

ClearCollect(
    colArticles,
    SortByColumns(
        AddColumns(
            Foremv0.GetArticles(
                {
                    page: 1,
                    per_page: 1000,
                    tags:"powerplatform, powerapps, dotnet, azure"
                }
            ),
            "author_name",
            user.name,
            "org_name",
            organization.name,
            "formatted_date",
            Text(
                DateTimeValue(
                    Substitute(
                        published_at,
                        "Z",
                        ""
                    )
                ),
                ShortDateTime
            )
        ),
        "created_at",
        Descending
    )
)

The above ClearCollect formula creates a collection called colArticles. The GetArticles action of the custom connector will be used to grab the last 1000 articles with the tags powerplatform, powerapps, dotnet, azure. Wrapped around that call we have two other formulas: the Addcolumns formula to flatten the result of the API and add some columns, and the SortByColumns formula to sort the articles by created date.

That's it for our app OnStart formula. Next, let's create the header. The header consists of the following three parts:

• Logo (image)
• Pivot (pivot from the Creator Kit)
• SearchBox (search box from the Creator Kit)

Logo​

For the logo, click on the plus icon on the left side, which opens up the Insert menu. Search for image in the search box. Click on Image that shows up in the insert menu. At the right side of your screen you can see the properties of your control. This is where you can find properties, like in this case the property Image, which enables you to upload an image or choose one that's already added to your app. Click on the dropdown next to Image where it shows None and add an image file. I added the dev.to logo here, since this app will connect to dev.to.

Drag your image to the top-left of the screen and make sure to add a padding of 10 to the top, bottom, left & right of the image.

This should result in properties looking like this (changed properties in red):

Pivot​

Next, add the Fluent Pivot component via the Insert menu. Set the X property to 100, the Height property to 50 and the Width property to 600. For the Y property, we will use a different way of changing a property. For this we have to:

1. Press the Y in the properties panel of the Pivot component
2. Change the value of the Y property to Self.Height/2 in the formula bar.

This will place the pivot on the right side of the dev.to logo you just added. Change the Theme property to AppThemeJson so that it will get the theme you have set in the app OnStart.

Now we have a pivot, but it doesn't do anything. To change this we need to change the following properties:

• Items:

Change this property to the following table:

Table(
    {
        ItemKey: "Home",
        ItemDisplayName: "Home",
        ItemIconName: "Home"
    },
    {
        ItemKey: "Azure",
        ItemDisplayName: "Azure",
        ItemIconName: "AzureLogo"
    },
    {
        ItemKey: "DotNet",
        ItemDisplayName: ".NET",
        ItemIconName: "Code"
    },
    {
        ItemKey: "PowerPlatform",
        ItemDisplayName: "Power Platform",
        ItemIconName: "PowerApps"
    },
    {
        ItemKey: "MyUnpublishedArticles",
        ItemDisplayName: "My Unpublished Articles",
        ItemIconName: "Contact"
    }
)

This table contains a couple of items, which all have three properties:

1. ItemKey - this is the internal key of the item, we will use it later on in the OnSelect to find out which item has been selected.
2. ItemDisplayName - this is the name that will be displayed in the pivot.
3. ItemIconName - this is the icon name that will be displayed in the pivot.

For more info on the workings of the pivot, go to the documentation.

• SelectedKey

Change this property in the formula bar to the following:

Self.Selected.ItemKey

This setting will make sure the pivot component will show a line below the currently selected item.

• OnSelect

Switch(
    Self.SelectedKey,
    "Azure",
    ClearCollect(
        colArticles,
        SortByColumns(
            AddColumns(
                Foremv0.GetArticles(
                    {
                        page: 1,
                        per_page: 1000,
                        username: "azure"
                    }
                ),
                "author_name",
                user.name,
                "org_name",
                organization.name,
                "formatted_date",
                Text(
                    DateTimeValue(
                        Substitute(
                            published_at,
                            "Z",
                            ""
                        )
                    ),
                    ShortDateTime
                )
            ),
            "created_at",
            Descending
        )
    ),
    "DotNet",
    ClearCollect(
        colArticles,
        SortByColumns(
            AddColumns(
                Foremv0.GetArticles(
                    {
                        page: 1,
                        per_page: 1000,
                        tag: "dotnet"
                    }
                ),
                "author_name",
                user.name,
                "org_name",
                organization.name,
                "formatted_date",
                Text(
                    DateTimeValue(
                        Substitute(
                            published_at,
                            "Z",
                            ""
                        )
                    ),
                    ShortDateTime
                )
            ),
            "created_at",
            Descending
        )
    ),
    "Home",
    ClearCollect(
        colArticles,
        SortByColumns(
            AddColumns(
                Foremv0.GetArticles(
                    {
                        page: 1,
                        per_page: 1000,
                        tags: "powerplatform, powerapps, dotnet, azure"
                    }
                ),
                "author_name",
                user.name,
                "org_name",
                organization.name,
                "formatted_date",
                Text(
                    DateTimeValue(
                        Substitute(
                            published_at,
                            "Z",
                            ""
                        )
                    ),
                    ShortDateTime
                )
            ),
            "created_at",
            Descending
        )
    ),
    "MyUnpublishedArticles",
    ClearCollect(
        colArticles,
        Foremv0.GetMyUnpublishedArticles()
    ),
    "PowerPlatform",
    ClearCollect(
        colArticles,
        SortByColumns(
            AddColumns(
                Foremv0.GetArticles(
                    {
                        page: 1,
                        per_page: 1000,
                        tag: "powerplatform"
                    }
                ),
                "author_name",
                user.name,
                "org_name",
                organization.name,
                "formatted_date",
                Text(
                    DateTimeValue(
                        Substitute(
                            published_at,
                            "Z",
                            ""
                        )
                    ),
                    ShortDateTime
                )
            ),
            "created_at",
            Descending
        )
    )
)

The above formula is very long, this is because here I use a Switch formula to have different behavior per selected item. In this case, you can see that when the item with the MyUnpublishedArticles key is selected, it's doing a different call (GetMyUnpublishedArticles) than when the item with the PowerPlatform key is selected (GetArticles, with tag parameter with the value powerplatform). The rest of the item selections are pretty much the same.

Search Box​

Let's add the Fluent SearchBox component via the Insert menu. Set the following properties:

Now, we are done with the header. Let's move on with the details list, which we'll use to show all the articles.

Details List​

The details list is where all the articles are shown. Add the Fluent Details List. Set the following properties:

Now the details list has the right dimensions and position, but it doesn't have the right content and settings, for that we need to change the following properties:

• OnChange:

The following formula is documented in the documentation of the details list. This is to make sure the local collection can be sorted the way we want to sort it.

If(Self.EventName="Sort", 
UpdateContext({
                ctxSortCol:Self.SortEventColumn,
                ctxSortAsc:If(Self.SortEventDirection='PowerCAT.FluentDetailsList.SortEventDirection'.Ascending,true,false)
 })
);

• Items:

In the Items property, use an if condition to make sure our search box works. In this case, the if condition checks if the length of the SearchText in the search box is greater than or equal than 3. If that's the case, a Search() formula will be kicked off, that will search within the colArticles collection for the title, tags and the author name. If a match is found, it will show it in the details list. If not, the details list will become empty.

If the condition is not met, it will show just the colArticles. In both cases it will perform sorting as well.

If(
    Len(SearchBox1.SearchText) >= 3,
    SortByColumns(
        Search(
            colArticles,
            SearchBox1.SearchText,
            "title",
            "tags",
            "author_name"
        ),
        ctxSortCol,
        If(
            ctxSortAsc,
            SortOrder.Ascending,
            SortOrder.Descending
        )
    ),
    SortByColumns(
        colArticles,
        ctxSortCol,
        If(
            ctxSortAsc,
            SortOrder.Ascending,
            SortOrder.Descending
        )
    )
)

• Fields:

Select the edit button next to the Fields property and click Add field. Make sure to add the following fields:

• title
• author_name
• org_name
• formatted_date
• comments_count
• public_reactions_count
• tags

Now we have the fields available to us, but they don't show yet in the details list. For that, we need to change the Columns property.

• Columns:

Add the following formulas to the Columns property:

Switch(
    Pivot1.Selected.ItemKey,
    "MyUnpublishedArticles",
    Table(
        {
            ColDisplayName: "📰 Title",
            ColName: "title",
            ColBold: true,
            ColWidth: Parent.Width-100,
            ColRowHeader: true,
            ColResizable: true
        }
    ),
    Table(
        {
            ColDisplayName: "📰 Title",
            ColName: "title",
            ColBold: true,
            ColWidth: 700,
            ColRowHeader: true,
            ColResizable: true
        },
        {
            ColDisplayName: "✍️ Author",
            ColName: "author_name",
            ColResizable: true,
            ColWidth: 200,
            ColRowHeader: true
        },
        {
            ColDisplayName: "🏢 Org",
            ColName: "org_name",
            ColResizable: true,
            ColWidth: 100,
            ColRowHeader: true
        },
        {
            ColDisplayName: "⏰ Published",
            ColName: "formatted_date",
            ColResizable: true,
            ColWidth: 150,
            ColRowHeader: true
        },
        {
            ColDisplayName: "💬",
            ColName: "comments_count",
            ColResizable: true,
            ColSortable: true,
            ColWidth: 50,
            ColRowHeader: true
        },
        {
            ColDisplayName: "❤️",
            ColName: "public_reactions_count",
            ColResizable: true,
            ColSortable: true,
            ColWidth: 50,
            ColRowHeader: true
        },
        {
            ColDisplayName: "🏷️",
            ColName: "tags",
            ColWidth: 250,
            ColFirstMultiValueBold: true,
            ColMultiValueDelimiter: " "
        }
    )
)

The above formulas ensure that when the "MyUnpublishedArticles" item is selected in the pivot, it only shows the title column. If that item is not selected, it will show a lot more columns. All the columns are added to a table in both cases, and have properties like:

• ColDisplayName: the display name of the column
• ColName: the name of the field
• ColBold: if the column needs to be bold or not
• ColWidth: the width of the column

If you want to know all possible properties, make sure to check out the docs.

Publish your app​

With that, our app is ready for publishing. Select the save icon on the top right corner of the screen or use the ctrl + S or cmd + S shortcut to save your app. Publish your app by selecting the icon in the top right corner of the screen or use the ctrl + shift + P or cmd + shift + P shortcut to save your app.

There's also a share icon in the same row as the save and publish icons. You can use that to share the app with your colleagues:

Completed solution​

The custom connector and the canvas app are available as a solution via this link. You can import the solution via the import solution functionality that is described here.

And that also concludes this blog, hopefully this helps you when you start developing with Power Apps. Don't forget to check out the resources below!

Resources​

• Create a canvas app from scratch
• Creator Kit
• Creator Kit components
• PowerfulDevs Session: Enable millions of low code devs by building custom connectors
• Learn Collection LowCode February

It's Integrations Week! So far, we've talked about Power Platform Connectors - from built-in options to serverless computing solutions with automated workflows triggered by connectors. But what if prebuilt connectors don't support your requirements? That's where custom connectors come in. Join us today for a 2-part tutorial as we take you step-by-step through the process of building, testing, and using a custom connector!

What We'll Cover​

• Motivation - Why are custom connectors needed?
• Scenario - Let's build a dev.to Connector!
• Process - Building from an OpenAPI specification
• Testing - Validate it works!
• Exercise: Training: Build custom connectors for Power Automate
• Resources: Explore the Low Code February Collection

Why Custom Connectors?​

From the earlier post we know Connectors are wrappers around APIs that make it easier for low-code developers to take actions and trigger workflows based on API-supported operations. And we know there are 900+ pre-built connectors for Power Platform.

So why would I want to build a custom connector? We can think of three reasons:

1. The API exists, but connector does not - and you need to work with the API!
2. The connector exists, but it's not perfect - you need a more customized or complete version.
3. The API is being built by you - and you want to build a connector in parallel, to drive usage.

As a JavaScript Cloud Advocate, this was exactly the situation I faced when I wanted to explore the low-code ecosystem from a pro-developer perspective. I had a specific scenario I wanted to implement and the API existed but the connector did not!

So I reached out to my colleague Daniel (Power Platform Cloud Advocate) and his response was immediate: Let's build a custom connector!!. Alright then!

Our Target Scenario​

You might know that there is an Azure publication on dev.to, a community-driven content portal where cloud advocates publish tutorials, tips and best practices for developers. We have 100+ contributors on that publication, and each post can have up to 4 tags. We wanted to view the content in different ways, but the default dev.to dashboard only shows us a chronological view. So here's our scenario:

The good news? The dev.to site is built on a platform called Forem - which has an API that provides exactly the kinds of operations (e.g., /articles) that can help us build this dashboard scenario. But there is no prebuilt connector for this API, so it was time to build one!

The Build Lifecycle​

The Power Platform documentation describes this 5-step process for building a custom connector:

1. Build & Secure it - applicable only if you are building the API itself. We are not, so we can skip it.
2. Define it - this is where you describe the methods and metadata in the API. You can hand-craft this or use standardized options (OpenAPI file or Postman collection) to build from.
3. Use it - create a connection to your Connector from a client, and validate it works!
4. Share it - make the connector available to people within your organization to use.
5. Certify it - submit it for Microsoft certification if you want this available to all users.

Let's Build the Connector!​

We'll follow the guidelines in this tutorial.

1. Pre-Requisites​

To get started, you will need the following:

• Subscription - to Azure (if using Azure Logic Apps), Power Automate, or Power Apps.
• Familiarity - with core concepts of Logic Apps, Power Automate flows, or Power Apps.
• API Key - to the Forem API, if using authenticated endpoints

Note that currently Power Plaform supports only OpenAPI v2.0 - and the dev.to API uses OpenAPI 3.x. We can work around this in two ways:

1. Use a converter that downgrades API to v2.0 (knowing you may lose some functionality)
2. Manually re-create API in Custom Connector wizard (using OpenAPI spec as reference)

We'll talk briefly about the first option in this post, and encourage you to join us for our PowerfulDevs Session where Daniel will walk through the steps for the second option!

2. Get The DevPlan​

Don't have a Power Apps or Power Automate subscription (see pre-requisites)? Just sign up for the Power Apps Developer Plan and get a free development environment that will work for this purpose. Anyone with a work or school email address (backed by Azure AD) can sign up. Read our earlier post on DevTools and Onboarding options to get yourself set up with a sandbox subscription and test tenant.

3. Connector Wizard​

Visit the Power Apps portal and sign in. You should see something like this:

Select Data > Custom Connectors to enter the Custom Connector Wizard. Click the New custom connector drop-down to see the different starting options as shown below. Use the Create from blank option to build the custom connector manually. We walk through this approach in our PowerfulDevs Session on Feb 15 so don't miss it!

4. OpenAPI Converter​

For completeness, let's also see what happens if we were to try using the Import an OpenAPI file option. First download the dev.to OpenAPI file to your local drive. Then use the Import option in the wizard to upload this file to the portal. (Note: in my case I used a converter tool to convert the OpenAPI YAML to a JSON file before this step).

Not surprisingly, we get this error message indicating that the dev.to OpenAPI file uses the v3 specification which is not yet supported. What do we do now?

If you're a JavaScript developer, you'll likely check npm for a handy converter. And guess what? You'd find one! that does exactly what you need. You can even use this directly on the YAML file downloaded from the dev.to API site!

Now use the Import option again but with the converted file and - SUCCESS! 🎉 You should be taken into the first step of the Custom Connector creation workflow.

5. Creation Workflow​

The wizard walks you through the 5 key steps of the workflow (see tabs):

1. General - defines the metadata for the Connector. Pay attention to the Host and Base URL fields. These will need to be corrected to align with the API definition. However, importing the file should have filled in details like the Description. Customize this by adding your own icon and background color preferences. Then move to next tab.
2. Security - is the panel where you enter credentials (e.g., API key) required to access the API
3. Definition - is the main tab defining the API. We'll look at this in the next section.
4. Code - The connector can act as a proxy between API and low-code clients. This section allows you to define code that transforms requests or responses in custom ways.
5. Test - This pane helps validate your definition with simple in-wizard tests as we see later.

For our current purpose, let's dive into the Definition tab for more detail.

6. Edit Definition​

The good news is that importing an OpenAPI file will fill in most of the definition details for you. Here, Actions are the requests you can make on API (endpoints) - we can see that the default dev.to API endpoints are already defined. Because we downgraded to OpenAPI v2, you may find certain actions throwing error flags.

You can use your judgement to delete or edit them manually, till the complete definition is error-free. As a pro-developer, I was particularly happy to see the option to switch to a Swagger editor as shown below. Changes in this editor are kept in sync with the definition, so you can easily move between the wizard UI or this editor, without losing context. The editor view lets you see the raw details of the OpenAPI spec, and the swagger-ui rendered version (at right) for easy debugging.

Once you've completed the definition to your satisfaction, take a minute to click Update connector to make sure the changes are saved to the environment. We aren't doing any code transformations, so let's skip that step and go directly to testing!

Let's Test the Connector!​

At this point, we've come to the Step 5: Test the connector step of the tutorial. Testing is currently available only in Power Automate and Power Apps.

1. Create Connection​

The connector is just the wrapper around the API. Before we can use it, we need to associate this with a Connection that provides the required credentials (e.g., API key) required to actually use the deployed API endpoint.

You can create a new connection either from the Connections page (see sidebar) or from the Test tab of the wizard itself. Once the Connection is created, you should be taken to the Connections page to verify that it was created correctly. Now we're ready to test!

2. Test Connector​

Switch back to the Custom Connectors page, select the connector you were working on, and move to the Test tab. You should see something like this - where you can now select the newly created connector as the default Connection for the test.

At this point, you can simply select the Action (request), provide any necessary parameters, and click Test operation to see if you get the correct response. For example, in the screenshot below, you can see the default response for getUserArticles returns the last article I published on dev.to!

This test tab also provides helpful feedback - for instance schema validation - that can help you further debug and fix any issues in the definition, before you share the connector with others.

Note that testing within the wizard helps with improving the definition but it can be laborious to test everything that your intended application will use. Instead, you might be able to test the connector from an application by using the connector in a Power Apps or Power Automate implementation.

Next: Use The Connector!​

Wow - we covered a lot today! Here's a helpful visual recap for your convenience. We defined our scenario, built our connector, tested it within the Custom Connector wizard, and learned about options for sharing it widely. What's next? Using the connector in a real-world context, to deliver the rich interactive experience we described in our scenario. Read Part-2 to see how we used the connector within Power Apps!.

Exercise​

Try building a custom connector yourself, either for the same dev.to API, or for any other OpenAPI-compliant API that you might want to use. And don't forget to join us Feb 15 for the PowerfulDevs Conference where we walk through the process and demo in under 30 mins!

Resources​

• Training: Build custom connectors for Power Automate - also in our Cloud Skills Challenge
• Documentation: Custom Connectors - on Microsoft Learn
• Examples: Custom Connectors - GitHub Repository
• PowerfulDevs Session: Enable millions of low code devs by building custom connectors
• Learn Collection LowCode February

The theme for this week is Integrations. Yesterday we talked about Low Code + Dataverse. Today we'll explore the topic of serverless low code and piecing together a workflow with Azure Logic Apps.

What We'll Cover​

• Serverless and Low Code?
• Azure Logic Apps overview
• Let's build a Logic App
• Logic Apps compared to Power Automate
• Resources

Serverless and Low Code?​

Are you sitting down? Because I'm about to tell you that there's something out there that combines the best of serverless computing with low code development. And that's ... Azure Logic Apps.

Serverless computing lets you worry less about the underlying infrastructure your code is running on and concentrate more on the code itself.

A benefit of serverless computing is that you don't write huge applications, instead you write small functions that do one specific task. For example, respond to an HTTP request. Or process a message from a queue.

Then within that function, you write code that deals with the task. Any logic, or connections to other services - that's pretty much on you to write code for.

Azure Logic Apps brings the Low Code world to serverless computing. You still solve a problem in a concise of a manner as possible with a Logic App - and the Logic App is started by some sort of event. But instead of writing code, you use a visual designer to piece together a workflow.

Azure Logic Apps overview​

At its heart, Azure Logic Apps automates the execution of business processes by using a visual designer to create workflows.

But what sets Logic Apps apart, are its pre-made components.

When you're creating a Logic App, you arrange pre-made components into a sequence - or a workflow. These components are designed to communicate with external services. So you can specify - all in a visual designer - what event should trigger a workflow to start and then what actions should occur.

As I mentioned, there are literally hundreds of external services (or components) you can connect your Logic App to. And the beauty of it is, the Logic Apps runtime takes care of managing the connections to the services. You don't have to worry about writing code to establish connections or check connectivity - Logic Apps has your back.

Building a Logic App is the process of building a workflow using the components to solve your business problem. Each component will have different triggers that will start a workflow, and different actions that it can take when a workflow is running. How you use them is up to you.

Building a Logic App​

We're not going to create a Logic App from front to back, step-by-step, in this article. That's really worth it's own article and we have some documentation that will take you through that process.

Rather I want to concentrate on the major pieces and decision points that you'll make when creating a Logic App.

Connecting to other services​

Now let's pause for a second to talk about all of these services that you can connect your Logic Apps workflow to. A connector is a component that provides an interface to an external service. For example, the Twitter connector allows you to send and retrieve tweets, while the Office 365 Outlook connector lets you manage your email, calendar, and contacts.

There are literally hundreds of connectors from Microsoft and 3rd party vendors that you can use to build your workflows with.

A connector uses the external service's REST API to do its work. When you use the connector in your Logic App workflow, the connector calls the service's underlying API for you.

If you can't find a connector that suits your needs? You can build one yourself! It's called a custom connector, and this series of articles will show you how to make your REST API into a connector!

Kicking off the logic​

The very first decision you'll need to make when creating a Logic App is to decide what type of event, or trigger will start the workflow running. The trigger specifies the condition to meet before any actions defined in the Logic App execute. Each time the trigger fires, the Logic Apps runtime creates and runs the workflow instance.

There are a ton of different triggers you can choose from. A workflow can be started with events as varied as a new email arriving to a new message arriving in an Azure Storage queue.

Performing actions​

If a trigger kicks off a workflow, then an action performs a specific task while the workflow is running.

A connector can be composed of many actions and triggers. For example, the Dropbox connector has triggers to monitor for when a file is created or modified. And it has actions to create a file, list files in a folder, and so on.

You string together actions, after the triggering event, to perform the business logic of your Logic App. But what if your logic had branches or conditions in it?

Controlling actions​

A control action routes the execution within a workflow based on conditions.

Consider the Azure DevOps connector's Build Complete trigger kicking off a workflow. If the build status is failed, then a text message could be sent using the Azure Communication Service's connector. Otherwise if the build status is successful, a message could be posted to a chat in Microsoft Teams using its connector.

The if statement is a conditional action. There are others controlling actions such as switch statements, for each and until loops.

Logic Apps compared to Power Automate​

Now, you may be thinking to yourself - Logic Apps sound a lot like Power Automate. And you're not wrong, they're both workflow-based services that work with connectors to other services.

In fact, Power Automate is built upon Azure Logic Apps!

UI​

They both have a user-friendly design surface to create your workflow on quickly. The difference is that Logic Apps allows you to build a bit more complex integration solutions and utilize advanced development tooling like Visual Studio or VS Code. Logic Apps has a recently refreshed designer, whereas Power Automate still uses the previous designer and is only accessible via the Power Automate portal.

Connectors​

On the connectors level, there are some differences. To make it a bit more clear for you, I have split the connectors section up in two parts:

Logic Apps only connectors​

Logic Apps has the following connectors that are only available for Logic Apps:

• Azure Functions
• IBM 3270/MQ Series
• SAP
• Data Transformation
• Inline Code

Logic Apps offers a bunch of rich integrations with enterprise systems like IBM 3270 & MQ. Logic Apps also has a fairly advanced SAP connector which supports RFC, BAPI & IDOC actions. It also receives messages from SAP, which the SAP ERP connector from Power Automate can't. Next to the enterprise system connectors, it also offers extra features like Azure Functions integration, Data Transformation & Inline Code.

Power Automate only connectors​

Power Automate also has connectors that are only available for Power Automate:

• AI Builder
• Approvals
• Desktop flows
• Power Apps
• Power Virtual Agents
• SAP ERP

Power Automate offers rich integration with Power Platform products like AI Builder, Approvals, Desktop flows (Robotic Process Automation aka RPA), Power Apps & Power Virtual Agents. It also has a SAP ERP connector which supports RFCs and BAPIs. It also has nice templates available that they have built since the Clear Software acquisition.

Licensing​

The licensing model is also different, I've listed the characteristics below:

Power Automate​

Power Automate is licensed on a per-user, per-flow or Pay-as-you-Go basis.

• The per user model is the all you can eat model for Power Automate. You can create & use as much flows as you want, as long as your Dataverse storage is big enough & you haven't reached your service limits. It has a version with and without attended Robotic Process Automation (RPA).
• The per flow model is a model that gives you the possibility to let an unlimited number of people within your organization run a flow.
• The pay-as-you-go model has been introduced not too long ago, and this is where you pay per flow run.

Logic Apps Consumption & Logic Apps Standard​

There are two types of Logic Apps:

• Logic Apps Consumption
• Logic Apps Standard

Logic Apps Consumption is the type of Logic App that has been around for a while and it's the type of Logic App that Power Automate is based on. You pay per execution. And on top of that, you can pay a fixed fee for an Integration Services Environment. A Logic App can contain only one workflow.

Logic Apps Standard is a different type of Logic App. You pay a static monthly charge instead of per execution. With Logic Apps Standard, you can have multiple stateful and stateless workflows. You can also host Logic Apps Standard yourself, for instance in a Docker container.

Built-In VNET​

Logic Apps also has built-in Virtual Network (VNET) configuration included. This is something that Power Automate doesn't offer.

Resources​

• Take a self-paced training course on Azure Logic Apps!
• Azure Logic Apps documentation
• Power Automate documentation

What We'll Cover​

• What is Dataverse?
• Under The Hood: Features
• Built-in Integrations: Azure
• Enterprise-ready: Hyperscale
• Resource: Explore the Low Code February Collection
• Activity: Learn more about Dataverse!

Microsoft Dataverse is a SaaS data platform that helps you easily create and manage your data, events, logic, and generate analytics, and insights to support interconnected apps and processes in a secure and compliant manner. Dataverse, being a hyperscale polyglot storage, can store any type of data (relational, file, observational etc.) for all your transactional or analytical applications. Dataverse is the data platform for all Power Platform products and Dynamics 365 applications, supporting both low-code and pro-code development. It is a critical element of Microsoft Power Platform, supporting all the data, events, analytics, and related processing, besides generating insights for citizen app makers and professional developers to build, store and manage data for their applications.

Figure 1: Microsoft Dataverse and Power Platform

All these diverse types of data, in Dataverse, are represented externally as tables, which not only makes it easy for citizen developers to use it as excel but also accelerates design and development time and cost, for professional developers .Dataverse includes a base set of standard tables that cover typical scenarios, also known as Common Data Model (CDM), but you can also customize or create new custom tables specific to your needs.

Dataverse -Under the hood​

Dataverse enables integrated, intelligent systems of action of the data that is stored. Dataverse achieves this by leveraging Azure services, so it is built on Azure and extends with Azure.

Figure 2: Microsoft Dataverse Runs on Azure & Extends with Azure

All the building blocks of Dataverse i.e., storage, compute and insights are built on Azure. Similarly, if you need to extend the functionality, you can leverage your existing investments in Azure to augment your customer requirements.

Why Dataverse?​

Microsoft Dataverse is much more than a database because it provides a managed SaaS data platform experience for citizen developers and professional developers to build, store, and manage data for their applications. It also provides a rich and intelligent computing layer to integrate and act on these diverse types of data through a rich API layer, besides providing analytics and generating insights.

Let’s look at some of these salient features of Dataverse.

Enables low-code and pro-code integration of external data​

Dataverse provides an ability to use out of the box power of Power Query via Power Platform Data Flows, Azure Data Factory(ADF) and Web API to enable low-code and pro-code developers to integrate external data with Dataverse. With few clicks, users can have a quick start experience to get the data from multitude of data sources specifically from Azure resources into Dataverse with rich, intuitive user experience. Pro dev deeply familiar with data transformations can extend queries and author complex transformations for both ADF and Power Query. A splendid example of using Dataverse data to create reports can be found here. Another powerful feature about data integration with Dataverse is the introduction of Virtual Tables in Dataverse which allows you to integrate external data without moving it physically into Dataverse. With this new experience, you can create virtual tables from SharePoint and SQL without any code, and without leaving the maker portal. In minutes, you can set up your connection, pick your SharePoint Site or SQL Database, select your SharePoint List or SQL Table, and your virtual table will appear in table hub within Maker experience ready to use.

Figure 3 : Creating a Virtual Table in Microsoft Dataverse

You can try it out for yourself using this detailed information Additional Info: Virtual tables in Dataverse

Advanced business logic, eventing, analytics, and insights at no additional cost​

Besides Web API, Dataverse also provides several advanced business logic and eventing features like calculated fields and rollups, and automatic duplicate detection along with powerful built-in AI, Analytics through Power BI, Azure Cognitive Services and AI Builder. Dataverse allows pro-code extensibility via plug-ins and low code extensibility using Power FX, like formula columns.

Additionally, there is built-in integration with Azure - With a few clicks, you can use Azure Synapse Link for Dataverse to bring your Dataverse data to Azure Synapse, visualize data in your Azure Synapse workspace, and rapidly start processing the data to discover insights using advanced analytics capabilities for serverless data lake exploration, code-free data integration, data flows for extract, transform, load (ETL) pipelines, and optimized Apache Spark for big data analytics. Here is how you can accelerate time to insight with Azure Synapse Link for Dataverse.

Here is another glimpse into doing more with analytics using Dataverse

All these features are built-in into Dataverse and hence you do not have to spend any additional time or money managing additional compute services outside Dataverse platform which helps in bringing down the total cost of ownership for an end-to-end business solution.

Providing data residency and compliance while scaling globally.​

Dataverse serves customers in 18 distinct geographic locations like Asia Pacific, Canada, Switzerland, France, Germany, UK, India, Japan, China, Korea, Norway, Australia, South America, Singapore, UAE, South Africa, North America, Europe and expanding to more regions. To help your organization comply with national, regional, and industry-specific requirements governing the collection and use of individuals’ data, Dataverse provides a comprehensive set of compliance offerings which you can find here.The latest availability information can be found in Product Availability by Geography under Power Apps product, since Dataverse is the data platform for Power Platform products.

Availability and Reliability that you can depend on​

Dataverse also provides high availability (99.9+ %), reliability features like disaster recovery and business continuity capabilities for your production instance, by leveraging Azure availability zones and asynchronous cross-region replications using Azure paired regions. You can read more about these scenarios and solutions in this article which explains Business Continuity(BC) and Disaster Recovery (DR). You can watch Planet-scale Dataverse to learn more about how Dataverse operates at planet-scale.

With Dataverse you can store terabytes of data – all types of data like relational, non-relational, image, file etc. and process millions of transactions in a day. You can take a look at the different types of data supported by Dataverse here.You can also learn more about Polyglot and Hyperscale Dataverse. Dataverse also delivers fast and comprehensive search results experience in a single list, sorted by relevance, powered by Microsoft Azure Cognitive Search. Besides all Dataverse instances are backed up automatically every few minutes and these backups can be retained for 7 to 28 days, in case of production environments running Power Platform and Dynamics applications respectively.

Enterprise grade Security, along with advanced risk and compliance features​

Dataverse provides built-in enterprise-grade security that is based on Zero Trust principles. The security layer spans across data and compute layer with robust authentication mechanisms and authorization mechanisms like role-based access model. Dataverse also supports advanced risk and compliance features like Customer Lockbox and Customer Managed Key. Learn more about Dataverse Security features and capabilities covered in the Microsoft Dataverse Security white paper.

You can see by using Microsoft Dataverse with Azure, there is so much you can do with your data for so less - effort, cost and time!

What's next?​

Stay tuned for the rest of this week's blog posts to dive deeper into the world of connectors and backend integrations.

• 1️⃣ Sign up for the free Power Apps Developer Plan.
• 2️⃣ Enroll in the Cloud Skills Challenge to learn more about low code and fusion team fundamentals and start climbing that leaderboard!
• 3️⃣ Connectors will also be highlighted at the Powerful Devs Conference so be sure to Sign up for the free virtual event!

Resources​

• Resource: Explore the Low Code February Collection
• Microsoft Dataverse documentation
• Why to choose Dataverse
• Learn more about Dataverse!

One of the things that makes the Power Platform so powerful (pun intended) is its ability to seamlessly pull in and interact with data from a variety of 1st and 3rd party services. This integration with other services is done through Connectors - the building blocks of the Power Platform.

What We'll Cover​

• What is a Connector?
• Connectors Components
• Custom Components
• Certifying a Connector
• Activity: Sign up for your Developer Plan
• Resources: Explore the Low Code February Collection

What is a Connector?​

A connector is a wrapper around an API that allows the underlying service to talk to the Power Platform. It's essentially a proxy that provides a way for users to connect their accounts and leverage a set of prebuilt actions and trigger to integrate the services with their apps and workflows.

The Power Platform offers a large ecosystem of software as a service connectors that enable you to connect apps, data and devices in the cloud. Some examples of popular connectors are Office 365, Outlook, Dropbox, Salesforce, Google Services and many many more.

There are hundreds of prebuilt connectors available to use in Power Apps, Power Automate and Logic Apps. You can see a list of all of the connectors available here: https://learn.microsoft.com/connectors/connector-reference/

Connectors Components​

Every connector offers action and trigger operations. Let's explore each of those further.

Actions are changes that are directed by a user. An action can be used to perform standard CRUD (create, read, update and delete) operations in a data source like a SQL database. Each of these actions directly map to operations defined in the OpenAPI definition for the connector.

Triggers allow you to kick off interaction with your connector when specific events occur. For example, the SharePoint connector has a trigger for when a new file is added and the Outlook connector has a trigger for when an email is received. You can build a Logic App or flow in Power Automate that listens to this trigger and performs an action whenever the trigger fires. Triggers are unique to Power Automate and Logic Apps and can't be used inside of Power Apps.

There are two types of triggers:

• Polling Triggers which call your service at specified intervals to check for new data. When that new data is available, it causes a new run of your workflow instance with the data as an input.
• Push Triggers which wait for an event to occur that then causes a new run of your workflow instance.

Custom Connectors​

The amount of out-of-the-box connectors for the Power Platform is growing every day, but sometimes you might want to call API's, services and systems that aren't available as prebuilt connectors. To support this need, you can build custom connectors that have their own triggers and actions.

A connector is simply a wrapper around an API which means you can take any RESTful API that is defined in OpenAPI (Swagger) and make that accessible to the Power Platform with a custom connector.

You can build custom connectors to connect to both public and private API's.

Connections to private API's are possible with the on-premises data gateway.

For public API's that you want to create and manage, you might considering leveraging Azure products like Azure Functions, Azure Web Apps or Azure API Apps.

Custom connectors can either be used internally within your organization or you can get your connector certified so that it's publicly accessible for anyone in the world using the Power Platform and Logic Apps.

Certifying a Connector​

If you want to make your custom connector publicly available you have to go through a certification process where Microsoft reviews the connector to see if it meets certification criteria and approves it for publishing.

There are two options when it comes to getting a connector certified:

• Verified Publisher - To be eligible to get certified as a verified publisher, you must own the underlying service behind the connector.
• Independent Publisher - This gives you a chance to get your connector certified if you do not own the underlying service behind it.

The processes for certification vary depending on which option you qualify for. You can learn more about the process for getting your connector certified here:

• Independent publisher certification process
• Verified publisher certification process

What's next?​

Stay tuned for the rest of this week's blog posts to dive deeper into the world of connectors and backend integrations.

• 1️⃣ Sign up for the free Power Apps Developer Plan.
• 2️⃣ Enroll in the Cloud Skills Challenge to learn more about low code and fusion team fundamentals and start climbing that leaderboard!
• 3️⃣ Connectors will also be highlighted at the Powerful Devs Conference so be sure to Sign up for the free virtual event!

Resources​

• Introduction to the Power Platform
• Fusion Development with Power Platform EBook
• Fusion Development with Power Platform Learning Path

What We'll Cover​

• Look Back: Recap Fundamentals Week
• Self-Study: Resources to dive deeper
• Look Ahead: It's Integrations Week!
• Activity: Sign up for your Developer Plan
• Resources: Explore the Low Code February Collection

Look Back: Week 1 Recap​

Wow, Low Code February is a hit! We've had 40k+ visits to our website campaign and 1400+ of you signed up to take the Cloud Skills Challenge and skill yourself on all things low code! This is incredible and we're super honored to have built something that you, the community, have found valuable! We know that we couldn't have gone so far without the support from everyone of you who's reading this blog right now. THANK YOU! ❤️

Here are the highlights for week 1. If you're just joining us, welcome!! It's not too late to get started learning and skilling up, with two core activities:

1. Cloud skills Challenge - gives you a free curated set of learning modules to jumpstart your learning journey into Low Code and Fusion development. Get building amazing Power Platform solutions using pro-code tools and frameworks. Register now and get on the leaderboard!

2. #30DaysOfLowCode - gives you daily blog posts from experts. We started this week with a look at Power Platform fundamentals (core concepts) and ended it with a look at Developer Stories celebrating our low-code and code-first developer communities with real-world case studies.

   • 🥇 First time hearing the term low-code and want to learn how it helps in your day-to-day work? Read You say Low, I say Code! for a quick introduction.
   • 🆕 Never used Power Platform before? Read DevTools & Onboarding to get full onboarding guidance, and setup your development environment for success!
   • 🚀 Want to hear stories from your peers, and understand why more and more code-first developers have turned to low-code and embrace the technology in their daily work? Read Developer Stories posted by our amazing Power Platforms PM team at ZeroToHero🚀.

Self-Study: Resources​

Don't have the time to follow day by day? Here're 3 self-study materials that you should know about to help you learn at your own pace:

1. Resource Collection: Bookmark the collection for a 1-stop resource containing all relevant links to documentation and training, as covered in the #30DaysOfLowCode blogs.
2. Hands-on Workshops: learn by doing! These labs help you gain hands-on experience from intro to advanced, whereever you're in the learning path.
3. Ask The Experts!: get your questions answered! Pick a time that works best for you and enjoy a face to face discussion with our leaderships:
   1. 🎙 Feb 23, 9AM PST - Join this session for Q&A from the Powerful Devs Conference team. The Powerful Devs Conference focuses on showcasing how code first developers can integrate with the Power Platform to innovate faster. We will have experts on hand to answer questions about full code and low code integration.
   2. 🎙 Mar 09, 9AM PST - Join this session for Q&A from the Low Code February team, including authors of this #30DaysOfLowCode series. We will have experts in code-first integration with the Power Platform live to answer questions related to the content and cloud skills challenge of the Low Code February event.
4. Learn Live!: Have questions for Microsoft Learn modules or the cloud skills challenge? Join our Learn Live sessions to hear tips and commentary from experts:

• 1️⃣ Feb 06 - Low code as a traditional developer
• 2️⃣ Feb 13 - Integrate OpenAPI-enabled Web APIs with Azure API Management
• 3️⃣ Feb 27 - Manage Microsoft Power Platform deployments

Feb 15: PowerfulDevs Conf​

Do you know the Powerful Dev Conf happens in just 10 days, on Feb 15? It's a signature 2-hour event where you can hear from many of the experts, including authors from this series, on the features and usage of the Power Platform! Check out the great speaker lineup below and visit the site to see the scheduled sessions.

Look Forward: Week 2 Plan​

Don't forget to bookmark the #30DaysOfLowCode page and come back tomorrow, where we will cover everything you need to know about Power Platform Backend Integrations in week 2.

From utilizing built-in connectors to building custom connectors, integrating with backend data source, and creating serverless apps. We will showcase the latest functionalities we have, help you learn with tutorials, demos, and real world best practices that you can apply to your business immediately.

Today we celebrate all the developers and organizations who make the low code ecosystem successful.

What We'll Cover​

• About Zero To Hero
• Meet The Developers
• Meet The Organizations
• Solution Architecture Examples
• Activity: Sign up for your Developer Plan
• Resources: Explore the Low Code February Collection

About Zero To Hero​

Did you know we had a dedicated Zero To Hero page on this site? It's our page for amplifying news, articles and updates on technologies and products for low code development - directly from product teams! Here's what that page look like. Click on any article to visit the original content on the Product Group blog. Or click the tag under a post (e.g., Announcements) to view all posts for that category.

Meet The Developers​

Meet featured developer Gini Brandon and watch her as she shares her journey of adopting low-code as a professional developer! In the video, Gini talks about her journey graduating with a computer science degree, how she’s been able to increase efficiency using Power Platform, why she believes low code is the future of development, and how you can get started.

✨ Read It Now: Meet developers combining Power Platform and Azure to go faster

Meet The Organizations​

Organizations around the globe have adopted Microsoft Power Platform along with Azure and Dynamics 365 to build flagship applications and establish centers of excellence to scale adoption and impact of low-code solutions.

✨ Read It Now: Meet The Organizations

Solution Architecture Examples​

Explore a few real-world solution architecture examples that show how low-code capabilities in Power Platform are used in conjunction with code-first programming patterns and capabilities in Microsoft Azure. Here are just a subset of those stories:

• Rabobank – Scaling adoption across the organization
• EY – Loan forgiveness portal
• Blackmores Group – Enabling rapid development of new products
• IKEA Sweden – Reimagining the customer experience
• Western States Caterpillar: Mobile apps for the field

✨ Read It Now: Solution Architecture Examples

What We'll Cover​

• Get onboard with Power Platform
• Sign up for the Power Apps Developer Plan
• Get familiar with the tools
• Activity: Sign up for your Developer Plan
• Resources: Explore the Low Code February Collection

Get onboard with Power Platform!​

I'm excited to announce that now you can create up to 3 developer environments with the Power Apps Developer Plan! Let's take this opportunity to review how to get a free environment to get started.

Sign up for the Power Apps Developer Plan​

The Power Apps Developer Plan gives you a free development environment to build and test with Power Apps, Power Automate, and Microsoft Dataverse. It just takes a few minutes to get a developer environment for Power Platform:

1. Ensure that you have a work account. If you don't, you can create a test tenant first.
2. Sign up on the Power Apps Developer Plan website.
3. Once the sign up is complete, you will be redirected to your new developer environment.

Power Apps Developer Plan - sign up process

Do I need a test tenant?​

In an ideal world you would use your existing work account to sign up for the Power Apps Developer Plan. If you already have an Azure account, you likely can use the same account to sign up. If this is not possible for any reason, you can create a free test tenant using the Microsoft 365 Developer Program.

Get familiar with the tools​

After the sign up you will be in the https://make.powerapps.com and your environment will be ready to use. You can start creating your first Power App.

If you would like to create more environments or manage your environment, visit the Power Platform Administrator Center.

Create new environments in the Power Platform Admin Center

If you are a code first developer, you can use the Power Platform CLI to manage your environments, create code first components and much more. The best way to get our CLI is to download the Visual Studio Code extension.

Power Platform Tools for Visual Studio Code

What's next?​

Are you a code first developer? To understand how Power Platform can make you more productive and how you can use code to extend the platform, check the Introduction to Microsoft Power Platform for developers.

• For detailed information on the Power Apps Developer plan: Sign up for Power Apps Developer Plan

• For detailed information on licensing: Licensing overview for Microsoft Power Platform

Happy coding 🎉.

Resources​

• Introduction to the Power Platform
• Fusion Development with Power Platform EBook
• Fusion Development with Power Platform Learning Path
• Learn Collection: LowCode February

What We'll Cover​

• What is Low Code?
• How are the Benefits?
• What does Power Platform Provide?
• How can we extend Power Platform?
• Activity: Join the Cloud Skills Challenge
• Resources: Explore the Low Code February Collection

You say Low, I say Code!​

There is a low code revolution underway. We have a surging digital demand with an estimated 500 million more apps that will need to be created in the next 5 years. More and more companies are leveraging low code and no code platforms to bridge this app gap and address workflow and automation needs. In fact, Gartner estimates that 65% of application development will be low code by 2024.

With low code tools like the Power Platform making it easier for business technologists to develop solutions, you might wonder if there's any room for a code first developer in this low code revolution. Well, the answer is, absolutely there is! In fact, code first developers are a critical piece to the puzzle.

What is "low code"?​

The term "low code" can mean different things to different people when they first hear it. What we mean when we talk about low code is that with tools like Power Apps, you only need to write a small amount of code to get results that would normally take several more lines of code in a traditional programming language.

In canvas-based Power Apps, the low code scripting language used is called Power Fx. This language is based on the Microsoft Excel formula language which meets many business technologists where they are by leveraging the knowledge they already have.

Low Code + Full Code = No Cliffs​

Using low-code tools is key to helping to resolve the existing and impending app gap challenge but that doesn't mean that low code alone can solve every business problem. Low code tools like the Power Platform's full potential is unlocked when you combine the low code capabilities with code first development.

The combination of low code + full code creates what we call a "no cliffs" experience that allows business technologists to easily build solutions with low code while professional developers can leverage full code to augment and extend the platform capabilities. The process of low code developers, IT pros and full code developers working together like this is often referred to as "fusion development".

What does the Power Platform Provide?​

The Power Platform gives us a holistic suite of low code tools that work together to help us solve business problems. The key products and components of the Power Platform include:

• Power Apps for creating custom applications for web and mobile that can be integrated with a variety of systems and services.
• Power Automate for automation tasks and orchestrating activities across various services
• Power BI for business analytics and interactive data visualization
• Power Virtual Agents for creating AI-powered chatbots that can answer questions from your customers and employees
• Power Pages for secure, enterprise-grade external-facing business websites
• Dataverse which provides a cloud scale data store with robust security that abstracts away data management complexity from the app maker