1

I'm trying to create a simple section on a lightning component which will show either a force:inputfield or a force:outputfield depending on the "mode" attribute of the component. If the mode attribute is set to "edit", it will display the inputfield, Otherwise, the Outputfield will show.

In the example below, the default mode has been set to edit, but I've tried it with view, too.

Component:

<aura:attribute name="Outcome" access="public" type="Service_Usage_Outcome__c" Description="The Service Usage Outcome whose details need showing" default="{'sobjectType': 'Service_Usage_Outcome__c'}"/>
<aura:attribute name="mode" access="public" type="string" default="edit" Description="Define whether the component should be in edit (true) or view (false) mode" />
<lightning:button label="Change Mode" onclick="{!c.changeMode}"/>

<force:inputField value="{!v.Outcome.Person_Identified_Outcome__c}" class="{!(v.mode == 'edit') ? 'slds-show' : 'slds-hide'}"/>
<force:outputField value="{!v.Outcome.Person_Identified_Outcome__c}" class="{!(v.mode == 'view') ? 'slds-show' : 'slds-hide'}"/>

Controller

changeMode: function(component, event, helper) {
    var mode = component.get("v.mode");

    if(mode == 'view'){
        component.set("v.mode", "edit");
    } else {
        component.set("v.mode", "view");
    }
}

The controller method "changeMode" will toggle between modes when the button on the component is clicked. I would expect the CSS classes applied to the input and output fields to toggle back and forth, so only one of the two is shown at a time.

When the component is first loaded, the correct field is displayed to the user and the other has the "slds-hide" class applied (it can be found in the DOM). This is as expected.

However, when the user starts toggling between modes, something odd happens.

  • The field that was initially visible will toggle between CSS classes. As expected.
  • the field that was not initially visible seems to be stuck on "slds-hide" and the class never changes.

Has anybody else come across this? Does anybody know why the class would be updated on the visible component, but never on the component which is initially hidden?

Andy

  • Sorry I don't understand, you said that the inputfield or outputfield will always be correctly displayed, but the other field never appears. There is no other field in your code sample. Did i miss something ? – Fabien Taillon Oct 24 '16 at 15:47
  • Sorry for not being clearer - Either the inputfield OR the outputfield will be displayed to start with. When the mode is changed, whichever one was showing should hide and the other should appear. The user should be able to toggle back and forth. – Bigears Oct 24 '16 at 16:05
  • @FabienTaillon - I've updated the original question to hopefully make it clearer. – Bigears Oct 26 '16 at 11:55
  • I don't have the issue. As I don't have your custom object I replaced it by Opportunity, but otherwise my code is the same and it works. Can you try it ? – Fabien Taillon Oct 26 '16 at 16:19
  • <aura:attribute name="Opp" access="public" type="Opportunity" description="dsdqs" default="{'sobjectType': 'Opportunity'}"/> <aura:attribute name="mode" access="public" type="string" default="edit" Description="Define whether the component should be in edit (true) or view (false) mode" /> <lightning:button label="Change Mode" onclick="{!c.changeMode}"/> <force:inputField value="{!v.Opp.Name}" class="{!(v.mode == 'edit') ? 'slds-show' : 'slds-hide'}"/> <force:outputField value="{!v.Opp.Name}" class="{!(v.mode == 'view') ? 'slds-show' : 'slds-hide'}"/> – Fabien Taillon Oct 26 '16 at 16:19

Your Answer

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

Browse other questions tagged or ask your own question.