Heuristics on Custom Pages in Model Driven Apps and Accessibility
Sharon Smith
Dual Microsoft BizApps MVP | Dynamics 365 Solution Architect | 15x Microsoft Certified & Success by Design Accredited | Microsoft Women In Power Mentor & Power Up Program Champ | HeuristicDev Blogger | Public Speaker |
?- those "techy & nerdy bits" that didn't get highlighted in your Learning Pathway, but are soo important for accessibility
?
The PL-200: Microsoft Power Platform Functional Consultant collection takes you through two separate Learning Pathways on how to:
and
?
The PL-900: Microsoft Power Platform #Fundamentals Learning Path does something similar at a higher level, within its:
and the
?
?Whilst within the PL-200's Canvas App modules you're reminded as you design the User Interface to think about #Accessibility and to ensure the app interface follows accessibility guidelines
?The guidance you do receive is mainly around the limited abilities you have to influence the visual appearances of Forms, Views, Charts and Dashboards through your choices of their pre-configured components.
?The Learning Pathways certainly don't, at the time of writing, bring your immediate attention to the differences between the #UIs for Model Driven Apps and Canvas Apps, and how important this is.
?
I only found this out thanks to Matthew Devaney talking to Daryl LaBar and Scott Durow?? on Episode 099 of the XrmToolCast about his recent blog post on 'Custom Pages for Model-driven Apps'.
?And from the links in its show notes I was able to climb well down the Tree Index for Power Apps in the Microsoft Learn Documentation pages, down to the 'Create an accessible app' page of the Canvas Apps section…
??
Why is this so important?
?
Because, as Matthew says in his blog post:
"A Power Apps custom page enables you to build a full page canvas app into a Power Apps model-driven app. Model-driven apps traditionally only have forms and views. Now with?custom pages?we can build full-screen pages, dialogs and side-panes with the canvas app editor. We can even bring together data from multiple?Dataverse tables?on the same screen."
Matthew's article walks you through how to make a #PowerApps Custom Page in a Model-driven app using the Asset Checkout template, so it doesn't capture the full details shared during the YouTube podcast.
?Between them, Matthew and Scott explained that when you're designing for the web, the Universal Standard font size
? 微软 , however, uses 'points' in Office and Word, and as they obviously want any Canvas Apps developed to align, you use points in Canvas Apps as well.
?
Fortunately, there's a formula that converts pixels into points:
领英推荐
?
But to make it easier for you, I've included the link to the 'Quick Pt to Px Converter' by calculatorway in the comments:
Why is this formula / converter important?
?
Because in Model Driven Apps, all the fonts and the heights of text boxes are set in pixels!
?In some of the controls you get the choice between points or pixels; but for the most, you don't.?
?So to get a Canvas App Custom Page to look right when embedded into a Model Driven App, you need to "think #pixels".
There's a catch, though….
?
When you're programming / developing the Custom Page, you have to make that font size downscaled to 10.5 points??!?
Why?
?Because it zooms in, and as everything that's used for programming is a certain width and height, in a normal Canvas App it's #upscale.
?As the ! Note in the 'Styling custom page controls to align to model-driven app controls' section on the 'Create an accessible app' page says:
?So to maintain accessibility, you need to be 'pixel perfect':
It doesn't just apply to font sizes, though.
?Primary and Secondary #Button Controls also need the following styling changes for Custom Pages
When I added a simple blank Custom Page into the Model Driven App I built working through the #PL200 modules, I was pleased to see that the font size of the Label control I added as a first step into the Header Container defaulted to 10.5 points.
?
But if I hadn't heard Matthew on the #XMLToolCast, I wouldn't have known the significance of this, and could easily have automatically rescaled it to 12 points, which would have resulted in an overall unbalanced UI experience.
?
Hopefully one that others on this journey will now also avoid.
Dual Microsoft BizApps MVP | Dynamics 365 Solution Architect | 15x Microsoft Certified & Success by Design Accredited | Microsoft Women In Power Mentor & Power Up Program Champ | HeuristicDev Blogger | Public Speaker |
1 年XrmToolCast post on the podcacst with Matthew Devaney is at: https://www.dhirubhai.net/posts/crmaudio-xrmtoolcast_e099-custom-pages-for-model-driven-apps-activity-7061053614168965120-2FGu?utm_source=share&utm_medium=member_desktop ? Matthew Devaney's Full Tutorial on 'How to Make a Power Apps Custom Page' can be found at: https://www.matthewdevaney.com/how-to-make-a-power-apps-custom-page-full-tutorial/ ? Details on 'Styling custom page controls to align to model-driven app controls' can be found at: https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/design-page-for-model-app#styling-custom-page-controls-to-align-to-model-driven-app-controls ? Link to "Quick Pt to Px Converter" by calculatorway is at: https://www.calculatorway.com/pt-to-px-converter/