04-20-2020 00:51 AM
A few months ago, I had shared (on my blog) and here in the community, a revamped text input control inspired by Google's Material Design. I presented this, for the first time, to an audience on April's session (recording can be found here) for the Houston Power Apps and Power Automate User Group. The three controls I presented during the session were - text input, tooltip, and floating action button.
One of the feedback I got was to convert each of these control into a component to make them reusable. The first one I picked up (it just so happened to be in the order in which I had started off with revamping these controls!) was the text input control. I have started to love components (the first one was the date picker component - also v3 coming out soon!)
I wanted to provide all the properties an out-of-the-box text input control has. So here is a list of all the properties available:
All of them are pretty self explanatory except for the last one. That variable controls the visibility of a text input control that displays Google Material Design standards for some of these properties. It also provides suggestions for the other properties. Start off with a component size that is big enough to display this text input control and then once you have gone through all the properties, set the Width and Height of the component based on the suggestion. Once you are done with the suggestions, set the GoogleStandardVisibility to false and the instructions will go away.
This is how the suggestions are structured:
Google Design Standards:
Height = 90
Width = 560
PrimaryTextInFocusTopPadding = 10
PrimaryTextOutFocusTopPadding = 5
PrimaryTextSize = 20
SecondaryFontColor = RGBA(56, 96, 178, 1)
SecondaryTextFontWeight = Semibold
SecondaryTextHeight = 32
SecondaryTextSize = 15
TextFillColor = RGBA(230, 230, 230, 1)
FocusBarInFocusColor = RGBA(56, 96, 178, 1)
FocusBarOutFocusColor = ColorFade(Gray, 0.5)
FocusBarHeight = 5
PrimartTextAlign = Align.Left
PrimaryTextDisplayMode = DisplayMode.Edit
PrimaryFontColor = Black
PrimartFontType = desired font type
PrimaryTextFontWeight = FontWeight.Normal
PrimartTextFormat = TextFormat.Text
PrimaryTextItalic = false
PrimaryTextMode = TextMode.SingleLine
PrimaryTextStrikethrough = false
PrimaryTextUnderline = false
SecondaryTextAlign = Align.Left
SecondaryFontType = desired font type
SecondryTextItalic = false
SecondaryTextStrikethrough = false
SecondaryTextUnderline = false
EnableSpellCheck = false
HintText = desired hint text
LineHeight = 1.2
Reset = false
Tooltip = desired tooltip
VirtualKeyboardMode = VirtualKeyboardMode.Text
GoogleStandardVisiblity = true to read these instructions
One other step is needed to make this component work as desired is to add a piece of code wherever you want the user to click to be able to hide the secondary text if there is no text in the primary text input control. In my example, I have added a label and pushed it to the back so its behind all other controls. I have them set it's OnSelect property to the following code:
I have added 2 components and set them up with different font properties. With the rest of the settings configured as listed above, the component behaves as shown below:
I have attached the component here. Download it and enjoy a text input control inspired by Google Material Design in your apps!
It's a very interesting work that you did here. I've had a thourough look at your component to try to get a glimpse at the eventual limitations that we have at the moment with Power Apps to implement the controls in Material Design (which is a subject I am working on as well).
The main inconvenient that I see is the lack of an OnFocusIn, OnFocusOut events that we have to workaround today using a technique like yours where you need to put a label in the background to reset the components (but what happens if you click elsewhere 🤔). And if you go directly from one text input to another then the state of the first one doesn't change. We could also work this around by implementing some code in the OnSelect event of the second text input but then it sarts to be a bit complicated. So I guess that for now, all we can do is vote for the idea of having focus events (https://powerusers.microsoft.com/t5/Power-Apps-Ideas/OnFocus-Property/idi-p/247636).
I also had a question about your component... Why didn't you set up yourself the default values to your component's properties so it renders nicely immediatly after import? Because then everyone that wants to use it has to start by setting up the 32 properties manually one by one before it can be actually used. And in that case, the suggestions could be as comments in the OnReset event of the component. What's your opinion on this?
On my side I'm implementing the first control of the Google Material Design as a Power Apps component: the Top Bar. I try to do it to the pixel of course 😊. Some aspects are challenging (like the possibility to allow the user to define its own custom icons through SVG images). But the result is ok for now.
The Google Material Design version is here: https://material.io/components/app-bars-top.
I also try to come up with the best practices to implement such components. For instance, since we do not have enumeration-type properties for components I've come up with a pretty neat solution that I'll explain in this forum once I publish the Top Bar component.
May be we could work together on this and anyone else could come and join us in this effort of providing the community with all the Google Material Design controls implemented as Power Apps Canvas components. What do you think?
Thanks a lot @R3dKap for the detailed response!
The label in the background was an example to illustrate that we would want to add Reset(Component1) wherever in the screen we would want that behavior e.g. other controls. But yes, I do agree that the idea you referenced below would be very helpful, as long as that applies to a component as well.
Also, yes, I did consider setting the defaults. In fact, if I remember correctly, I think I tried but either couldn't or wanted to keep it this way as a surprise for the user using my component! Just kidding, I think I tried it once but didn't work so let it be for now. But yes, completely agree that I should set those up as defaults, will do and upload an updated copy of the component.
The top bar looks awesome! Would like to see how it works and the configurations possible with the component itself. Looking forward to your post regarding the best practice you mentioned below. I will be more than happy to collaborate with you to work on other controls so we can have the complete list of controls based on Google's design.