Microsoft 365 Community Community Demos, 19 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: With Great Power (Apps) Comes Great Reusability

Description

In this 14-minute all developers-focused presentation, Keith Atherton delivers practical tips/benefits of reuse. UI reuse options (gallery control, Canvas components and component libraries, element grouping, container control, duplication of elements, responsive and dynamic layouts in Canvas apps, customized controls) and code reuse options (constants, named formulas, environment variables, Power Apps Component Framework (PCF)). Upcoming features and resources (release planner, power platform blog and events) supporting reuse - drag drop to build responsive pages, device preview, user defined functions.

This PnP Community demo is taken from the Microsoft Power Platform community call – April 2023, recorded on April 19, 2023.

Demo Presenter
• Keith Atherton | @MrKeithAtherton

Community Call Conversation
• aka.ms/Apr19-Demo1

Supporting materials
• Documentation – Gallery control in Power Apps | https://learn.microsoft.com/power-apps/maker/canvas-apps/controls/control-gallery
• Documentation – Canvas component overview | https://learn.microsoft.com/power-apps/maker/canvas-apps/create-component
• Documentation – Container control in Power Apps | https://learn.microsoft.com/power-apps/maker/canvas-apps/controls/control-container
• Documentation – Create responsive layouts in canvas apps | https://learn.microsoft.com/power-apps/maker/canvas-apps/create-responsive-layout
• Documentation – Building responsive canvas apps | https://learn.microsoft.com/power-apps/maker/canvas-apps/build-responsive-apps
• Article – Create A Power Apps Custom Theme – Colors, Fonts, Icons & Controls | https://www.matthewdevaney.com/create-a-power-apps-custom-theme-colors-fonts-icons-controls/
• Article – Power Fx: Introducing Named Formulas | https://powerapps.microsoft.com/blog/power-fx-introducing-named-formulas/
• Documentation – Environment variables overview | https://learn.microsoft.com/power-apps/maker/data-platform/environmentvariables
• Documentation – Power Apps component framework overview | https://learn.microsoft.com/power-apps/developer/component-framework/overview
• Release Planner – Power Apps – Efficient maker experiences | https://experience.dynamics.com/releaseplans/?app=Power+Apps&planID=82210ccf-529c-ed11-aad0-00224827e5da
• Documentation – Simulate mobile devices with Device Mode | https://developer.chrome.com/docs/devtools/device-mode/
• Release Planner – Power Apps – Modern user experiences | https://experience.dynamics.com/releaseplans/?app=Power+Apps&status=planned
• Blog – Microsoft Power Platform Blog | https://cloudblogs.microsoft.com/powerplatform/
• Conference – Microsoft Power Platform empower everyone – Las Vegas, October 2023 | https://powerplatformconf.com/

Stay connected
• Twitter https://twitter.com/microsoft365dev
• Call attention to your great work by using #PowerAppsCC and #PnPWeekly on Twitter.

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

A

B

Welcome to my presentation with great power: apps comes great reusability. uh Thank you, David and Hugo for the opportunity to speak today and thanks everyone for your time. So, a bit about me, I'm Keith, adderton I've been a software developer and solutions architect for over 20 years, I've moved around the UK and USA, but I'm now, based in Edinburgh in Scotland I'm, going to cover a lot of things on this presentation. So if anyone's got any questions just feel free to reach out to me afterwards, I'm always happy to help okay.

B

So what we're going to cover are the benefits of reuse, some user interface and code, reuse options and upcoming features and where to find out about them.

B

So, as you could probably tell there's a bit of a theme to this session, but the way I got started with powerapps is I was actually connected. With someone who'd created an App, they worked in marketing. They created a really good app, but they weren't a developer. So they just piece things together. As a citizen maker, if you will and I was brought on board to add a code behind and make things a bit more functional, now one of the screens they created looked a bit like this.

B

It was big screen about 50 buttons and they'd been laid out in like a grid style. It was really good but they'd all been created individually and also laid out individually. So every time this person had to go back and change the text size or a collar or a font, you can imagine how much fun that was for them. So when I was brought on board, the intention was the idea you know can I help with this. Can I help make things more efficient or offer any suggestions again. The app was great.

B

There was just a few opportunities here and there so I'll come on to what we did to solve that problem in a moment so to cover benefits of reuse. We got the concept in software engineering and many other fields of don't repeat yourself or dry. You can have faster development by reusing things. You can have a consistent user interface and consistent code. Behavior you've also got reliability, so if you've got components that have been fully tested, you know using them in a new screen or a new app you're going to be confident using them they've.

B

You know, they've been checked over and there's a lot to be said for building a library of reusable components that you and the rest of the organization can use for future projects as well alrighty. So let's look at some user interface options, so many of us are familiar with Galleries and in this case that's what we use for the uh the button uh scenario that we had before with that very busy screen, and this is a way you can just have uh controls that are repeated again and again.

B

If you point to a data source or a collection, you can even Nest galleries within each other to make them more sophisticated if we need to- um and we've got some good starting point templates based on lists and galleries as well. That can just give us a great starting point that you can then modify so the examples at the top of the screen there for accounts and company names.

B

These are quite common when you point it to a table containing business data, but if you've got a menu system or a ribbon control with buttons anything that needs repeated. You know there is potential for using a gallery control for it.

B

When many of us think of reusability canvas components are very popular, so, for example, the menu system, just uh what we were talking about there with home admin and so on. um If that was something we wanted within an app on multiple screens, a component is a very good option to do that.

B

That way, if we do change that component, it's reflected in all the instances that I used and the great thing with components you can actually customize them and enhance them by using input and output properties to send data to the component or retrieve it from the component and you've got Behavior formulas which are experimental but a way of almost like raising the events like on select.

B

So if you had a component that was a modal dialog box or a yes no button, you could actually flag that within the app and put some custom power effects code behind that to customize it each time and if to take components further as well, if we do want the same components used on multiple apps, this is the concept of component libraries as well, so you can share these components across multiple apps again, any future apps can benefit from them as well.

B

Okay, talking with the UI, we can group elements together, such as the example here with group, one with three controls. Actually nested within uh groups are good, a good way to kind of uh logically group things together, but it's not a control within itself and it doesn't affect the layout of the app, but something that may be more preferable is the container control. Now this is another way of grouping controls together. We can see the example there with the left container and a right container.

B

Now this is its own control and does have its own properties, so you can toggle visible on and off. You can set X Y position. Width height so on, but the added benefits with this with containers.

B

um It is useful for screen reader users, so this actually explains logically, the layout of the app very, very useful for accessibility and also keyboard users who tab through controls as well. Containers. Add that extra benefit there and probably the most basic, is good old copy and paste. So we can duplicate elements, things like screens and components and many other things you can copy and paste as well and even apps. If you need to copy an app, then have something that looks very similar.

B

You can clone it by using save as give the app a different name, and then you've got that good starting point. Then you can make modifications and talking of reusability as well, there's a way of making apps reusable across different layouts and different screens and devices, and something can be used called responsive web design, which is quite popular with web development, um and this is a way you know you can see the exam. The illustration. Rather there you know laptops, mobiles, other sizes form factors.

B

You can really use that same app by realigning and resizing things within a site, and we could do that with powerapps too, and we've got these responsive layouts to help us get started, which is often just a collection of containers. In this case you can see things like split screens and sidebars and so on, and you can modify these and make your own, but if you need to take it further, you can also do a dynamic layout.

B

So in this example on the left, we've got say a portrait orientation and a landscape one on the right. Let's say if it's an app intended for mobile and you is turning turning the device, but you wanted to use that full screen real estate. Then it is possible. If you divide up the screen, you can use some formulas to actually realign the different components, so that again depends on the use case, but it could be useful, so I used to work with in construction.

B

Some people use ruggedized tablets out in the field, all those with desk users or managers using mobile phones on the on the go. This was a very, very useful solution and there's a really good article on Microsoft learn on how to do this.

B

Another good approach in terms of UI is reusing, customized controls. So we all know- or many of us know the out of the box controls in powerapps. We know them, we love them, but often we might want some extra branding. We might want our own organization's colors a certain look and feel certain font, families or font sizes for accessibility, so instead of using the out of the box ones on screens again and again, there's a really good article on Matthew, devaney's blog actually about the concept of a hidden template screen.

B

This is the screen that the user won't see, but you can actually get these out of the box. Controls make all your customizations and then, when you do create user physical screens, you can actually copy and paste or refer to these template controls that way, you're not having to make the customizations again and again and Sancho Hawker, who does a lot of great work, has created a free branding template app, which is along these lines to help you get started with these customized controls.

B

Okay, let's look at some code, reuse options, so quite popular in programming is the concept of constants. In this case it's just Global variables, but a way of actually having a single source of Truth at the very head of the app. So in this case, say app on start.

B

If you set these values- and you refer to the variables in the other screens, the other properties throughout the app we're not actually having the hard-coded values, it means that if ever you go back and say well, I want that Health bonus to change from 10 to 20.. You just change it once and all of the instances that refer to it then get the benefit of that change. You're not having to hunt through all of the code to find those hard-coded values. So it's simple, but it can be effective along those lines too.

B

We've got name formulas which is currently experimental, and this is in app and the formulas property, and we can see some code there as an example things like setting user email user info, you can set hard-coder values here too, but the difference with this is that these values are immutable. You can't change this definition anywhere else in the app and there's also the benefit of a deferred calculation. So it's only within the app on a screen when you actually refer to these name formulas. Does the calculation take place is not when the app loads.

B

So again it can be very valuable, and if you need something, that's set again a constant. If you will set across the entire environment, we can use environment variables as well. Now these can be used in canvas apps as well as flows. So there's a bit more reusability there and the example. There I've actually used a power bi report URL, so instead of actually hard coding this in the app in the power bi tile within the app actually setting up this environment variable level, which you can do through the powerapps portal.

B

You could just add it to a solution. You can refer to it once or many times within the apps that you've got and you can always change it in the portal and it gets reflected in the app so again, depending on the use case can be very, very useful and also we've got pcfs.

B

So this one's a bit more of a pro developer or a code first approach, but if you need some bespoke Behavior or something very niche in this example in the PCF Gallery, which actually publicly shared from the community, we've got things like postcode validation or very specific, look and feel to certain controls. So again, that's another great option. If you need it all right, so let's have a quick look at some upcoming features on where we can find them.

B

So we mentioned responsive Pages uh upcoming is some drag and drop features to that to make things a lot more easy to use we're looking at a public preview in July this year, going GA in September currently scheduled for that also with responsive layouts again, this is when you want it to be a different form, factor or different resolution.

B

You can currently do that just in a web browser, many of them have developer tools such as Chrome Dev tools, um but this has been brought into powerapps studio, so there's a device preview feature which we can see Illustrated there, and this was recently announced on uh April 4th at the biz apps launch event, so yeah very, very convenient.

B

Having that feature very good and improving the code as well with power effects, is user-defined functions or udfs, which are quite popular in other programming languages to so it's a way of breaking formulas down into smaller parts, making them recursive like in the example right here, which, for many developers like me, uh you know, can have many benefits. If you need that use case and we're looking at a public preview in June this year.

B

For that one, and in terms of looking out for new features coming up, we've got the release planner, it's actually the combined Dynamics 365, a Microsoft Power Platform release planner, but this is really cool. You can see when things are going, GA go into public preview, you can even set your own release plans and share them with others as well. So this has really improved in recent times. It's very, very useful and also the Power Platform blog.

B

Many of us might know about this one and the individual product blog blogs, as well lots of new announcements go there. It's always good to look for new features, so I would highly recommend, checking those and, last but not least, going to community events. You know like meeting these wonderful dragons, I, think the names David and Hugo I think their names were anyway. I met these great guys at the Power Platform conference in Orlando last year and uh yeah everyone's always happy to share knowledge and help each other. So yeah.

B

Right so we've reached the end, so we've covered the benefits of reuse very, very quickly, uh UI and code, reuse options and upcoming features and where we can find them and again I know I flew through that. So if anyone's got, questions just feel free to reach out to me after this session. But apart from that, thank you very much for your time.

A

Awesome awesome, Keith, there's a wealth of information. There. Lots of links are in the chat. Everybody we'll also have the video recording, along with those links available in the show notes, and all of the above I'll also have them in my screenshot summary later today, so or when you're watching this I guess it'll be yesterday the day before right.

B

I can't do the math Great Scott in the fullness of time.

A

Yes, absolutely we will give you all the information everywhere all right. Thank you. Keith well done. I appreciate all your time.