I ran into some interesting issues when trying to develop a custom form in vRealize Automation.
The first one was noticed when I tried to apply font-size to a field. After doing some research and watching a few videos, it looked like some Field ID’s simply could not be mapped in CSS. The main issue is the Field ID has a tilde ‘~’ in it, which is not a valid CSS ID.
A quick search resulted in an amazingly simple solution. Escape the tilde with a backslash ‘\’. Stupid easy!
My CSS up to this point contained the following;
body {
font-size: 18px;
}
#vSphere__vCenter__Machine_1\~size {
font-size: 14px;
}
#integerField_cda957b7 {
font-size: 20px;
font-style: italic;
}
#vSphere__vCenter__Machine_1\~VirtualMachine.Disk1.Size {
font-size: 32px;
}
Which produced this form.
The integerField and Size (Component Profile) updated properly, but the Requested Disk Size didn’t. (This field is actually updated using an external vRO action to change the Integer into a String, then applied to a custom property). Ok, what I was actually after was getting rid of the Label word wrap, but stumbled across the font-size issue along the way.
After digging through some debugging info I ran into two classes, one was ‘grid-item’, and the second was ‘label.field-label.required’.
After updating CSS, I was finally able to change the Requested Disk Size font, as well as fixed the word wrap issue.
My final result is a good starting point. Both Size and Requested Disk Size fields had a font size of 18, and the integer field had an italicized font with the correct size. The shadow on the Size Label was just for fun 🙂
My final CSS looks like this;
body {
font-size: 18px;
}
.label.field-label.required {
width: 80%!important;
}
.grid-item {
width: 80%!important;
}
#vSphere__vCenter__Machine_1\~size {
/* font-size: 14px; */
color: blue;
text-shadow: 3px 2px red;
}
#integerField_cda957b7 {
font-size: 20px;
font-style: italic;
}
#vSphere__vCenter__Machine_1\~VirtualMachine.Disk1.Size {
/* does not work with custom properties */
/* need to dig into label.field.label.* */
font-size: 32px;
}
Well its’ about the time of day. Be well.
{!aCoder} 