Anonymous_User Absent Member.
Absent Member.
1868 views

Change label color through jQuery


Hello guys! I have myself a little issue i can't get around. I'm working
on a few workflows for a client, one of them is a modification flow.

The client requested that when a value is modified in the form by the
requester said value's label should be flagged red to inform the
approver which fields were modified.

Detecting the modification was easy, just comparing the IDV's values to
the fields onload would get the job done.

Now comes the part where i need some help. Using this thread as a guide
(https://forums.netiq.com/showthread.php?15283-Approval-Form-Css-style)
I tried to change the color of a field's label to red using the jQuery
engine included with UA as an external script for the form
(/IDMProv/javascript/jQuery/scripts/jquery-1.4.2.min.js) and the
following function as an inline script:


Code:
--------------------
function flagLabel(fieldName){
$(document).ready(function() {
$("#" + fieldName +"_lbl").css({"color":"#FF0000"});
});
}
--------------------


Then in a test workflow i applied that function to a test field on the
onload event like this:


Code:
--------------------
//Inside the onload
flagLabel(field.getName());
--------------------


There was no change whatsoever. Just to make sure i wasn't mistyping
something i tried the exact function shown in the thread and changed the
field's name to "reason".


Code:
--------------------
$(document).ready(function() {
$("#reason_lbl").css({ "color":"#8B008B", "font-style":"italic",
"font-size":"large", "font-weight":"bold" });

$("#_reason").css({ "color":"#FF0000", "border":"solid-style" });

});
--------------------


After testing it i got a change on the label! But the change was on the
size (it got bigger) and inclination (it went italic) not on the color
(which should be some gradient of purple according to the description on
the thread). What did also change was the color of the field's font
(like when i typed into the field the text would be red).

To make things weirder after removing the onload event from the field i
set the style on the "Label cell style" property inside Designer to
"color: #FF0000" and there were no changes either.

What is the mistake I'm making? Am i missing a parameter on the .css
function? Do i need to set another property in Designer?

These tests were performed in a "text" field of type "string". The UA
version is 4.0.2.

Thanks in advance for any help you can provide 🙂


--
EPedros
------------------------------------------------------------------------
EPedros's Profile: https://forums.netiq.com/member.php?userid=5531
View this thread: https://forums.netiq.com/showthread.php?t=52277

Labels (1)
0 Likes
2 Replies
Anonymous_User Absent Member.
Absent Member.

Re: Change label color through jQuery

Your color changes might be overriden by the class as defined in the IDM
theme.

Try the .removeClass() function to see if that has an effect, or better
- add your new color to the theme and use your logic to switch between
label classes.

Wolfgang

On 23.11.2014 22:52, EPedros wrote:
>
> Hello guys! I have myself a little issue i can't get around. I'm working
> on a few workflows for a client, one of them is a modification flow.
>
> The client requested that when a value is modified in the form by the
> requester said value's label should be flagged red to inform the
> approver which fields were modified.
>
> Detecting the modification was easy, just comparing the IDV's values to
> the fields onload would get the job done.
>
> Now comes the part where i need some help. Using this thread as a guide
> (https://forums.netiq.com/showthread.php?15283-Approval-Form-Css-style)
> I tried to change the color of a field's label to red using the jQuery
> engine included with UA as an external script for the form
> (/IDMProv/javascript/jQuery/scripts/jquery-1.4.2.min.js) and the
> following function as an inline script:
>
>
> Code:
> --------------------
> function flagLabel(fieldName){
> $(document).ready(function() {
> $("#" + fieldName +"_lbl").css({"color":"#FF0000"});
> });
> }
> --------------------
>
>
> Then in a test workflow i applied that function to a test field on the
> onload event like this:
>
>
> Code:
> --------------------
> //Inside the onload
> flagLabel(field.getName());
> --------------------
>
>
> There was no change whatsoever. Just to make sure i wasn't mistyping
> something i tried the exact function shown in the thread and changed the
> field's name to "reason".
>
>
> Code:
> --------------------
> $(document).ready(function() {
> $("#reason_lbl").css({ "color":"#8B008B", "font-style":"italic",
> "font-size":"large", "font-weight":"bold" });
>
> $("#_reason").css({ "color":"#FF0000", "border":"solid-style" });
>
> });
> --------------------
>
>
> After testing it i got a change on the label! But the change was on the
> size (it got bigger) and inclination (it went italic) not on the color
> (which should be some gradient of purple according to the description on
> the thread). What did also change was the color of the field's font
> (like when i typed into the field the text would be red).
>
> To make things weirder after removing the onload event from the field i
> set the style on the "Label cell style" property inside Designer to
> "color: #FF0000" and there were no changes either.
>
> What is the mistake I'm making? Am i missing a parameter on the .css
> function? Do i need to set another property in Designer?
>
> These tests were performed in a "text" field of type "string". The UA
> version is 4.0.2.
>
> Thanks in advance for any help you can provide 🙂
>
>

0 Likes
Anonymous_User Absent Member.
Absent Member.

Re: Change label color through jQuery


Thanks for your answer Wolfgang! 😄 After some fiddling around I got it
to work. In case anyone wants to know how I've written a description
bellow.

The tl;dr version:

The color property is not being inherited from the parent <div> node to
the child <label> node. The solution? Set the color property to be
inherited from the <div> node on the <label> node or set it to whatever
color you want. The first option is best suited if you are using a css
class the second if you only care about the color.


Code:
--------------------
//If you want the label to inherit the class from the css class
function flagLabel(fieldName){
$(document).ready(function() {
$("#" + fieldName +"_lbl").toggleClass("yourCSSClassName");
$("#" + fieldName +"_lbl").children().css("color","inherit");
});
}

--------------------



Code:
--------------------
//If you just want to set the label color for example to red
//Of course other color property syntaxes apply
function flagLabel(fieldName){
$(document).ready(function() {
$("#" + fieldName +"_lbl").children().css("color","red");
});
}

--------------------


The long and tiresomely descriptive version

I tried using the .removeClass() method and .css("color","red") with no
other result than the removal of all style from the label.

Before adding my own css style to the theme I tried using
..toggleClass("nv-formFieldLabelInvalid") which basically should yield
the result i wanted, turning the label red. That didn't work so i tried
the same with the .addClass() method after a .removeClass(). Same thing,
no result.

Then i decided to watch what was going on at the html level, so i added
an html field called "result" to the form and modified the code so it
wouldn't change anything.


Code:
--------------------
function flagLabel(fieldName){
$(document).ready(function() {
//$("#" + fieldName +"_lbl").removeClass();
//$("#" + fieldName +"_lbl").addClass("nv-formFieldLabelInvalid");
var label_html = $("#label_lbl").parent().html();
$("#_result").text(label_html);
});
}
--------------------


This was the result:


<div style="display: inline; " class="nv-formFieldLabel "
id="label_lbl"><label for="_label">label:</label></div>

The first thing i noticed is that the class is applied to a <div>
element and not the label itself which is a <label> element.

Then i tried uncommenting the lines above, obviously with no change on
the label, i got this.


<div style="display: inline; " class="nv-formFieldLabelInvalid"
id="label_lbl"><label for="_label">label:</label></div>

Then i thought "what if i apply the color directly to the <label>
element?" so i tried this:


Code:
--------------------
function flagLabel(fieldName){
$(document).ready(function() {
$("#" + fieldName +"_lbl").children().css("color","red");
var label_html = $("#label_lbl").parent().html();
$("#_result").text(label_html);
});
}
--------------------


The result was:


<div style="display: inline; " class="nv-formFieldLabel "
id="label_lbl"><label style="color: red;"
for="_label">label:</label></div>

And there is when i got the label to change colors.

So basically the class is being changed, even the color property is
being added to the <div> node. But the color property is not being
inherited to the label. One more test changing the "color" property to
be inherited from the parent <div> node.


Code:
--------------------
function flagLabel(fieldName){
$(document).ready(function() {
$("#" + fieldName +"_lbl").toggleClass("nv-formFieldLabelInvalid");
$("#" + fieldName +"_lbl").children().css("color","inherit");
var label_html = $("#label_lbl").parent().html();
$("#_result").text(label_html);
});
}
--------------------


The result: a color change as defined on the nv-formFieldLabelInvalid
class (red) and this html:


<div style="display: inline; " class="nv-formFieldLabel
nv-formFieldLabelInvalid" id="label_lbl"><label style="color: inherit;"
for="_label">label:</label></div>

And that's that.

wschreiber;251433 Wrote:
> Your color changes might be overriden by the class as defined in the
> IDM
> theme.
>
> Try the .removeClass() function to see if that has an effect, or better
> - add your new color to the theme and use your logic to switch between
> label classes.
>
> Wolfgang
>
> On 23.11.2014 22:52, EPedros wrote:
> >
> > Hello guys! I have myself a little issue i can't get around. I'm

> working
> > on a few workflows for a client, one of them is a modification flow.
> >
> > The client requested that when a value is modified in the form by the
> > requester said value's label should be flagged red to inform the
> > approver which fields were modified.
> >
> > Detecting the modification was easy, just comparing the IDV's values

> to
> > the fields onload would get the job done.
> >
> > Now comes the part where i need some help. Using this thread as a

> guide
> >

> (https://forums.netiq.com/showthread.php?15283-Approval-Form-Css-style)
> > I tried to change the color of a field's label to red using the

> jQuery
> > engine included with UA as an external script for the form
> > (/IDMProv/javascript/jQuery/scripts/jquery-1.4.2.min.js) and the
> > following function as an inline script:
> >
> >
> > Code:
> > --------------------
> > function flagLabel(fieldName){
> > $(document).ready(function() {
> > $("#" + fieldName +"_lbl").css({"color":"#FF0000"});
> > });
> > }
> > --------------------
> >
> >
> > Then in a test workflow i applied that function to a test field on

> the
> > onload event like this:
> >
> >
> > Code:
> > --------------------
> > //Inside the onload
> > flagLabel(field.getName());
> > --------------------
> >
> >
> > There was no change whatsoever. Just to make sure i wasn't mistyping
> > something i tried the exact function shown in the thread and changed

> the
> > field's name to "reason".
> >
> >
> > Code:
> > --------------------
> > $(document).ready(function() {
> > $("#reason_lbl").css({ "color":"#8B008B", "font-style":"italic",
> > "font-size":"large", "font-weight":"bold" });
> >
> > $("#_reason").css({ "color":"#FF0000", "border":"solid-style" });
> >
> > });
> > --------------------
> >
> >
> > After testing it i got a change on the label! But the change was on

> the
> > size (it got bigger) and inclination (it went italic) not on the

> color
> > (which should be some gradient of purple according to the description

> on
> > the thread). What did also change was the color of the field's font
> > (like when i typed into the field the text would be red).
> >
> > To make things weirder after removing the onload event from the field

> i
> > set the style on the "Label cell style" property inside Designer to
> > "color: #FF0000" and there were no changes either.
> >
> > What is the mistake I'm making? Am i missing a parameter on the .css
> > function? Do i need to set another property in Designer?
> >
> > These tests were performed in a "text" field of type "string". The UA
> > version is 4.0.2.
> >
> > Thanks in advance for any help you can provide 🙂
> >
> >



--
EPedros
------------------------------------------------------------------------
EPedros's Profile: https://forums.netiq.com/member.php?userid=5531
View this thread: https://forums.netiq.com/showthread.php?t=52277

0 Likes
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.