You’re offline. This is a read only version of the page.
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
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)
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!
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
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:
Clear - Parent.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:
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.
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:
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
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.
Hi @RandyHayes
Thank you for this idea... Here is what I have
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!
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.
#1
WarrenBelz
146,780
Most Valuable Professional
#2
RandyHayes
76,287
Super User 2024 Season 1
#3
Pstork1
66,093
Most Valuable Professional
Share
Report
All responses (
Answers (
