2

I want to dynamically change the label of the following ui:inputText tag by changing the labelClass attribute.

 <ui:inputText aura:id="IdInputText" label="Label Of The Field" labelClass="Mandatory" value="{!v.onPageVariable}" keyup="{!c.getValues}" updateOn="keyup"/>

I have tried using

1. component.find("IdInputText").set("v.labelClass","BlueTag")
2. $A.util.removeClass(component.find("positionReportTo").get("v.labelClass"), 'Mandatory');
3. labelClass="{!v.isTest?'black':'red'}" 

But none of these approaches are working.

I'll just have to re-render the page or the snippet.

Any clues/Idea's doing it through javascript rather than creating another html/lightning tag or re-rendering for the label.

  • 1
    Have you tried using an expression? Like labelClass="{!mycondition ? 'Mandatory' : ''}" – Renato Oliveira May 20 '17 at 13:19
  • Yeah but this also is not working – david raj May 20 '17 at 13:27
  • 1
    you should update your question with a minimal code sample of your controller and component. – glls May 20 '17 at 16:08
1

David, Out of the three approaches that you have tried only your third approach would work with ui:inputText, Also the $A.util methods such as toggleClass or removeClass will not be of much help here as they deal with the class of the element in this case its the class of the input box itself.

Short Answer for this behavior is LOCKER SERVICE & SALESFORCE AUTHORED COMPONENTS.

App / Component :

<aura:application access="global" extends="force:slds">

    <aura:attribute name="myString" type="String" />
    <aura:attribute name="isTest" type="Boolean" default="false"/>

    <ui:inputText aura:id="myinput" label="What are you thinking about ? " labelClass="{!v.isTest == true ?'blue':'red'}" value="{!v.myString}" blur="{!c.changeColor}"/>

</aura:application>

Style.css

.THIS .red {
    color : red;
}

.THIS .blue {
    color : blue;
}

This would set your label to be blue or red based on isTest Boolean value. But changing the isTest attribute inside your javascript controller and helper will not change the class. Because the class assigned to the labeClass attribute is a CONSTANT.

The ui:namespace components such as ui:inputText are salesforce authored components, it will have read access but you cannot dynamically change the attribute unless specified otherwise. For example value attribute in the ui:inputText will be a part of aura: digestCycle and any value change will get reflected, but the attribute labelClass is not listened for.

Controller.js :

changeColor : function(component,event,helper){
        component.set("v.isTest",true); 
        console.log(component.find("myinput").get("v.labelClass")); 
        component.find("myinput").set("v.labelClass","red"); 
        component.find("myinput").set("v.value","Hello World"); 
}

Take the above controller for example, it handles the onblur event from the ui:inputText.

component.set("v.isTest",true); will not set the class from red to blue when you set it to true. Because the aura framework does not have the dynamic binding between the v.labelClass and the v.isTest, as the labelClass is a constant.

console.log(component.find("myinput").get("v.labelClass")); you will be able to read the value, just not modify it.

component.find("myinput").set("v.labelClass","red"); again this will not work as the labelClass is a constant. Infact this will throw you a warning.

And finally, component.find("myinput").set("v.value","Hello World"); this will work as value attribute is a part of those attributes which can be dynamically modified.

Output when click out of the inputBox

LabelChange

Alternative Solution :

Probably using this HTML markup as a dynamic lightning component and pass attributes such as class, labelClass etc. Short Version : Build your own input Component with your custom namespace. It will over-come these restrictions enforced by LOCKER and allow granular control over label Class. Atleast this way its reusable. Or you could go with the re-render method as you suggested.

| improve this answer | |
0

You may want to try using a combination of the following things:

  1. Strategically add these SLDS CSS Classes:

    • .slds-show
    • .slds-hide
    • .slds-hidden
    • .slds-visible
  2. Incorporate these $A JS Utilities:

    • $A.util.addClass(el.className)
    • $A.util.removeClass(el.className)
    • $A.util.toggleClass(el.className)

These SLDS classes when used with the $A utility classes should allow you to add, remove and toggle pretty much any CSS class you want, provided you nest your code and other Custom CSS properly within DIVs containing the above SLDS classes (or vice-versa). It's often a matter of choosing the right strategy. You may need to make one invisible while also revealing or toggling the other.

Create functions similar to below:

clickMe : function(component, event, helper) {
    el = component.find('IdInputText');
    $A.util.toggleClass(el,'slds-hide');
}

You can build these up into larger functions (creating them as helpers is a good practice) to get the ultimate effect you want by combining several helper functions.

| improve this answer | |
  • Yeah i get these but these aren't working for the labelclass attribute these are working just for the class attribute – david raj May 20 '17 at 19:10
  • Since I see mention of 'mandatory', if you're trying to change whether the text is required, that's a true or false attribute on the required tag which has a requiredIndicatorClass to use for related CSS. The label class wouldn't be a reflection of that change. Also, labelClass is a child of the ui:inputText element which you've located using the id='IdInputText'. You won't be changing whether the field is required by changing the labelclass alone. Also, I believe the labelclass should be a subclass of your element's SLDS class. – crmprogdev May 20 '17 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.