Microsoft 365 Community Community Demos, 4 Aug 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ProvisionGenie v.3.0 – focus on Localization and Accessibility in Power Apps

Description

In this 17-minute developer-focused demo, Luise Freese steps through localization and accessibility capabilities recently delivered in ProvisionGenie v3.0. The tool now supports 12 languages and is built to accommodate – upload localized text in spreadsheet to localization table in Microsoft Dataverse. Admins can limit language options presented to user. Accessibility options include Theming, Screen reader and Keyboard-only support, and language availability. Call to action is to translate ProvisionGenie into more languages to enable more people to benefit from this application. This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on August 4, 2022.

Demo Presenter
• Luise Freese | @LuiseFreese

Supporting materials
• Documentation – ProvisionGenie – Dataverse vs Dataverse for Teams | https://provisiongenie.com/architecturedecisions/#dataverse-vs-dataverse-for-teams
• Tool – ProvisionGenie | https://github.com/ProvisionGenie
• Documentation - Release notes | https://provisiongenie.com/about/releasenotes/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Hi, I would like to talk about um provision genie version, 3.0 focus this time on accessibility and localization. Very few words about myself, hi, I'm luisa, I'm an m365 and power platform consultant, I'm independent. I work from germany, I'm an mvp in both m365 development and business applications.

A

You can find my blog at m365 princess.com and, if I'm not presenting, you will likely find me on twitter as well.

A

Okay, so for everyone who does not know what is provision genie, so provision genie is a provisioning engine for microsoft teams, um it's built with powerapps, dataverse and azure logic apps, and it's an open source project uh by uh myself and my dear friend carmen esteban, which can't be here today, but um actually greet everyone.

A

We already had a long journey with this project, so version one was really only creating a team adding a channel list, libraries, hostels and a predefined step.

A

We quickly progressed to version two which could already add members, add additional owners to a team and let's use a skip, the creation of channels, libraries and lists so that we were just like a little bit more flexible.

A

A couple of weeks ago we launched version 3.0, and that was a major progress, because now we do support three themes: for teams like default, dark and high contrast notes. We have localization in 12 languages, you can add onenote notebook to a channel and you can pin lists and libraries to our channels as a tab.

A

So, as today is all about accessibility and localization, you can find the full release notes at provisiond.com. I will add the link later to the chat as well, but you will find this, but speaking about localization, so it is really. We already have 12 languages, just like from danish, finnish, portuguese, even japanese, so, and that really looks cool so for european. This really looks cool if you're not used to that so hello to everyone who speaks japanese and uh thanks to our translators. uh But how does that work?

A

So how can you make that happen that you have 12 languages and a powerapp so as our data already sits in dataverse, because that is just like really the preferred way of doing this? In a powerapp, we have a special table called localization and in this table, admins can decide which languages they want users to choose from. So if spanish and english make sense in your market, then you can just like limit the choice to those two languages.

A

If you want to have just like a full-blown application and um have all languages available, that's up to you as an admin uh genie will then pick up the local just like the language from the team's context and provide this in the language that teams is running in with a fallback language. That is english. If the language that teams runs in is not supported yet, but users can also override that choice. So if there are, I don't know, teams runs in english, but they want to display genie in finnish.

A

They can absolutely do that because it is their choice to do so and how we did. That is uh pretty flexible and it also ensures the performance of the app, because you can imagine if we always needed to call just like a lot of values from an external database which database still is so it's not locally available in the app, and it was just like, add massive delays.

A

So we use a collection to display only the language that is currently selected, and then we use a lookup function so that we do not have just like a lot of nested. If statements to determine in which language we are now in. That makes sure that if we later add new languages that we do not need to change our canvas application at all anymore, so a little call to action.

A

If you speak a language fluently that is not listed on the left hand, side of the slides and you're willing to help translate provision genie, then please do reach out to me.

A

Okay. So how do we make this magic happen? First, catalog guys all like really all texts of the application. This includes text that are printed to the screen, but also just like error messages, warning messages and so on. Then have them all translated. We used just like a just like super simple, excel sheet for that and then upload this axle sheets data to dataverse. So first I tried to import this later.

A

I got the just that this would better work with the data flow, because once data is updated in an excel sheet, because I don't know some values change, because someone found a more elegant translation, then of course that should be updated as well. Automatically, and last thing that you need to do is thank all the amazing contributors and, as this is a community called. So uh thank you to everyone who really translated an entire app in their free time. So thanks to everyone.

A

So how does this now work? I will stop presenting here and jump right into the demo.

A

So what you can see is power app studio and I already opened uh provision genie and I want to show you what happens so we have here a simple text label and this text label, of course, has a text property and, as you can see, it uses a lookup to a collection and then it asks for a key which says: label welcome and it returns a value. So let's see what happens and where this collection is is being collected and what is that value about?

A

So if I go here to settings- and I say hey- I want to have this app, I don't know. um Maybe I want to have this app in french, which is uh foster.

A

Then we can see that the entire app language already changed to french, so there is, uh there is nothing that is english anymore. So how does this now work? um If I go in here and say, I want to see what this unchanged, which I did, what that does so what it does.

A

It sets the display language to a variable, and then I say I want to clear: collect into a collection called call language, and I want to filter my localizations table and the language should be the same than the selected language from my drop-down menu. Okay. So for that we would need to know yeah, but what is the localizations table? The localizations table is something that I prepared for you here. So that is a view of the localizations table. It sits in dataverse, as you can see, and we have a key.

A

We have a value and we have the language. So if I want to search for something just like look up um something that is lbl welcome, so that I would need to scroll down or set a certain filter to that. But then it already knows the language, because I searched my localization table into this collection, so only the so that I only get the data that I really need, which makes the app faster as well, and then I will return this a value here.

A

Okay, so- and that means that every single text that is displayed in the application works like that. So there are no hard coded texts inside of this app, not even error messages or warning messages, but every every single text sits in the localization table in data version is then being collected into a local collection with this drop down menu. So I'm switching to another language and, as you can see, the entire app already changes again.

A

So uh this is what we do and to quickly show this here as well. If I select this drop down and I'll see what is the items uh property so the items property determines what is shown in this drop down menu. So it refers to another data verse table which is the supported languages table.

A

So that's another one, then the localization table, and that we only have the values of the languages and it refers to the localization tables and there are the languages column so that admins can decide which language do we want to display here, because it does not always make sense to have all kinds of languages.

A

But in this demo I chose to show off all the languages, because we're very happy to have them in here and, as my netherlands is not as good as it should be, um I will switch to english again and include this pop-up again. So, as you can see, everything is localized and works like a charm, and it's even fast, because we only collect this locally when we choose or select the language and by default it checks which language is in teams and gets at this context and defaults to english if the language is not available.

A

Okay next thing next thing would be accessibility in our in our application. So we feel, like accessibility, is not a luxury thing that you should add on top to an existing app, but it should really be one of your major design goals, and this is why we really invested very, very massively into accessibility, and I would like to show you what that means to us. So first, is you already I I hinted this already.

A

We have three themes: defaults, dark and for accessibility reasons, high contrast theme- and this is especially interesting for everyone who has a hard time seeing or is partly or completely blind, because of that that helps to even even see just like a little bit.

A

If the contrast is high enough, we also made sure that we manipulated the themes.json file so that, if I add a new control, it already adapts to that look and feel of teams, and also that works in all three themes, which is quite nice and, of course, reduces the effort that I need to make as a developer.

A

Second thing is: we have a screen reader and keyboard only support, and we do this in a way that we have always the accessible label property for all controls fields and in these as well. We use the lookup function to do this in our 12 languages. So it's not that the accessible label is only available in english, but we want to make provision genie available to more and more and more people, and that is why all the comms is then available in our languages.

A

We made use of the role property of all text.

A

Labels, which determines is something a heading one heading to heading three or just like a default uh body text, which makes it easier for screen readers to announce everything correctly and so that users to have a hard time seeing something are just like more at ease what belongs together and then, of course, we use the tab index property to really make sure that people can easily tap through our app with the tab on the keyboard, because everything follows a logical order and, as I already said just like only a couple of times that, including all these errand warning messages is available in 12 languages.

A

So it ties into the localization thing as well, which is why we chose to present this at the same time: okay, a quick demo of accessibility. So I opened I open provision genie already in teams, so provision genie can work as a standalone app, but you can also run it as a personal app in teams. So this is what I did right here. You can see. I run teams in the web client right now in the dark mode. So but not everyone runs teams in dark modes.

A

I guess so what I can do is of course I can go to settings and switch to default mode and then teams switches to default mode, and if I then just like reload my it will pick up the right theme from the team's context. And yes, this is a developer environment. I know this. I will pick out the right colors and you can see that I now run provision genie in default mode as well, and if I do the very same thing with high contrast mode high contrast and then I reload the application.

A

And yes, thank you thank you for that, then you can see this runs in high contrast mode as well and for everyone who does not work on a regular basis with high contrast uh theme. This could look a little bit ugly to you. So maybe it's just like uncommon for you, but um trust me for everyone um who needs a higher contrast. This is just like really the way of consuming and interacting with apps, and also it makes sure that, additionally, to that to that theme we have a screen.

A

Reader and keyboard only supports so that we really make sure that more and more and more people can benefit from the application that we developed.

A

So how does this now work switching back to powerapps studio, so I have on app object and it is here on start and what I do on start is I set themes, so I can either do this. If I get the context from teams, this is done with the param function or I can do this with a drop down menu.

A

So this is mostly for debugging and development purposes, because mostly people will not overwrite this, but they can do so and then I defined all my app colors and I refer to all those app colors in something that I call the global app styles. So you can see for each and every single control that I have.

A

I always have three values: one for dark, one for default and one for um high contrast, notes and then a simple text label like that, so we already determined it has a text property, but that has of course also a color property and you can see it's globalappstyles.label.com and in this preview it's shown that here in default mode. This is blackish, I would say so what happens?

A

If I now go in here and I overwrite this and I say hey- I want to have this app in dark mode. It is still the same value. It is global, f, styles, dot label, dot, color, but it resolves to a white ish. So it's not completely white but whitish, because I defined that in one start and made this dynamic, and that means that everything is always adjusted.

A

Just like on the fly on time, without needing to have a different application, or something like that- and this is quite convenient for users, because they get displayed the app in the theme that they are already using, but if they want to run it stand alone or if they have a good reason to just exchange that they can do so like they can change the language as well, and with that I would like to say thank you to everyone who attended this.

A

If you feel like contributing to provision genie because you're a powerapps person or you want to become a perhaps person, please don't hesitate, you will find the github repository and the complete docs at provisiontv.com. Thank you.

B

Very, very cool, luis. Thank you for sharing that I love how inclusive that is a dozen languages. That's impressive accessibility is an important thing. Thank you. Provision genie is granting wishes just like that right, so we uh we want to appreciate, and thank you for that.