cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
iwonder
Post Prodigy
Post Prodigy

Keep Hint Text

Thanks for taking the time to read my question.

 

Is there a way to keep the Hint Text in the Input Box until the user starts typing instead of it disappearing as soon as the Input Box has focus? I've also seen on some web forms, the hint text gets small and tucks up in the top left corner as the user types. 

 

Examples where it would be helpful:

I have a drop down above an input box so the user selects something from the drop down and then moves to the input box. The drop down list covers the input box and when the input box receives the focus the hint text disappears so the user would have to look a few fields "ahead" to see what is required in the input box. as it stands they have to click somewhere else just to see the hint text, then they can select the input box.

Another example is: I have an input box where I've previously entered an email address. I guess my browser remembers that so next time it drops down a list of previous email addresses the browser has saved thus covering the next input box... can't see the hint text just like the drop down.

 

Thanks

1 ACCEPTED SOLUTION

Accepted Solutions
RandyHayes
Super User
Super User

@iwonder 

You can't alter the way that works, but you can work around it if you want.

 

You would need to add a label underneath of your textinput control.  It would have the hint text as it's text property. 

Set the Fill of the top textinput to transparent. 

Then, for the under-label, set the Text property to: If(IsBlank(yourRealTextInput.Text), "Hint Text", "")

This way the text will disappear when your top text input has text in it.

Note: purposely did not change Visible as the under-label becomes the "fill" for the top text input.

 

I hope this is helpful for you.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

View solution in original post

8 REPLIES 8
RandyHayes
Super User
Super User

@iwonder 

You can't alter the way that works, but you can work around it if you want.

 

You would need to add a label underneath of your textinput control.  It would have the hint text as it's text property. 

Set the Fill of the top textinput to transparent. 

Then, for the under-label, set the Text property to: If(IsBlank(yourRealTextInput.Text), "Hint Text", "")

This way the text will disappear when your top text input has text in it.

Note: purposely did not change Visible as the under-label becomes the "fill" for the top text input.

 

I hope this is helpful for you.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

View solution in original post

Hi @RandyHayes 

 

Thank you for this idea... Here is what I have

 

iwonder_0-1620154952674.png

Hint Text on the Text Input is in use

Text for the Label If(!IsBlank(tiAddNewCustName.Text),"Customer Name","")

The Label is behind the Text Input (the label is the small gray text)

The Text Input Fill is Transparent

 

I really like this look, however I can't sort out the logic to show the label when the user clicks on the Text Input but has not typed anything.

 

Is the only solution to have another label behind the Text Input with larger font like the Hint Text and show it when the Text Input is blank and get rid of the Hint Text? Trying to limit the number of extra labels...

 

Thanks!

 

 

RandyHayes
Super User
Super User

@iwonder 

Yes, the only way to get that effect is to add the additional label behind it.

In terms of number of controls, you might just consider a component for the label and text input together.  That would clean things up a bit.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

Hi @RandyHayes 

 

I've played around with it a bit more and here is what I have

 

1. Make a label and set it's Text value

2. Send it to the back (bottom of controls list for screen)

3. Properties set of the label:

a. Y = If(!IsBlank([TextInputName].Text),[TextInputName].Y-7,[TextInputName].Y)

b. X = [TextInputName].X

c. Width = [TextInputName].Width

d. Size = If(!IsBlank([TextInputName].Text),8,13)

e. Padding Top = If(!IsBlank([TextInputName].Text),0,[TextInputName].PaddingTop)

f. Padding Left = If(!IsBlank([TextInputName].Text),5,12)

g. Height = If(!IsBlank([TextInputName].Text),28,tiAddNewSiteName.Height)

 

This is what it looks like:

HintText.png

I have not made a component before and have watched a few videos. I don't really understand how to get all these properties into the component that only has a label. Also, how do you dynamically size the control "screen" to match the label? I don't see why the component "screen" needs to be any bigger than the label.

 

Thanks

RandyHayes
Super User
Super User

@iwonder 

Actually, after your first post about this, I decided that - "hey, I don't have a component like this".  So, I whipped one up!

 

Here are the steps...I will also have a sample app attached that has the component in it.  But...teach a man to fish vs. feed a man a fish you know!!

Mine is slightly different with a header label (as I just preferred that style), but you can style as you like.

 

I first created a new component and called it cmpLabelHint.

To start out with, I set the Height of the component to 60 (keep in mind, anytime you set a component property, you are just setting a default for it - when used in the app, it can be changed - just like "Button" is the default text of a Button control "component", you can change it to what you want.)

I created Input Properties for the following (and their types and defaults):

   HintText - Text - "Text"
   Header - Text - "Header Text"

   HeaderColor - Color - DarkGray

   HeaderFont - Text - Verdana

   HeaderSize - Number - 9

   HeaderVisible - Boolean - true

   Default - Text - "Text"

   HintColor - Color - DarkGray

   Size - Number - 14

   ClearButton - Boolean - true

   SpellCheck - Boolean - true

   Color - Color - DarkBlue

   FontWeight - Text - FontWeight.Bold

   Font - Text - Verdana

   Reset - Boolean - false  (not, also this is set to Raise the OnReset of the component)

   DisplayMode - Text - DisplayMode.Edit

 

In the component I added three controls - two Labels and one TextInput - lblHeader, lblHint, txtInput

I arranged the order as txtInput on top and the other labels behind.

 

For the txtInput control...the following property changes:

   ClearParent.ClearButton

   Color - Parent.Color

   Default - Parent.Default

   DisplayMode - Parent.DisplayMode

   Fill - Transparent

   Font - Parent.Default

   FontWeight - Parent.FontWeight

   Height - Parent.Height - lblHeader.Height

   HoverColor - Parent.Color

   HoverFill - Transparent

   PaddingLeft - 12

   Size - Parent.Size

   Width - Parent.Width

   X - 0

   Y - lblHeader.Height

 

For the lblHeader control...the following:

   AutoHeight - true

   Color - Parent.HeaderColor

   Font - Parent.HeaderFont

   PaddingTop - 0 

   Size - Parent.HeaderSize

   Text - Parent.Header

   VerticalAlign - VerticalAlign.Top

   Visible - Parent.HeaderVisible

   Width - Parent.Width

   Wrap - true

 

For the lblHint - the following:

   Color - Parent.HintColor

   Fill - Transparent

   Font - Parent.Font

   FontWeight - Parent.FontWeight

   Height - txtInput.Height

   PaddingLeft - 10

   Size - Parent.Size

   Text - If(IsBlank(txtInput.Text), Parent.HintText, "")

   Width - txtInput.Width

   X - 0

   Y - txtInput.Y

 

Nothing else was really needed in the Component except in the OnReset action of the component - the following: 

  Reset(txtInput)

 

So...two formulas - on in the OnReset and one in the Hint label Text property.  The rest is all reference.

As you can see, I really only exposed a certain number of properties for the TextInput...more could easily be added.

 

Now...I inserted three of these components into the actual App and changed some of those properties on the Component and this is the result:

 

TextComponent.gif

Now I know you see that there is some flashing text in there...well, that is another option that I added to the component.  For simplicity, I did not mention it in the above.  But essentially it is two more properties - FlashText and FlashColor and a timer control in the component.

 

You can see them in action in the attached PowerApp file.

To use it, download it to your computer.  Then open an existing App or Create a New app in your PowerApps studio editor.  Then go to the File -> Open -> Browse For Files and then select the file you downloaded.

 

If you save the app then into your environment, you can import the component then into any app you want by choosing the Import Component from the Insert Component menu.

 

And for those that might observe this and for reference - yes, you can actually export a component and then just import that as a File.  In this case I am providing the entire app with the component only because it has the three samples from above.

 

I hope this is clear an helpful for you and that it helps launch you into designing your own components as well - they are very helpful, powerful and convenient.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

Hi @RandyHayes 

 

I've been working through this and I think I'm stuck.

 

I imported your component and looked at the Text Input. and I can't make mine do what yours does.

 

When I go to the Default property of my Text Input, for example, I type in Parent.Default but the "Default" part is red underline. When I look at yours it's not.

 

Why is mine doing that and yours is not?

 

Also, I'm trying to add your component to a Gallery, but it won't insert into the gallery, it's only added to the screen. I even tried selecting a Text Input that is already in the gallery then adding the component, but it won't add...

 

Thanks

Hi @RandyHayes 

 

I think I just realized what I'm doing wrong. Parent refers to the Component Properties, not the Screen "Parent".... 

 

Still haven't determined why I can't add the component to a gallery.

 

Thanks!

Just leaned that you can't add a component to a Gallery... very sad. I did find the place to vote for it and did so

 

Place User Defined Components inside a Gallery - Power Platform Community (microsoft.com)

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Top Solution Authors
Top Kudoed Authors
Users online (1,891)