@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:
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.
