Power Apps: Canvas Apps | Model-View-ViewModel (MVVM)


The ask this time, pitch Power Apps as a low-code consideration for a few pro-code initiatives stuck in the perpetual, project backlog. Although sentiments are changing, there are still pro-dev teams skeptical of the Power Platform.

A common concern, driven by much of the community skepticism, is the idea that low-code is limiting and restrictive, as is the case for no-code solutions. Fair early critique, but Power Apps actually empowers pro-devs to create their own code components. At the same time, Microsoft continues to introduce more features and additional enhancements, allowing low-code solutions to scale for the enterprise, like pro-code solutions would.

Still, digging into things a bit, maybe the skepticism is because more seasoned pro-devs like architectural patterns. Does Power Apps adhere to any particular pattern? In a way, yes. At least with a bit of creative thinking, one could argue that canvas apps lean towards the MVVM (Model-View-ViewModel) pattern.


Entertaining the idea, there are three parts to MVVM and “Model” is the first “M.” In simplest terms, the “Model” of a canvas app is the data access layer and available data models are listed under the Data section.

Without any technical expertise, app makers can connect to any number of data sources, leveraging the 200+ available connectors of the Power Platform. These datasets are represented as tables, and several of the common data model sources are Excel, SharePoint, Salesforce, SQL Server, and/ or Dataverse.

Figure 1 - Power Apps canvas app Data pane for models.
Figure 1 – Power Apps canvas app Data pane for models.

Following the “Model,” the first “V” is the “View.” This is the user-interface (UI), the layout and appearance of the app. Canvas apps are built using screens and each screen can have one or more elements. These elements could be data forms, galleries for collections, buttons for submission, etc. And these elements can be dynamic, depending on the app’s business logic per its data models, the “ViewModel.”

Figure 2 - Power Apps canvas app Insert pane for elements.
Figure 2 – Power Apps canvas app Insert pane for elements.

The “ViewModel” is essentially the business logic connecting the “Model” and the “View.” What’s interesting here is, unlike the “Model” and “View” being drag-and-drop, the logic needs some code. Though, not the level of coding expected of a pro-code dev. Here, makers can use Power Fx, the low-code formula language of the Power Platform and not worry about C#, Java, Python, or anything like that. Rather, they can largely leverage their exiting knowledge of Excel formulas to add their app’s logic, performing full CRUD operations on their data, shaping the models, and binding data to UI elements, even refreshing the data models after actions.

Figure 3 - Power Apps canvas app OnSelect property for a button.
Figure 3 – Power Apps canvas app OnSelect property for a button.

Conclusion:
Likely not a perfect MVVM overlay with Power Apps canvas apps, but the idea is there. And with the idea there, pro-dev teams are welcome to explore and build scalable, low-code solutions keeping with many of their pro-code best practices.

“I wish I could say that racism and prejudice were only distant memories. We must dissent from the indifference. We must dissent from the apathy. We must dissent from the fear, the hatred and the mistrust. … We must dissent because America can do better, because America has no choice but to do better.”

Thurgood Marshall,

#BlackLivesMatter

Leave a comment