Hi there! I am happy we reunite for the second part of our 🏕️ summer camp 🏕️. Part 1 was about the amazing Creator Kit, and I hope you now understand and started using the power of these components and maybe even started creating your own. The second chapter in our summer of good-looking Canvas apps is focusing on responsiveness. How annoying is it when you create an app with super nice components, but you practically cannot use it on your phone or have a phone app layout on a laptop? You can develop device-specific apps, but who wants to do that? After this challenge, you know exactly how to overcome this by creating device-specific user experiences.
Challenge Objectives
🎯 Learn about responsiveness settings
🎯 Get familiar with the properties to make your apps responsive
🎯 Learn how to build a device-specific user experience
🎯 Build a layout template
🤓 Responsive Basics
In a bit, we will start building an app that uses all sorts of responsiveness features. But first, we need a small bit of theory.
App Settings
When you create a new app, the Display Settings have the Scale to fit and Lock aspect ratio turned on by default. This is great functionality for first-time users but blocks the responsiveness that we want to achieve. The Lock orientation setting is turned off by default. This is helpful for mobile device users to rotate the app according to how the device is oriented. Especially for tablet users, this is great functionality. So, the first step for every responsive app development is to turn off all three settings.
Dynamic Dimensions
Because we want to make the app work on any screen size, the sizing of components should be dynamic. So, instead of specifying the X, Y, Width, and Height values with just numbers, you will use PowerFx to get a value from a different component to adjust it accordingly. When we will be making our app, we will get into this in much more detail, but for now, it is good to know that the App.Width and App.Height are properties Power Apps made available for you. When you have adjusted the settings as described in the previous step, this value is the exact width and height that is available on the device the app is running on.
Size Breakpoints
A good responsive app is not just about expanding the app to the borders of your device. A good responsive app adapts the user experience to the screen size of the user’s device. Canvas apps have something called Size Breakpoints to determine what device is being used. Within the editor, there is an item called App at the top of the tree view. There are all the app properties listed. By default, the Size breakpoints are the following array [600, 900, 1200]. Depending on these three values, Size property of the screen will be given a number. If the Screen.Width is less than 600, it will be deemed small and thus Screenname.Size will return 1. between 600 and 900 will return 2, and so on. I would leave the Size Breakpoints as is. The thing that I want you to understand is that we can use these ScreenSize values to tailor the user experience for different devices. The table below shows the sizes, given numbers, and the corresponding device types.
Constant | Value | Typical device type |
ScreenSize.Small | 1 | Phone |
ScreenSize.Medium | 2 | Tablet, held vertically |
ScreenSize.Large | 3 | Tablet, held horizontally |
ScreenSize.ExtraLarge | 4 | Desktop computer |
🎬 Use The Basics
To understand the basics, we will create a simple app that uses the basics.
Create a new tablet app
Set all Display Settings off as described earlier
Add a Label and name it TopBar. Set the Text property to "My Responsive App", the Width property to App.Width, and the Align property to Align.Center. The Height can be static, so enter 60. X and Y should both be 0.
As it is the top bar, let’s make it pop out by making the Fill RGBA(0, 16, 96, 1) and the Color RGBA(255, 255, 255, 1)
Add another Label and name it AppType. Set the Width property to App.Width, the Align property to Align.Center, X to 0, Y to Topbar.Height, and the Height property to App.Height - Topbar.Height.
Set the Text property to the snippet below. In the tree view, you can see that the parent is Screen1. As mentioned in our basics section, that is where a number will be returned, ranging from 1 to 4 depending on the Size Breakpoints. For now, we just indicate what the use of that app would be.
Save the app, publish it, and run it.
Switch(
Parent.Size,
1,
"Phone",
2,
"Tablet, held vertically",
3,
"Tablet, held horizontally",
4,
"Desktop computer",
"Something is wrong with the App Size"
)If you adjust the browser window, you should see that the top bar adjusts accordingly and the text stays centered. Also, the text of the bottom label changes when you make the window a bit smaller. At this moment we only show a different text, but later on, we will see that we can use the Size property to tailor the user experience for a specific device.
If I am working on responsive apps, I like to check the different sizes while testing. To do so, I run the app in edge and use the Developer tools. Here you can select a device and the screen size will be exactly that device. The most common devices are listed, and you can specify the exact pixel width and height if needed. The GIF below shows how to do that.
You have just finished the basics. This basically is everything there is to know. These small adjustments will make your app’s user experience much better. In almost every challenge I mention that it is up to your creativity to implement what you have learned in an effective and cool way. A big kickstarter for me to get the creativity going was when I understood how a Dataverse for Teams app deals with responsiveness. In my opinion, that approach can be implemented in many apps that we create. I will guide you step-by-step through the app to show how it uses all the basics we’ve learned to make the app responsive.
🔬 Inspect Dataverse For Teams App
Maybe you have created a Dataverse for Teams app before. If not, no worries. We will do that in just a bit. What I want you to know is that we can create a functional screen from a data source. When a source is selected, the screen and all the components will be built for you, including some lovely responsiveness that we are after.
Open a browser with your developer profile.
Open Teams in the browser.
On the left navigation bar, click on apps and search for Power Apps. Select add if you haven’t yet installed it in Teams. Then open it.
Once it is opened, click the Build tab at the top of the app.
Select a team and create a new app. I named the app Challenge 008.
When you are within the editor, you will see two options on your canvas, With data and With layout. The first option creates everything for us, which is what we want. We don’t have a table yet to select, so let’s create one first.
Navigate to the Data section on the left navigation bar.
Create a new table. I named the table Challenge.
In a future challenge we can dive into the creation and usability of Dataverse for Teams apps. For now, we are only interested in the responsive aspects the generator creates for us. So, we won’t bother about creating specific columns. If you want to play around a bit, feel free to.
Close the table and it should now be visible in the Data section.
Now, select the With data option on your canvas, and select the table you’ve just created.
After the screen has been generated, save the app, and publish it to the general channel of the team.
You should now be able to use the application. Try it on your laptop, but also on your mobile device. You have to add your developer account to your Teams client app on your mobile device. Just log in and you should be able to see the team on your mobile device. Play around a bit, create an item, edit it, and delete it.
Do you notice the difference in user experience depending on the device you use? If you use it on the laptop, you have a sort of overview section on the left, and a details section on the right, where the form is shown. If you run the application on your mobile device, you will only see the overview section initially, and after you select an item from that vertical gallery or create a new item, you will only see the details section. We now have just one application to maintain, that has a tailored phone experience. Pretty lovely stuff if you would ask me.
This overview/details drill-through approach is a broadly accepted approach. Apps like Teams, Outlook, your native mail client, and messages all implemented this approach. In my opinion, this really is the number one layout for apps that focus on browsing through lists and viewing/editing the details of a specific record. Many Power Apps are created for exactly this use, so that is why I want you to understand how you can build it in your apps. A few additional concepts are explained that the Dataverse for Teams app uses for it’s responsiveness.
Local Variables
To let the app show what must be shown, we must give the application some user input. As you probably know, we can store information that we only use when we run the application in variables and collections. Canvas apps have two types of variables, which are global and local variables. Global variables can be used throughout the application, whereas local variables are used only on a specific screen. Global variables are created and updated using the Set() function, for local variables this is UpdateContext().
Now, if select the Gallery that is embedded in the LeftContainer and inspect the OnSelect property, you can see UpdateContext({ itemSelected: true, CurrentItem: ThisItem }) that sets the itemSelected local Boolean variable to true. This allows us to keep track of what the user is doing. The fact that we store it as a local variable enables us to keep track of the user input for each individual screen. Now, let’s see how that local variable is used.
NOTE see how multiple local variables can be updated with just one function.
Besides the itemSelected local variable, there are other local variables used for the responsiveness. These are newMode, editMode and deleteMode. These variables are quite self-explanatory. These local variables are only used to keep track of what the user is doing to adjust the user experience accordingly. So when you select New record in the user interface, there will be a UpdateContext({ newMode: true }) function triggered. You can see that in the OnSelect property of the TouchTarget_New shape. Notice that something similar is done when you press the delete trash can and the edit pencil on the top right.
If the Boolean is set to true, it must also be reset to false at some point. Try to find where this is done for all the xxxMode variables. The itemSelected I will show discuss later on.
Containers
As you can see in the tree view, the layout is created using different containers. The overview section is the LeftContainer and the details section is the RightContainer. There are also some other containers for the TopBar (like we created earlier with just a label) and a DeleteConfirmOverlay that will be visible when you want to delete an item.
Now, if you inspect the Width property of the LeftContainer you will see the following function.
Switch(
Parent.Size,
ScreenSize.Small,
If(
Or(
newMode,
editMode,
itemSelected
),
0,
Parent.Width
), 280
)The function takes the size of the screen as an input. If it is small (so the device is a phone), it will be set to the Parent.Width (so the full screenwidth), unless we are in new-mode, in edit-mode, or when an item is selected. In that case, the width will be 0. In other words, if you select an item on your phone, the overview section will collapse fully and give space to the detail section. The details section’s X property is LeftContainer1.Width and the width property is Parent.Width - Self.X. The X property manages the details section is always right from the overview section and the width is dependent on the overview section. In case we use the app on a phone, and all the local variables are set to false, the width will be 0. The Visible property actually hides the whole container if the width is 0.
The last piece of the function, the 280 piece, is the width when we use something else than a phone. in that case, the width of the overview is set to 280 and the details section will also be visible and directly next to the overview. This is what you see in edit mode on your laptop.
This is how the Dataverse for Teams app creates a distinct user experience for the phone. The other screen sizes just scale to the size of the screen. You could create distinct experiences for those too, but for especially small screens ask for a specific layout.
Go Back To Overview
Earlier you searched for where the xxxMode variables were set to false. I hope you found them in OnSelect of the IconButton_Cancel, DeleteCancelBtn, DeleteConfirmBtn and in the OnSuccess of the EditForm.
Then there is one more variable, which is itemSelected. In the TopBar_RightContainer there is an icon called IconButton_Back. Again, in the OnSelect property you will find the function that sets the variable to false. This one is a little different because you cannot see the icon in edit mode. If you inspect the Visible property, you will see the following function.
If(
App.ActiveScreen.Size = ScreenSize.Small,
And(
!editMode,
!newMode,
!deleteMode
),
false
)The icon is basically hidden unless we are using a phone and we are not in a specific mode. That’s why you will see the back button only when you use the app on your phone. That is how you can navigate between the left and right sections of this screen on a phone.
Up until this point, it was quite some reading. It takes some effort, but now you know how it’s done. It is also a bit of extra effort for your app development, but my experience is that end-users really love device-specific experiences. Especially for the phone, like the Dataverse for Teams example.
🏗️ Build A Template
If you want to really understand how to make an app responsive, I encourage you to build a layout yourself. At first, I wanted to list the steps that I took to get it working in Canvas Apps. But along the way, I found it was too dry to swallow. As it roughly is a copy-paste exercise, and you went through every little aspect of how it is done, you should be able to create a layout yourself.
You can then copy-paste the screen, adjust the data source of the gallery and the form, and you are basically done.
If you are eager, always sit in front of a class, or just don’t want to get sunburned, you could implement some of the Creator Kit components from summer camp part 1 in your layout. For example, the ExpandMenu component would be perfect for bigger screens. Maybe you can create a specific component for the phone size. Or bring it even further, by copying that library component, and making it a fully responsive component as it moves to the bottom and becomes horizontally oriented when used on a phone (just like the Teams navigation bar does).
I really hope this challenge gets your creativity flowing. I am really curious about what you come up with. I would like to invite you to share what you have created based on this with the rest of us. Anything from a fully operational template to a sketch or an idea is more than welcome. Anything can be posted on the comments section below.
Additional Info
For more inspiration on responsiveness, I highly recommend installing Dataverse for Teams sample apps created by Microsoft. After installing the app, you can edit the prebuilt app, and inspect how it is built. There are some inspiring takes that can kickstart your creativity as well.
🎒 Key takeaways
👉🏻 We can make one good-looking app for all devices
👉🏻 Responsiveness is about size and a matching user experience
👉🏻 The Dataverse for Teams editor has some functionality we want in Canvas Apps too.
Comments