Skip to main content

Notifications

USING MODERN CONTROLS (TABLE) ON A CUSTOM PAGE

Modern controls have come to Canvas Apps based on the Microsoft Fluent 2 (https://fluent2.microsoft.design/) design system. This allows us to greatly improve the design and visualization of our applications. This is a great advance in the design of the applications that was one of the weak points of the Canvas Apps compared to other types of applications.

 

In this example I want to show what we accomplished using modern versus classic controls. Important, I'm using Dataverse as a data source which gives us better capability.

 

In our example we have built a Custom Page to display the sections, the students and their notes. We know that a section has an N:N relationship with the person table, then the notes table has an n:1 relationship with person and n:1 with section.

 

From this data model within the Model-Driven Application I can't make a single view. If I want to have an interactive view that shows me the sections, people, notes, I can't group it into a single view because of the relational model, so we built a Custom Page.

 

Custom Page Controles Clasicos

 

Jmanriquerios_0-1719480100001.png

 

Jmanriquerios_1-1719480108114.png

 

I won't dwell too much on this point of how to build it, but we have three galleries:

Gallery 1: Sections

Gallery 2: People

Gallery 3: Notes

 

Gallery 1 shows me all the sections

 

Jmanriquerios_2-1719480121253.png

 

Gallery 2 shows me the people who are enrolled in a selected section of Galareia 1

 

Jmanriquerios_3-1719480134512.png

 

Then I had to build a third gallery by the relational model since the notes of a person can be many, so we have to filter by the section and the person

Jmanriquerios_4-1719480143845.png

 

 

Then I've given a little bit of responsive design so that it can be seen properly inside the Model Driven

 

Up to this point everything will be fine, but we can get into data volume issues in the filter or search according to the MSFT documentation Description of delegation in a canvas app - Power Apps | Microsoft Learn.

 

Another additional point is that if I wanted to sort the data or paginate my galleries I must build more development in the application

 

Custom Page Controles Modernos

Jmanriquerios_5-1719480143852.png

 

Jmanriquerios_6-1719480143856.png

 

The first change we see is that instead of using galleries, I'm using the modern table control (only usable with Dataverse for now).

This allows me to paginate and sort to be something that comes auto the box, and this already gives us a better extensibility, then there's the ability to display it as grid, list that helps us build much better.

The rest is a bit of the same thing we do in galleries

 

Table 1

Jmanriquerios_7-1719480143857.png

 

 

Table 2:

Jmanriquerios_8-1719480143857.png

 

 

Table 3:

Jmanriquerios_9-1719480143857.png

 

 

Conclusion:

The speed that modern controls bring us at the development level, specifically using tables, helps us build faster and more robust applications, then at the design level, what it gives us is much better than classic controls.

If you haven't tried it, start trying it and you may have to do a little redesign and reengineering in your current applications

 

Additional:

If we use the Grid Only redistribution behavior property gives us the logical name of the field, to change it you must select the field not the table

 

Jmanriquerios_10-1719480143858.png

 

Jmanriquerios_11-1719480143858.png

 

Jmanriquerios_12-1719480143858.png

 

 

Comments

*This post is locked for comments