web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Gallery / Power Apps - Community App Samples / Google Material Design - Te...

Google Material Design - Text Input Component

Views (1705)
PowerAddict Profile Picture Posted by PowerAddict 7,316 Most Valuable Professional

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:

  1. PrimartTextAlign
  2. PrimaryTextDisplayMode
  3. PrimaryFontColor
  4. PrimaryFontType
  5. PrimaryTextFontWeight
  6. PrimaryTextFormat
  7. PrimaryTextItalic
  8. PrimaryTextMode
  9. PrimaryTextInFocusTopPadding
  10. PrimaryTextOutFocusTopPadding
  11. PrimaryTextSize
  12. PrimaryTextStrikethrough
  13. PrimaryTextUnderline
  14. SecondaryTextAlign
  15. SecondaryFontColor
  16. SecondaryFontType
  17. SecondaryTextFontWeight
  18. SecondaryTextHeight
  19. SecondryTextItalic
  20. SecondaryTextSize
  21. SecondaryTextStrikethrough
  22. SecondaryTextUnderline
  23. EnableSpellCheck
  24. HintText
  25. LineHeight
  26. Reset
  27. TextFillColor
  28. ToolTip
  29. VirtualKeyboardMode
  30. FocusBarInFocusColor
  31. FocusBarOutFocusColor
  32. FocusBarHeight
  33. GoogleStandardVisiblity

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

Other Defaults
-----------------
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:

Reset(Component_GoogleTextInput)

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:

GoogleMaterialDesignTextInputComponent.gif

I have attached the component here. Download it and enjoy a text input control inspired by Google Material Design in your apps!

 

Thanks!

Hardit Bhatia

Blog | Twitter | LinkedIn | Facebook | YouTube  |  Email

Google Materiel D...
GoogleMaterialDes...

Categories:

 Mobile App Design and User Experience

Comments

  • PowerAddict Profile Picture PowerAddict 7,316 Most Valuable Professional
    Posted at
    Google Material Design - Text Input Component

    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. 

     

    Thanks!

    Hardit Bhatia

    Blog | Twitter | LinkedIn | Facebook | YouTube  |  Email

  • R3dKap Profile Picture R3dKap 1,594
    Posted at
    Google Material Design - Text Input Component

    Hello @PowerAddict,

    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.

    Image 2.png

    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?

    Emmanuel