Flag a UDinput Field as Mandatory

Universal Dashboard Universal Dashboard Help
1

Is there an easy way to flag a UDinput field as mandatory, and label it with special color code?

2

Hi @cn9ne,

You could use input validation, either by marking the parameter in your endpoint as Mandatory = $true or using the UD validate stuffs.

See this:
https://docs.universaldashboard.io/components/inputs#validating-input

Happy hunting :slight_smile:

3

Thanks, @BoSen29.

And, would it be possible to have “mandatory” input field label with custom colors? I did a simple - “param([Parameter(Mandatory = $true)]$emailaddress,” - but I dont see any “required” flag in css inspect. Any idea?

4

Hi @cn9ne,

Sadly, i don’t think there is any easily implemented functions for this, other than the validation message when the param is not provided (which you can customize).

I’d suggest just “* Email address”, add the star in front of the label in order to symbolize that it’s required.

5

Yeah, I already did that.

But my user complains they can’t see those small asterisks - they want a different color. Sighh…

6

Hmm, you could do custom style if you had a way of referencing the speisific input.

Either that or just simply have the “placeholder” to be “REQUIRED”

I can look into the first option if you’d like?

7

Yeah, sure.

But i am not sure if we can assign IDs - I can only call the input not the label. Been trying to figure out if I can set custom attributes /style for specific inputfield. Or how do you flag the particular input as “required”.

Thanks for the help by the way.

8

The ID of a UDInputField is the Name parameter (or the parameter name if you are using a basic UDInput.)

New-UDInputField -Type textbox -Name FirstName -Placeholder 'First Name'

will show up in the HTML as

<div class="input-field col">
  <input class="ud-input" type="text" id="FirstName" name="FirstName" value="" style="~truncated~">
  <label class="" for="FirstName">First Name</label>
</div>

You could create custom CSS for the input field or for the label. Your CSS selector for the Input (HTML tag, which is contained in the UDInput) would be by ID #FirstName or input#FirstName and your CSS selector for the label would be label[for="FirstName"]

From there you could set Color = 'red' or `border = ‘1px solid red’ or whatever.

2 Likes
9

Thanks alot @sysiphean. That worked!

By the way, any idea for select drop-down label - the id keep on changing.

image

10

Don’t bother with an ID for the label, as it won’t have one. Reference it instead using a different CSS selector:

label[for="FirstName"]

Replace FirstName with the ID of your input field. That way you are selecting the label with an Attribute selector, specifically an attribute equals selector.

11

Yes, it worked for standard input text box. I am struggling with disabled input box and select drop-down. For select drop-down, when I used id=4 the font color changed, but now the ID has changed to 6. Probably the Id is generated at random or sequence?

image

UPDATE:

Okay, for disabled input label this worked.

'input[type=text]:not(.browser-default):disabled+label[for="LDAPid"]'= @{
    'color' = 'Red'
}
12

@sysiphean -

I am struggling to figure out on how to change color for dropdown select label - the for=nr keeps on changing. For example, when I used for=4 the font color changed, but now the ID has changed to 6. Probably the number is generated at random or sequence? Not sure if it’s possible to do css text selector that contains specific string. Any idea?

image

13

A little fussing with this this morning left me with a clue, but I’m not sure how helpful it will be.

I started by grabbing the default Custom Form code from the docs, and playing with it by rearranging the order of the Input Fields. Comparing what I saw there with the ud-input-field.jsx code that generates it (which I only half-understand, as I’m just learning the language) I think I follow what it is doing.

Here is the HTML source for the UDInput itself, collapsed, with the label from the Select (dropdown) selected.
image
In this example (which is pulled straight from the docs page) it has 6 UDInputFields, in order:

  • -Type ‘textbox’ -Name ‘Email’
  • -Type ‘checkbox’ -Name ‘Newsletter’
  • -Type ‘select’ -Name ‘FavoriteLanguage’
  • -Type ‘radioButtons’ -Name ‘FavoriteEditor’
  • -Type ‘password’ -Name ‘password’
  • -Type ‘textarea’ -Name ‘notes’

All of these are generated directly under the same <div>, but not all the same way. The CheckBox and RadioButtons are generated as <label> with the content below them, while the Textbox, Select, Password, and TextArea are generated as <div> with a <div> and a <label> below those. (Side note: I did not check how the other Types of Switch, Date, File, Time, or BinaryFile render.) Follow so far?

When I use the order you see here, we get <label for=“2”>. If I move it to the top, it stays at 2, if I move it below Password it goes to 3, but moving it above and below the Checkbox and RadioButtons makes no difference. So it is based on some of the ones that render as a <div> but not all.

Which is to say, after all that, that you should be able to moderately predict the number, based on the form as designed, but if you change the form you will need to double-check it. Alternately, if you only have one Select in the form, you could just jam a bunch CSS selectors for the things it could come out for:

#IDOfTheForm label[for="4"], #IDOfTheForm label[for="6"]

That would get it whether it is 4 or 6, so long as it’s under the form with -ID ‘IDOfTheForm’

If I understood the .jsx a little better, or if I didn’t have a job I’m supposed to be doing while I’m fussing with this :wink:, I may be able to give a better answer.

14

@sysiphean

Thank you for the thorough checks, I truly appreciate it.

I get the idea. I declared the #IDofUDinput label[for=“x”] in theme, but unfortunately the label number keep on changing from 4,5,8,12. I don’t know how this was generated, the select is the second UDinput field in the form - although under this UDinput there’s another nested UDinput. The label number changes when I go to other pages, or did a CTRL+F5. This is really disappointing. :frowning:

@adam - Will custom color for mandatory field be included in the V3 UDform release?

15

I added a second page with an identical (except ID) form, one page as -Content and one as -Endpoint. As I reload them, they seem to switch back and forth between IDs 3 and 6. It would make sense that as you add more the possible numbers would randomly increase.

Until there’s some way to set an ID on these (eagerly awaiting V3…) you may have to get creative with Complex CSS Selectors. Particularly under Pseudo-Classes, I’d look into the :nth-of-type(n) info.
image
In this example from before, you could use a selector:

#IDOfTheForm > .card-content > div.input-field:nth-of-type(2) > label

The > character denotes a direct child element, so you can walk down from the <div> with that ID, then the card-content <div>, then the second child of that which is a <div> with class input-field, then the label below that. It’s crazy, but it should work. Just play with your form to figure out which “Nth” your Select field is, and change it from 2 to whatever matches your form layout.

1 Like
16

OMG! That worked!

You’re truly a savior! Thank you!!! :slight_smile:

1 Like