Hello, Power Platform Devs! In this blog post, I’d like to highlight my learning experience with the AIS HUB Team that you can take advantage of to get started with Power Platform fundamentals.

What is the HUB Team?

The AIS Cloud Acceleration Hub (HUB) is a dedicated team of AIS consultants organized to help our project teams deliver successful cloud solutions. The HUB team consolidates knowledge and experience to provide rapid research and guidance services for AIS delivery teams at no additional cost to our customers.

What is Power Platform?

Power Platform is a business application platform that allows users to create and deploy applications with the help of its four components.

The four components of Power Platform

Components of Power Platform

Power Apps

Power Apps provides a rapid low code development environment for building custom apps for business needs.

Key features:

  • Low/no-code platform for building apps
  • Work with data where it lives.
  • Add artificial intelligence to your app with no code

Types of Power Apps:

  • Canvas Apps – Canvas apps are a great option when you want to build an app from a blank canvas. You start by choosing the screen size: tablet or mobile
  • Model-Driven Apps – Model-driven app design is a component-focused approach to app development.
  • Portals – Portals bring the power of no-code solutions to building external-facing websites. You can build an anonymous or authenticated website through the Power Apps interface that allows users to interact with data held in Dataverse.

AIS was recognized as a Finalist for the Microsoft 2021 Power Apps and Power Automate Partner of the Year Award.

Power Automate

Power Automate lets users create automated workflows between applications and services. It helps automate repetitive business processes such as communication, data collections, and decision approvals.

Key features:

  • Automated workflows between applications and services
  • Process Automation
  • Provides Saved Templates

Types of flows:

  • Event-Driven Flows – These are flows that you build with a trigger and then one or more actions. There are many triggers and actions available, thanks to the existing connectors.
  • Business Process Flows – These flows are built to augment the experience when using Model-driven apps and the Dataverse. Use these to create a guided experience in your Model-driven apps.
  • Desktop Flows – These robotic process automation (RPA) flows allow you to record yourself performing actions on your desktop or within a web browser.

Beyond simple workflows, Power Automate can send reminders on past due tasks, move business data between systems on a schedule, talk to more than 275 data sources or any publicly available API.

AIS held an internal hackathon for Microsoft Power Platform to expose our team to the platform, concepts, approaches through hands-on experience.

Power BI

Power BI (Business Intelligence) is a business analytics service that delivers insights for analyzing data. It can share those insights through data visualizations which make up reports and dashboards to enable fast, informed decisions.

Key features:

  • Business analytics service that delivers insights for analyzing data. It helps with the following:
    • Connect to Data
    • Transform Data
    • Visualize Data

Building Blocks of Power BI:

  • Datasets
  • Reports
  • Dashboards

Power BI lets you easily connect to your data sources, clean, and model your data without affecting the underlying source, visualize (or discover) what’s important, and share that with anyone or everyone you want.

Power Virtual Agents

Power Virtual Agents enables anyone to create powerful chatbots using a guided, no-code graphical interface without the need for data scientists or developers.

Key features:

  • Create chatbots using a guided, no-code graphical interface

Minimizes the IT effort required to deploy and maintain a custom solution. We can perform the following tasks:

  • Create a chatbot
  • Test a chatbot
  • Publish a chatbot
  • Analyze a chatbot

Hands-on Links:


Power Platform features offer several features. Some of my favorites on Power Platform are AI Builder, which allows users and developers to add AI capabilities to the workflows. Microsoft Dataverse lets users securely store and manage data from multiple sources, and Connectors enable you to connect to apps and data, and devices in the cloud. We will discuss these in detail in the next blog. Stay tuned!



One of the challenges I had when learning Dynamics 365 / Power Platform development was how to add custom functionality to the User Interface. The .NET developer in me was frustrated when I wanted to add a button to the page that triggered some server-side code. Eventually, I learned a pattern of adding HTML / JavaScript resources to the page that would create an Annotation (Note). A plugin would intercept the Annotation and get the Regarding object. This would allow me to trigger server-side code from the User Interface, but it was not as graceful as I would have liked. A colleague of mine, Patrick O’Gorman, told me about Power Apps Component Framework (PCF) controls for some time, and I recently decided to start experimenting with them. In this blog post, I will illustrate how I could use a PCF control to trigger a flow in Power Automate.

Creating the PCF Control

Before creating the control, I recommend reviewing both the Microsoft Learning Paths for Power Platform Component Framework and Patrick O’Gorman’s PCF Demo.

I begin by creating a folder to house the project and then follow these steps:

  • Open Visual Studio (VS) Code
  • In VS Code, Open the folder that was created for the project
  • Click View and then TerminalIn the terminal window, I do the following:
  • Initialize the project: pac pcf init –namespace PCFControls –name PCFFlowTriggerDemo –template field
  • Install TypeScript: npm install typescript
  • Build the project: npm run build
  • Run the project: npm start

When I run the project, the PCF Control Sandbox opens. It is empty at this point, but not for long.

Empty PCF Control

I close the Sandbox window and use CTRL+C to terminate the Sandbox in the terminal window.

Creating the Power Automate Flow

For this project, I will set the control to the side for now and create the flow because I will want the endpoint created to use in control. For this example, I will create a simple workflow that receives a Contact Id from the PCF Control and then emails the Contact. I realize there are better methods for emailing a client within the Model Driven App, but this is just an example. I create this flow by following these steps:

Configure the Trigger

Login to Power Automate

Create New Flow and choose Instant cloud flow

Create New Flow and choose instant cloud flow

Enter the name of the flow and choose When an HTTP request is received (Request) for the trigger.

Build and instant cloud flow

When the flow opens, expand the trigger and select Use sample payload to generate schema.
Use the following JavaScript Object Notation (JSON)
{ “contact” : { “contactid”: “00000000-0000-0000-0000-000000000000”} }

Enter or paste a sample JSON payload

Click Done and the schema generates:

When HTTP request is received

Check the Origin

Next, I verify that the request’s origin is from my Power App. This prevents someone from using PostMan, Fiddler, etc. to build a request and hit the endpoint maliciously.

Click New Step > Control > Condition
Click left-hand Choose a value > Expression and enter the following:

Choose a Value and Expression

Click left-hand Choose a value and enter the root URL for Power App (ex. https://orgc76a7275.crm.dynamics.com)

Email the Contact

Inside of the Yes condition, click Add an action > choose Microsoft Dataverse as the connector and then Get a row by ID.
Select Contact as the table and select the contacted from Dynamic content in the Row ID field.

Select contact as the table

Inside the Yes condition, click Add an action > type Outlook, select Office 365 Outlook as the connector type, and then Send an email.
Click To > Add dynamic content and then select Email.

Send an email

I fill in other required fields to send a test email.

Send a test email

Click Save

Get the POST URL

Now that the flow is complete and we have saved it, the POST URL is made available. I scroll back up to the top of the flow and expand the trigger; I copy the URL and save it later.


Triggering the Flow from the Control

Now that I have the PCF control project in place and the flow complete, I can finish the control. I return to VS Code, open the index.ts, and perform the following steps:
I want to add a variable for the current context and the container that I will be using to build our control. Add the following lines just above the constructor.

               private _context: ComponentFramework.Context<IInputs>;
              private _container: HTMLDivElement;

Triggering the Flow from the Control

Next, I need to create an HTML Div element, add a button, and add an event listener for the click event. Locate the init method and replace the code inside with the following lines:

                              this._context = context;
                             this._container = document.createElement("div");
                             let button: HTMLButtonElement = document.createElement("button");
                             button.id = "cf6e3bc1-1cc1-4404-9171-9b7c981f97f6"
                            button.innerHTML = "Email Contact";
               button.addEventListener("click", this.emailContactOnClickHandler.bind(this));

Triggering flow from control

Finally, I need to add the click event handler. This code gets the Id of the current Id of the record, builds the JSON payload that I used earlier, posts it to the URL from our flow, and disables the button (to prevent spamming it). Below the destroy method but inside the class, add the following method:

	private emailContactOnClickHandler(event: Event): void {
		var context = this._context;

		var contactId = (<any>context).page.entityId;
		var contactPayload = '{ "contact" : { "contactid": "' + contactId + '"} }';

		var req = new XMLHttpRequest();
		var url = "[URL FROM FLOW]";
		req.open("POST", url, true);
		req.setRequestHeader('Content-Type', 'application/json');

		let button = document.getElementById("cf6e3bc1-1cc1-4404-9171-9b7c981f97f6")
		if (button) {
			(button as HTMLButtonElement).innerHTML = "Email Sent...";
			(button as HTMLButtonElement).disabled = true;

Destroy Method

You may have noticed that I am using a GUID for the button; there is nothing special about this GUID, and any can be used. I just needed a unique Id for the button control to retrieve it later. I also left out the URL from the flow; this should be the value created when the flow was saved. Now I can build and run the project:

  • Build the project: npm run build
  • Run the project: npm start

When I run the project, the PCF Control Sandbox opens, and we can see our button element now.

Power Apps Test Environment

I close the Sandbox window and use CTRL+C to terminate the Sandbox in the terminal window.

Deploying the PCF Control

Now I am ready to deploy the control of my Model Driven App; in this case, I am using a Dynamics 365 Sales Trial. I deploy the new control by doing the following:

Publishing the Solution

  • In the terminal window, I authenticate with my App: pac auth create –url https://orgc76a7275.crm.dynamics.com
  • I build the project: npm run build
  • When the login window pops up, I enter my credentials
  • I deploy the solution: pac pcf push –publisher-prefix ais

Adding the Control to the UI

I click on the gear, select Advanced Settings.

Advanced Settings

I click the drop-down next to Settings and then click Customizations and then Customize the System.

Customize the System

Note: Normally, I would use a custom solution instead of Customize the System. When I use Customize the System, I am editing the default solution that I am not concerned about for this example.

In the Solution window that opens, I expand Entities, locate and expand Contact, select Fields, and then click New.

Contact Fields

For the Display Name, I use “PCF Email Contact” and change Searchable equal to false; this will prevent the field from appearing as a search as an option. This field will serve as a placeholder for my control. I leave everything else as-is and click Save and Close.

PCF Email Contract

In the Solution, select Forms and then open the form. In my case, the entity is configured to use the Sales Insights by default, so I will edit it.

Sales Insights

In the form window that opens, I locate my newly created field and drag it right below the Email field.

New Field with Email

I double-click on the field, uncheck the Display label on the form, and then select the Controls tab.

Display label on the form

In the window that pops up, I can see my new control.

Add PCF Trigger Control

I select it and click Add.
In the Field Properties window, I tick the options Web, Phone, Tablet and click Ok.

Field Properties

In the form window, I click Save and Close.
In the Solutions window, I click Publish All Customizations.

PCF Control in Action

Now that I have the PCF control deployed and the flow waiting for a POST request, I am ready to test. I have created a Contact record with my email address, and now when I edit it, I see the Email Contact button.

PCF Control in Action

When I click it, it is disabled and changes to Email Sent.

Disable and Send Email

When I navigate to Power Automate I see that my flow has been completed successfully.

Successful flow completed

Finally, I check my email and it is correct.

Check email


As you can see, wiring up a control to your Power App with server-side logic is easy with Power Platform. Power Automate provides you with fantastic low / no-code solutions, and the Power Apps Component Framework makes it easy to design, publish and connect controls to your user interface.


Custom Pages give developers full flexibility to customize the page and connect to multiple data sources. Moreover, it allows us to use the low-code logic by using canvas designer to edit and create the pages.


  • Previously in the Model-Driven App, we could only add the existing view, charts, and dashboard into the Model-Driven App, which all correspond to one data source. But on a custom page, you can add one or more data sources by using the build-in connectors or creating a custom one.
  • Instead of using the predefined layouts of the forms and views, you can create your page’s custom design and layout, which can be responsive too, using the containers.
  • From one custom page, you can also navigate to form or view or another custom page on a click event of a button or selecting an item in the gallery.


We have created a use case where we are using an existing table named Report Cycles. This table contains the Month and Year for which the reports are created. Each record contains four modules, and for each module, we have four statuses like “Not Started,” “In Progress,” “Exporting,” “Completed.” Each module goes from these four statues, and when it reaches the last status, i.e., “Completed,” it is marked as done.

The classic view may look like this:

Active Report Cycles

But with a custom page we can create this:

Custom Page

Major Components

Vertical Gallery

The Data source for the Gallery is the Report Cycles table in Dataverse. The Gallery contains two labels and two shapes, Rectangle and Arrow. To show the selected item in a different color than the default one, I replaced the default value for the Template Fill property with:
Vertical Gallery: The Data source for the Gallery is the Report Cycles table in Dataverse. The Gallery contains two labels and two shapes, Rectangle and Arrow. To show the selected item in a different color than the default one, I replaced the default value for the Template Fill property with:

If(ThisItem.IsSelected,RGBA(246, 88, 16, 1),RGBA(0, 0, 0, 0))

The function return the color RGBA(246, 88, 16, 1) if the current item in gallery is selected otherwise return RGBA(0, 0, 0, 0) Which is white.
Similarly for the Arrow Shape Color and Labels Text gets changed to White when selected.

Change Color of Arrow

Colored Status

For each Module, there is one label that tells the status for it. The color for the text changes to red when it is “Not Started,” blue when it is “In Progress,” orange when it is “Exporting,” and Green when it is “Completed.”

Colored Status

This scenario has been achieved by applying the below formula for the Color property of the Label.

IsMatch Function

The IsMatch function takes two parameters and checks whether both of them are equal or not. If not, it will return false, and if equal, it returns true.

Edit Button

The edit button helps navigate the user to the edit form for the selected item. This again is a handy feature of custom pages. In this use case, it opens the edit form for the chosen item in the Gallery.

Navigate Functionality

Navigate function is used, which accepts the target value of the selected item from the gallery here. This formula is given from the OnSelect property, which executes the given function when the button is clicked.

Status Indicator

This shape helps the user inform what percentage of the task has been completed. If we dive deeper, we will know that these are four different shapes, which become visible at different statuses. For example, the quarter circle shape has the given formula on the Visible property. This means when the Label equals “Not Stated,” the shape will be visible.

Similar to other shapes like Semicircle, Three Quarter circle, and Circle, they get visible when statuses are “In Progress,” “Exporting,” and “Completed,” respectively.


Sometimes you may encounter this error which can be resolved by enabling third-party cookies for the site.

Resolve Error Enabling third party cookies

Dynamics 365 Error


This blog has explained the use of custom pages in Model-Driven App and its additional features, which were not there earlier. It also describes the pre-known canvas designer and its low code platform for custom pages. The blog covers a use case and its major components. Each component is explained with the formulas used and screenshots highlighting the details.


In May, AIS held an internal hackathon for Microsoft Power Platform to expose our team to the platform, concepts, approaches through hands-on experience and to demonstrate the role Power Platform plays in modernizing legacy applications in the cloud.

The front-end team focused on building the Power Apps Portal for the end-users and a model-driven app for the administrators. The Portal allowed the users to browse through the product catalog, add an item to the cart, place an order, view their past orders, and manage their profile. The model-driven app allowed administrators to manage the product catalog just like the legacy application. The team used Portals Web API to fetch data from Dataverse and used Liquid templates for web pages.

The Front End team had a goal of migrating the legacy E-Shop web application to the Microsoft Power Platform to provide a website for customers to browse through products and place orders. We also require an application to manage backend data. The Power Platform provides app-building solutions with Power Apps. We developed two applications for our app modernization effort – a Power Apps portal and a model-driven app. Read more to learn how we did it.

Our Approach

We used a Power Apps portal to build an external-facing, responsive website for customers. This portal replaces the front-end of our legacy application. The selling point of the Power Apps portal is the capability to securely target an authenticated user and the flexibility of catering to anonymous users, all in the same product. In addition, the portal app integrates with Microsoft Dataverse, a feature-rich data storage solution.

For data management, we developed a model-driven application. A model-driven app follows a data-first approach and provides a customizable interface, including views, forms, charts, and dashboards, to manage data present in Microsoft Dataverse. This application is only shared with internal users, i.e., users who exist in our Azure Active Directory. The app allows the internal user to create, update, or delete products from the catalog; these catalogs and products are shown on the Power Apps portal.

Technical Approach

Power Apps Portal

The Power Apps portal allows users to browse through the product catalog, add an item to the cart, place an order, view past orders, and manage their user profile. A default domain is provided for the Power Apps portal but can also be set to a custom domain.

The authentication method used is Azure B2C, which is Microsoft’s preferred method of authentication. An extension of the Azure Active Directory model enables external customers to sign in with either local credentials or through a choice of several common social identity providers. Each authenticated portal user associates to a record in the Contact table in Dataverse.

A key concept of the Power Apps portal is building reusable web templates. They come in handy when multiple web pages need a standard template. For this portal application, we created two templates – header and footer are used by all web pages. We used HTML and Liquid programming language for design. Power Apps portals can be further customized with CSS and JavaScript where needed.

The portal app consists of multiple web pages to provide different abilities to users, and each page’s relationships to other web pages form the website’s hierarchy. Permission can also be set up for which pages each web role has access to. The web pages created for this portal app:

  1. Home: Displays the product catalog, which allows users to filter products by brand or type and add a product of their choosing to the cart. This page is accessible to all users who visit the portal.
  2. My Cart: Displays the product(s) added to the cart, accessible only to authenticated users.
  3. My Orders: An authenticated user can see previous orders and further drill down to get the order details.
  4. Profile: Authenticated users can edit their profile information if needed.

When a user checks out and places an order, each product is associated with an order ID for tracking. Since all the data is stored in Dataverse, the portal’s web API interacts with this data. The portal Web API can be used to perform CRUD operations across all Microsoft Dataverse tables from portal pages.​

AIS was recognized as a Finalist for the Microsoft 2021 Power Apps and Power Automate Partner of the Year Award!

For security, table permissions and web roles are implemented to ensure the privacy of the data from unauthorized users. Users are assigned web roles to determine their level of access. There are three out-of-the-box web roles available- Administrators, Authenticated Users, Anonymous User (Unauthenticated User). Users are automatically assigned the Authenticated user web role once registered with the portal making user roles easy to maintain.

Table permissions are enabled, which allows showing records based on user context. For example, users can only see their order(s) if they are authenticated and no other user’s order information is available. Table permissions are also used to show products within the order, based on the product’s parent/child relationship to the order.

Model-Driven App

The model-driven app is used for catalog management and serves as the back end for our application. It contains a custom form where users can add, delete, or view details of products and catalogs. Active (referring to status) products and catalogs are displayed on the portal app. When a product is no longer available, it can be deactivated, which refers to soft deletion. I.e., the product is no longer be visible on the portal website but is still part of Dataverse.

The model-driven app also allows users to view relationships between data and tables, add personal views of data, and make additional customizations to the app based on the permissions of the user’s assigned security role.

Lessons Learned

We can use a Power Apps portal as a modern low code alternative to create websites and interact with data in Dataverse.
Model-driven apps provide a rich no-code design environment and can also be distributed as a solution.

Thank you to the Front End team for sharing their experience
Ritika Agarwal (team lead)
Devyanshi Tiwari
Pooranendu Patel

Next steps

PowerApps Portal supports many languages, so in the future, we can make this website available in multiple languages.

We will be diving deeper into each team, so stay tuned for more blog posts around our AIS Internal Hackathon!

AIS provides employees with opportunities to learn and grow in their careers. Won't you join us?

Recommended Content


How We Modernized a Legacy App using Power Platform

In May, AIS held an internal hackathon for Microsoft Power Platform to expose our team to the platform, concepts, approaches through hands-on experience and to demonstrate the role Power Platform plays in modernizing legacy applications in the cloud.

The Microsoft Power Platform Hackathon was an opportunity for our enthusiastic team to modernize a legacy e-commerce (E-shop) application using Microsoft Power Platform. The legacy application, the deployment of eShopOnWeb, helped users find a product of interest by browsing and filtering. Users could also add products to their cart and checkout. The app also provided an interface for administrators to add, update, or delete products from the catalog. The idea behind this hackathon was that we could build this application on top of the Microsoft Power Platform or Low Code application platform instead of using classic ASP, ASP.NET, and GSP. We wanted to write the application using Power Portal to drag and drop to use existing components. 

A new system was developed to replace the legacy e-commerce application with the complete feature parity. The solution included a Power Apps Portal with the same “look and feel” functionality. We used Dataverse as the persistent layer instead of SQL server and integrated it with new communication methods such as sending emails and text messages to users. Additionally, we used a Web API to communicate with Legacy Reporting Systems using Power Platform Connectors, providing secure access to the new system using Azure Active Directory B2C.

In addition, the team explored ways to backup and source control the solution and automate the deployment from one environment to another. The diagram below represents the architecture of our final solution.

Final Power Platform Blog

It is named ‘Work Less, Do More,’ Power Platform replaces the work that might take many days or months to a few hours. So let’s dive in and learn how we arranged all these pieces and modernized the legacy application using Microsoft Power Platform.

AIS provides employees with opportunities to learn and grow in their careers. Won't you join us?

Technical Approach

Our main motivation was to identify the appropriate approach to bring applications to scale. Our innovative approaches and technical depth have earned us the privilege of experience in designing, implementing, and modernizing some of the most complex cloud solutions. The application was divided into different components, which were developed by individual teams.  All the components were then pulled together to provide the complete Power app solution.

When dealing with legacy applications, we looked at past examples of our approaches from experience and have outlined them below: 

  • Rehost: A direct cloud lift and shift. This is a faster, less resource-intensive migration that moves your apps to the cloud without any code modification. The rehosting approach to app modernization is capturing the on-prem environment that runs an application (the servers) and directly moving that to the cloud as virtual servers. In this approach, the environment hosting the application is modernized, but the core application itself is not significantly offered.
  • Refactor: This approach is about modernizing legacy applications by rearchitecting to target cloud-native “serverless” technologies where possible. Refactoring typically requires more significant recoding of the existing application, however, this method takes advantage of the best of what the public cloud has to offer – managed offerings for all application components. In this approach, we re-architect existing applications and deploy them as Platform as a Service (PaaS).
  • Replatform: Essentially, this approach is somewhere in between Rehost and Refactor, because the entire VM is not moving to the cloud. This application will be containerized and run on top of Kubernetes.
  • Reimagine: This is typically thought of as a Greenfield cloud-native rewrite, which is why code changes are high, even though you will eventually end up with a low operating cost.

The idea of Power Platform and low code applications is that you can get to the Reimagine approach without having to spend a lot of effort in building a cloud-native application.

In this section, we are going to highlight these components and how they were implemented in our solution:

The front-end team focused on building the Power Apps Portal for the end-users and a model-driven app for the administrators. The Portal allowed the users to browse through the product catalog, add an item to the cart, place an order, view their past orders, and manage their profile. The model-driven app allowed administrators to manage the product catalog just like the legacy application. The team used Portals Web API to fetch data from Dataverse and used Liquid templates for web pages.

The data team focused mainly on using Microsoft Power Platform Dataverse as the persistent layer for both the Portal and the admin app. They also migrated schema and data from legacy datastore to Dataverse by exploring various techniques, including Dataflows, CSV imports, and custom code.

The integration team focussed on leveraging existing Power Platform connectors to add new functionality to the system. For example, the system sends the order confirmation email to the user using the Office Outlook connector in the Power Automate Flow. Similarly, it sends text messages to users through the Twilio Connector. The team also leveraged SQL Server Connector for data sync so that the legacy reporting systems remained unaffected.

The DevOps team automated the portal deployment process using Power DevOps Tools and deployed the solution across three environments (dev, test, prod). Since Microsoft Power Platform does not support source control and versioning, the team used Azure DevOps as the solution repository and version control.

The identity team focused on providing secure access to the Portal to a different set of users. The team used Azure AD B2C to decouple identity and access management from the Portal application.

Stay tuned! We will be publishing a blog for each team for a deeper dive into their individual focuses for this hackathon.

Lessons Learned

Ultimately this hackathon proved that Power Platform is a great app modernization solution for the following reasons.

  • We can use Portal as a modern low code alternative to create websites and interact with data in Dataverse.
  • Model-driven apps provide a rich no-code design environment to create applications and share quickly.
  • We can quickly build secure apps using connectors.
  • Innovate and improve business, as these connectors are easily customizable, and end-users can easily change or create the content for Email or SMS Templates.
  • With the help of Power Platform build tools, we can quickly deploy the solution into various environments. Increase the release frequency.

AIS architected, developed, and deployed a secure global health solutions management application and digital marketplace built on Power Platform.

Thank you to the Internal Power Platform Hackathon Technical Deep Dive team
Authored by Lav

Covers experience from all teams:

Front end
Ritika Agarwal (team lead)
Devyanshi Tiwari
Pooranendu Patel

Jagrati Modi (team lead)
Souradeep Banerjee
Nikhil Grover

Kranthi Kiran (team lead)
Varalika Bishnoi
Sravan Kumar
Pavan Bandi

Vikram Reddy (team lead)

Lav Kumar (team lead)
Davood Khan

Recommended Reads

Prototyping in Axure vs. Power Apps

As I described in part one of this blog series, prototyping was an integral step of our user-centered design/discovery process. When we first started on the project, the UX Architect and I used Axure, a well-known prototyping tool familiar to us. However, as the project progressed, we moved into prototyping in Power Apps directly.

Several reasons led to such change:

  • Our client’s security policy required that we keep the prototypes in their tenant.
  • Axure is a third-party tool.
  • When developers built the new solution in Power Apps, they could not reuse any Axure elements, such as the interaction that we built with Axure’s dynamic panels. While they could inspect the Axure prototype about spacing, color, or padding, they had to re-create all design elements in Power Apps.
  • Some Axure controls or design elements were difficult to replicate in Power Apps due to formatting and accessibility limitations, which created inconsistencies between the prototype that stakeholders saw and the final solution.
  • Using Axure also incurred an additional licensing cost.

The table below lists some pros and cons between Axure and Power Apps.

Axure vs. Power Platform

As shown in the table above, prototyping in Power Apps presented significant advantages over Axure. Not only were we able to keep all content within the same tenant, but also our Developers could reuse some prototype code and design elements when they started development, such as directly copying form controls and functions from the prototype.

In addition, as the time of writing this blog, the project team has been developing a Power Apps Component Library, with the consistent design of form elements, which will further streamline code and element reuse in the future. In addition, the project team has been mentoring client employees from several business units in their InfoPath form from the modernization process. The Component Library will serve as a great tool to help these people, who may not have any UX or user interface design knowledge, follow UX design best practices.

Prototyping in Power Apps did pose some challenges because it always takes time to learn something new. However, I was very motivated and started to prototype in Power Apps as soon as I had the opportunity. I saw how our Developers quickly added, removed, or modified form elements when we worked together on some app requirements. I also had a glimpse of the Power Platform capabilities when I attended a workshop two years ago and knew it was citizen developer-friendly. (See my previous blog: Microsoft Business Applications: A UX Researcher’s Perspective).

My prototyping experience in Power Apps proved to be very positive, and I felt empowered by the Power Platform. Here’s why:

  • I received a lot of help from my Developer colleagues, especially Stephanie Zaloga (LinkedIn). She created a template for me based on a canvas app she developed, which included many frequently used form elements and controls, pre-formatted with the appropriate fill, border color, hover, and font variations. I could easily reuse them in my prototype without having to go through the tedious formatting process. (The Component Library in development will further help.)
  • I focused on improving form instructions, labels, and controls, based on form design and plain language writing best practices, which I was familiar and comfortable with.
  • I was able to prototype cascading data fields and simple interactions, usually crucial to meet client’s business needs, with just a few essential functions in Power Apps, such as Switch or If. During development, our Developers could copy and paste these correctly formatted controls, such as dropdown fields, text inputs, and HTML text/instructions, directly to the final solution, which sped up their overall app development time.
  • I did not create any back-end data for my prototype, which would require more Developer skills.
  • I found Microsoft’s online resources and support from the Power Apps community extremely helpful. It was comforting to start a search and see results highlighting a particular problem solved.

Extensive and Helpful Microsoft Resources

Form Design and Content Development Best Practices

When I prototyped the new solution based on the existing InfoPath forms, I always considered form design best practices and tried to improve form usability whenever possible. When we met with stakeholders to get their approval of the prototype and requirements, we would point out such improvements in the prototype, making sure that they were aware and comfortable with our recommendations.

Some of the form design best practices that we implemented included:

  • Follow digital content development best practices for instructions and labels
    • Rewrite content to be more usable and accessible, including removing all those Click Here or Here standalone links
    • Shorten or eliminate form instructions whenever possible
    • Use numbered lists for sequential steps and bulleted lists to support user scan, instead of long paragraphs
    • Spell out acronyms when they are used the very first time
    • Consistently use words and phrases and eliminate inconsistencies, such as up-grade vs. upgrade
  • Create new form sections with clear section labels, if needed, and logically group similar questions together
  • Ensure a clear visual distinction between primary and secondary action buttons, such as Save and Go Back, and align primary actions with input fields/user flow
  • Never use colors alone to convey information to meet accessibility guidelines

Dropdown lists were common form components. For app consistency, at the beginning of the project, our team agreed that:

  • Higher numbers or more favorable options should be placed at the top of all options instead of the bottom. This is to support natural conceptual mapping. For example: With dropdown options showing risk, we would display the options as:
    • 5 – High Risk (on the top)
    • 4 – Medium to High Risk
    • 3 – Medium Risk
    • 2 – Low Risk
    • 1 – No Risk (at the bottom)
  • Options should be displayed in a certain order: alphabetically or by priority/frequency.
  • Radio buttons should be used for two to three options instead of a dropdown.
    • Radio buttons should always have a default value when used.
    • The default value will be displayed first.

Project Updates and More Information

Our project that lasted from August 2020 to this February was a success, which led to two additional projects starting within the same insurance company. Since February, I have been working in a project team that requires Microsoft Dataverse and model-driven apps to modernize InfoPath forms related to an important product. In this project, I function as a BA, UX Researcher, and Organizational Change Manager. This has presented exciting new learning opportunities, as well as challenges. I may write another blog post depicting my experience afterward.

To learn more:

This video demo and blog provide a step-by-step walkthrough of adding related subgrids to a Power Apps portal for a Trip Planner Application.

You may consider adding a related subgrid to your portal if you have tables associated with each other. For example, you have a Trip table that is your main table and a Traveler table. You want your traveler table to be directly related to your trip table so that any data you add to your traveler table for a specific trip will be added to that trip and not all.

The steps to achieving this include creating the relationship between tables, modifying the forms and views, adding the related subgrid to the main Trip form, and configuring the Portal Management App and portal designer.

I have created a Trip Planner application where Trip is the main table and Traveler is the related table in this walkthrough. By the end, we will have one Trip to many travelers and ensure the travelers for one Trip don’t get added to a different trip.

Traveler Subgrid Example

This example image is what the Traveler subgrid will look like inside the beach trip.


  1. In your solution, create a Trip table with custom columns
  2. Create a Lodging Table
  3. Create a 1:M relationship between Trip and Travelers
    One to Many from Related table
  4. Customize the view for both Trip and Traveler
  5. Add a new Main form inside the Trip table
    1. Add custom columns by dragging or clicking it from the left panel
    2. Add a related subgrid in the same tab
      Component LayoutNew Trip Layout
    3. Save and Publish the form, Click Back
  6. Navigate to the Portal Management App
    1. Create 2 new Entity Forms
    2. One for “New Traveler”
    3. One for “Update Traveler”
      New Traveler UpdateUpdate Traveler Image Edit and Record Source Type
  7. Create a new entity form called “Update Main Form”
    Select New Entity Step

    1. Navigate to Entity Form Metadata tab, click New Entity Form Metadata
  8. Select Subgrid from Type
  9. Select the correct subgrid from the drop-down
  10. Select the New Traveler form for Create
  11. Select Update Traveler form for all other actions
    Update Traveler and Create Entity
  12. Create an Entity form called “New Main Form” and follow the same steps for the subgrid configuration but ensure the Mode is Insert in the General tab
  13. Your Entity Forms should look like this
    Active Entity Forms
  14. Navigate to Entity Lists inside the Portal Management App and create a new list called “Main List”
    Main Entity List
  15. Under the Options tab, Add Main Form to Grid ConfigurationAdd Main List Entity to Configuration
  16. Navigate to the Portal Designer editor
    Navigate Trip Planner portal
  17. Add a List from Components
    Add list from components
  18. Select Use Existing, since we already created an Entity List in the Portal Management app
    1. Select Main List
      Update existing list
  19. Click Sync Configuration, then Browse Website
  20. You’ll see your Trip view and you’ll be able to Create New or Update an existing Trip
  21. Notice your related Traveler subgrid is added to both forms for editing
    Related Traveler Subgrid for editing 1
    Viewing Trip Details

As you can see, adding a related subgrid to your Power Apps Portal can be done out of the box with no code needed! The purpose of this is to be able to link multiple tables to each other and have them displayed in Power Apps Portals. Feel free to follow along using my instructional video for more detailed instructions.

This blog is a step-by-step walkthrough of building a fully functioning leave request app for any organization with a vacation, sick leave, military leave, bereavement leave, holidays, Jury Duty, and so on. This app will include a solution in the Common Data Service, a Model-Driven App, a Canvas App, and Power Automate. The Canvas App is for employees to submit a request. The Model-Driven App will be a back-office system used by admin or supervisors to check everyone’s requests. The Power Automate flow will trigger an approval email to the employee’s supervisor and an automated email to the employee once the supervisor has either approved or rejected the leave request.

The app’s flow will start with the employee using the Canvas App to submit a leave request form. Once that form is submitted, an email is sent to the supervisor, and, simultaneously, a new row is added to the Model-Driven App with the new leave request entry. Once the supervisor has approved or rejected the request, the employee will receive an email with the decision.


  1. A Microsoft PowerApps Trial Plan 2, this can be a Free Trial
  2. Ensure you are using an environment with a database

Common Data Service (CDS)

  1. Navigate to https://make.powerapps.com/
  2. Create a New Solution called “Leave Request Solution”
    1. Create a New Publisher called “Leave Request App”Create a New Publisher
  3. Select New > Entity name it “Leave Request Entity” and Enable Attachments
    Enable Attachments CDS
  4. Select Add Fields
    Add Fields DSC
  • Add Field: First name
    • Data Type: Single Line Text
    • Required
  • Add Field: Last name
    • Data Type: Single Line Text
    • Required
  • Add Field: Email
    • Data Type: Email
    • Required
  • Add Field: Supervisor Email
    • Data Type: Email
    • Required
  • Add Field: Start date
    • Data Type: Date Only
    • Required
  • Add Field: End date
    • Data Type: Date Only
    • Required
  • Add Field: Request Type
    • Data Type: Option Set
      • Create New: “Request Type”
        Request New Option
    • New Option: Vacation Leave
    • New Option: Sick Leave
    • New Option: Military Leave
    • New Option: Bereavement Leave
    • New Option: Jury Duty
  • Add Field: Work Items
    • Data Type: Multiline Text
    • Required: Recommended
  2. Navigate to the Views tab
  3. Select Active Leave Request Entities
    Leave Request Entity
  • Right-click on Created On Column > Remove
  • Add Last Name by clicking the field on the left
  • Add Email by dragging the field to the editor
  • Add Start Date
  • Add End Date
    Add Start and End Date
  1. Once your View looks like the above, click Save, Publish, then Back
  2. Navigate to the Forms tab
    1. Click on the row with the Form type “Main”
      Form type “Main”
    2. Add all custom fields by clicking them directly on the left
    3. Select the section so that it is outlined in purple
    4. Click Formatting on the right, select 2 columns
  3. Once your Form looks like the above, select Save, Publish, then Back

Model-Driven App

  1. Navigate to the “Leave Request Solution”
  2. Select New > App > Model-Driven App
  3. Name it “Leave Request Back Office”
  4. Check “Use the existing solution to create the App”
  5. Select Next
  6. Select Solution: * “Leave Request Solution”
  7. Select Site Map to configure it
    Select Site Map to Configure

    1. Select the pencil next to New Subarea
    2. Select the “Leave Request Entity” from the dropdown on the right
      Leave Request Entry from dropdown
  8. Publish, and Save and Close
  9. In the App Designer view, select Publish then Play
  10. Select New
    1. Add test data
    2. Select Save & Close

Canvas App

  1. Navigate back to the “Leave Request Solution”
  2. Select New > App > Canvas App > Tablet form factor
  3. Select the Insert tab > Forms > Edit
  4. A box will appear in the editor, select Connect to data
    1. Select “Leave Request Entities” on the left
    2. Under Data source on the right, select “Leave Request Entities”
    3. Select Edit Fields
    4. Add the remaining fields in the popup modal
    5. Set Default mode to New
    6. Change name to “Leave Form”
      Change Name to Leave Form
  5. Navigate to Insert tab > Button
    1. Select OnSelect from dropdown
    2. Type “SubmitForm(‘Leave Form’);Navigate(Screen2);” in the functions(fx) box
      Functions box

      1. Select Text from dropdown and type “Submit Request”
  6. Navigate to Insert tab > New Screen > Success
  7. Navigate to the File tab > Save > Publish > Play
    Save and Publish, then play
  8. Add test data, select Submit, navigate back to the Model-Driven App to see the new entry

Power Automate

  1. Navigate back to the “Leave Request Solution”
  2. Select New > Flow
  3. In the search box type “When a record is created” and select the Common Data Service option
    Common Data Service Trigger Box
  4. Fill in the trigger box:
  5. Select New Step
  6. Then the Choose an Action box, type “Start and wait for an approval” in the search box and select it
  7. Fill in the action box using the Dynamic Content box
    1. Click inside the input field and then select the correct dynamic field from the Dynamic Content popup box
      Dynamic Content Box
  8. Select New Step
  9. Select Condition
  10. Fill in the boxes:
    Fill in the Boxes for the Trigger
  11. Select Save >Test > Check “I’ll perform the trigger action” > Select Save & Test
  12. Navigate to your Canvas App, select Play, add test data, and Submit Form
  13. You should see an approval email in the inbox you sent the supervisor email to, select Approve
    Approve Email
  14. Another email will be sent to the employee’s email with the response
    Approved Request

Final Thoughts

Congratulations! You have completed the Leave Request app using the Common Data Service, a Model-Driven App, a Canvas App, and Power Automate. You have a fully functioning application that can be used right away! The next steps would be to implement a status field where the Approve or Reject decision will be updated in the Model-Driven App so supervisors can keep track of any pending requests. This app can be adjusted to your organization’s needs and requirements, but this app is a great starting point.

Discover how we helped a Fortune 100 Insurance Company modernize their InfoPath forms with Power Platform.

Leveraging the Power Platform and Microsoft Azure to connect housing agencies and intermediaries with the Department of Housing and Urban Development (HUD)


The US Department of Housing and Urban Development runs a program known as the Housing Counseling Program that aids housing agencies around the nation through things like grants and training. These agencies provide tremendous benefit to Americans in many forms including credit counseling, foreclosure prevention, predatory lending awareness, homelessness, and more. One of the requirements for approval into the program is that the agency uses a software system that is also approved by HUD and interfaces with HUD’s Agency Reporting Module SOAP web service.

Original System

The original system is built on Dynamics 365 Online using custom entities, web resources, and plug-ins. Complex batching functionality was implemented to deal with the two-minute timeout period that plug-ins have, web resource files (JavaScript, HTML, and CSS) were stuck in a solution with no real structure, and application lifecycle management (ALM) was extremely painful. The original system design also doesn’t account for the intermediary-to-agency relationship, specifically the roll-up reporting and auditing that intermediaries desperately need for providing their compiled agency data to HUD, as well as their own internal reporting. Finally, because the solution was built using Dynamics 365 Online Customer Engagement, licensing costs were more than double what we knew they could be with Microsoft’s new Power Apps licenses and Azure pay-as-you-go subscriptions.

The Original Diagram

Figure 1 – current CMS system build on Dynamics 365 Online


Intermediaries – organizations that operate a network of housing counseling agencies, providing critical support services to said agencies including training, pass-through funding, and technical assistance.

Modern System

Whereas the data schema for the solution remains mostly unchanged, the architecture of the system has changed profoundly. Let’s check out some of the bigger changes.

Power Apps Component Framework (PCF)

The Power Apps Component Framework enables developers to create code components that can run on model-driven and canvas apps and can be used on forms, dashboards, and views. Unlike traditional web resources, PCF controls are rendered in the same context and at the same time as any other component on a form. A major draw for developers is that PCF controls are created using TypeScript and tools like Visual Studio, and Visual Studio Code. In the modern solution, web resources are replaced with PCF controls that make calls directly to the Power Apps Web API.

Azure Resources (API Management, Function Apps, Logic Apps, and a Custom Connector)

A Custom Connector and Azure API Management are used to manage and secure various APIs that are used in the system. The connector can be used in any Azure Logic App to make connecting to an API much easier than having to configure HTTP actions. All of the business logic that once lived in plug-ins has been replaced with a combination of Azure Logic Apps and Azure Function Apps. This has provided incredible gains where development and testing are concerned, but it also provides a more secure and scalable model to support these agencies as they grow. Lastly, it removes the burden experienced with the two-minute time-out limitation that plug-ins have.

ALM with Azure DevOps Services and Power Apps Build Tools

Azure DevOps Services, coupled with the Power Apps Build Tools, are being used to ease the pain we experienced with ALM prior to these tools being available. Now we can easily move our Power App solutions across environments (e.g. dev, test, production) and ensure our latest solution code and configurations are always captured in source control.

ALM with Azure

Figure 2 – modern solution using Power Apps and Azure resources for extreme scalability and maintainability

Next Steps

I hope by demonstrating this use case you’re inspired to contact your Microsoft partner, or better yet contact us and let us work with you to identify your organization’s workloads and technology modernization opportunities.

Ready to dig a little deeper into the technologies used in this blog post? Below we have some hands-on labs for you. Stay tuned for more updates!

  1. Power Apps Component Framework Controls
    As a developer, PCF Controls has been one of the most exciting things to grace the Power Platform landscape. In this video, I’ll show you how to go from zero to a simple PCF control that calls the Power Platform Web API. I also provide a Pro Tip or two on how I organize my PCF controls in my development environment.

  2. Using an Azure Logic App to Query Data in an On-Premises SQL Server Database
    Companies are embracing modernization efforts across the organization, quickly replacing legacy apps with Power Apps and Azure resources. This can’t all happen at once though, and often times companies either can’t or won’t move certain data to the cloud. In this hands-on lab, I’ll walk you through using an Azure Logic App and an On-Premises Data Gateway to connect to a local SQL Server 2017 database to query customer data using an HTTP request and response.
  3. Azure API Management and Custom Connectors
    API’s give you the ability to better secure and manage your application interfaces. Couple an API with a Custom Connector and you not only better secure and manage, but also make it super easy for other app developers across the organization to connect to your back-end resources through the API, without having to worry about all of the API configurations.
  4. Power Apps DevOps Using Best Practices
    There’s more to DevOps than just backing up your Power App solutions in source control and automating your build and release pipeline. Good solution management and best practices around publishers, entity metadata, components, and subcomponents are also key to manageability and scalability with your ALM.
This blog post is for all developers of all levels that are looking for ways to improve efficiency and time-saving ideas. It begins by providing some background on me and how my experience with Microsoft Excel has evolved and aided me as a developer. Next, we cover a scenario where Excel can be leveraged to save time. Finally, we go over a step-by-step example using Excel to solve the problem.


As a teenager growing up in the 80s, I was fortunate enough to have access to a computer. One of my favorite applications to use as a kid was Microsoft Excel. With Excel, I was able to create a budget and a paycheck calculator to determine my meager earnings from my fast food job. As my career grew into software development, leveraging all of the tools at my disposal as a solution against repetitive and mundane tasks made me more efficient. Over the years, colleagues have seen solutions I have used and have asked me to share how I came up with and implemented them. In this two-part blog post, I will share the techniques that I have used to generate C#, XML, JSON, and more. I will use data-loading in Microsoft Power Apps and Dynamics as a real-word example; however, we will need to start with the basics.

The Basics

Before going into the data-loading example, I wanted to provide a very simple example. Keep in mind that there may be more effective solutions to this specific example that do not use Excel; however, I am using it to illustrate this simple example. Let’s say you had a data model and a contact model that, for the most part, were the same with the exception of some property names, and you needed to write methods to map them. You know the drill:

var contact = new Contact();
contact.FirstName = datamodel.firstName;
contact.LastName = datamodel.lastName;
contact.PhoneNumber = datamodel.phoneNumber;
contact.CellPhone = datamodel.mobileNumber;

Not a big deal, right? Now let’s say you have a hundred of these to do and each model may possibly have 50+ properties! This would very quickly turn into a time consuming and mundane task; not to mention you would likely make a typo along the way that another developer would be sure to let you know about in the next code review. Let us see how Excel could help in this situation.

In this scenario, the first thing you will need is the row data for the contact and data models. One way would be using the properties. Consider the classes below:

Use Properties to Identify Classes

  1. Create 3 Excel worksheets called Primary, Secondary, and Generator
  2. Copy/paste the property statements from Contact into Primary worksheet and ContactDataModel into a Secondary worksheet.
  3. Select Column A in the Primary worksheet
    Create three Excel Worksheets
  4. In Excel, select the Data tab and then Text to Columns
  5. Choose Delimited, then Next
    Choose Delimited
  6. Uncheck all boxes and then check the Space checkbox, then Finish
    Uncheck All Boxes
  7. Your worksheet should look like the following:
    Sample of Worksheet
  8. Repeat 3-7 with the Secondary worksheet
  9. Select cell A1 and then press the = key
  10. Select the Primary worksheet and then cell D1
  11. Press the Enter key, you should return to the Generator worksheet and the text “FirstName” should be in cell A1
  12. Select cell B1 and then press the = key
  13. Select the Secondary worksheet and then cell D1
  14. Press the Enter key, you should return to the Generator worksheet and the text “firstName” should be in cell A1
  15. Drag and select A1:B1. Click the little square in the lower-right corner of your selection and drag it down to row 25 or so. (Note: you would need to keep dragging these cells down is you added more classes.)
    You will notice that by dragging the cells down, it incremented the rows in the formula.
    Incremented Rows in the Formula
    Press CTRL+~ to switch back to values.
  16. Select cell C1 and enter the following formula:
    =IF(A1=0,””,A1 & “=” &B1&”;”)
    As a developer, you probably already understand this, but the if statement is checking to see if A1 has a value of 0 and simply returns an empty string if so. Otherwise, string concatenation is built.
  17. Similar to an earlier step, select cell C1 and drag the formula down to row 25. Your worksheet should look like:
    Select and Drag Formula
  18. You can now copy/paste the values in column C into the code:
    Copy and Paste Values into Column C

As you continue on, Excel keeps track of the most recent Text to Columns settings used; so, if you pasted another set into the Primary and Secondary worksheets, you should be able to skip steps 1-5 for remaining classes. In the sample class file and workbook, I have included Address models as an illustration.

Next Steps

This example has covered the basic concepts of code generation with Microsoft Excel: extracting your data and writing the formulas that generate the necessary code. Depending on what you are trying to accomplish, these requirements may grow in complexity. Be sure to consider the time investment and payoff of using code generation and use where it makes sense. One such investment that has paid off for me is data loading in Microsoft Power Apps which we will cover in the next post: Code Generation with Microsoft Excel: A data-loading exercise in Microsoft Power Apps.

Download Example Workbook

Download Address Models