Orientations so let's begin I built this power app using the classic controls.
The data is displayed in a gallery experience the user can select a specific item in the gallery look at the details the user also has the option to edit a.
Specific item where the user is free to make changes simple to screen power app the home screen that has the gallery and then the form screen that has the.
Form control experience the same app is what I have modernized by leveraging the modern controls in powerapps the modern controls create a focused.
Majority of the Microsoft experiences and with tons of new updates we now have a new modern theming system that we can take advantage of the gallery here leverages a combination.
Of modern and classic controls to represent the data app modernization should also ensure that the app is responsive in nature as an example if I was to visualize this.
App on a tablet experience we can see how the controls reposition themselves if I was to view this on a mobile experience.
I can change the orientation of the device as well I can select a specific item in the gallery to edit and this takes me to the edit form.
Experience which leverages most of the new modern controls in canvas powerapps so let's focus on the home screen here and let's modernize this we have the theming experience in canvas.
Posts Related:
- Excel Today - PowerPoint Morph with Joe Office
- 750 Labels Free Download In CDR Files Sheri Sk Office
- How To Generate ID Card Fields In 1 Click & Preview Word Documents In Excel School Manager Pt. 5 Office
Powerapps and this allows us to change - ID Card Make
The theme of our app and once we do that the classic controls will change the brand depending upon the theme selected.However these themes are standard themes and they cannot be customized plus if I was to add a classic control the base control follows the theme and if I was to change the theme.
The control that I added also changes its color based on the theme however if I was to make any modifications to the color manually and if I was to change the theme of my.
Power app that control still sticks to the manually set color so it has always been a challenge to theme or brand our powerapps.
We get a new theming system to enable that I will go to settings go to upcoming features and turn on the preview feature modern controls and themes.
And the moment I turn this on the classic theming experience goes away and the new modern theming experience comes alive we have been provided with six themes to.
Begin with and if you click on learn more we can learn about how we can leverage these themes to change the appearance of our app.
These themes come in with pre-baked objects that we can directly reference in PowerApp app dot theme is an object that gives us information like the name of the theme.
The colors that that theme supports the theme that we set will have a primary color and then we have been provided with seven darker shades and we have also been provided with lighter.
Shades
Let's go ahead and add one modern control to see how it respects the theme so I'll go to Plus and let's insert a modern button control.Go to theme and now observe as I change the modern theme automatically that buttons color will change however.
The classic controls do not respect the new theme so let's take the rectangle shape as an example it has a property called fill that has a.
Specific color to it so I'll take note of this color code because I'll show you an easy way in which I can replace all of these colors in one go.
So I'm just saving the color code for reference later and to set the fill property for this control using the modern theme I can use the app object.
Dot we have a new property called theme Dot colors Dot and this will list out all the colors that I can take advantage of.
I've got the darker Shades and I have the lighter Shades or I can pick the actual primary color the classic control has its color updated based on the modern theme that I.
Have set for my app let's change the theme to steel both the classic control and the modern control has the color updated for classic controls.
I would have to go through each and every screen and each and every control and make that change and that is a lot of work I had copied.
The color code so to change this in one go I will head over to search go to replace this was the color code that I was using.
Notice when I search for it there are 21 instances where this color is leveraged in the app I would want to replace this with my primary theme color.
I'll click replace all click replace and in one go it will go and replace that color cross all my classic control experiences where that specific color was utilized.
And if I was to change my theme in one go you can see how the entire brand of my app got updated next let's improve our Gallery design.
Experience in this Gallery I used a rectangle shape control so it kind of adds that background effect.
So I'll go ahead and cut this specific classic control go to my gallery edit I will go and add one of the modern controls which is.
Called badge I'll position this control right here I'll drag it across the entire template size this batch control.
Has an option called appearance this follows the theme of your app so if I say filled it picks the primary color of the selected theme.
If I change this to ghost kind of disappears outline will have like a border effect and tint it will leverage one of the lighter shade options related to the.
Brand which is a good option as I'm trying to add a background shape to my gallery items by Design it's circular I can change this to square.
Rounded which creates these rounded edges content is the text I'll set the content as empty and this control I will reorder this and.
Send it to the back you can see how I get this nice card like experience and that follows the modern theme of my PowerApp.
Next I have plenty of label controls here one thing to note about the classic label controllers if I was to reduce its width you can see.
How some of the text here starts wrapping and it only tries to fit all that data in that space that I have defined I can go ahead and set auto height but.
There could be a case wherein there is so much text that it starts overlapping my other controls in the gallery however with the modern text control we have more flexibility.
So I'll go ahead and delete this edit the gallery and insert the modern text control I'll position it right here if I have wrap turned off.
What it does is it places the amount of text based upon the available width of this control and if there is additional text it will simply put three ellipses.
Another control is info button so I'll add this into the gallery I'll position this on the top right and when the user will select this.
I have a property called content that I can set this I will set to this item Dot I'll pick name and if I preview the app.
Observe here there's not enough real estate to fit the text so it has the three ellipses but if I click this it will give me the.
