2

A similar question has been asked here

Binding behaviour on lightning components with ui:inputText/Checkbox components

I have 2 attributes of

1) Type = Wrapper class

2) Type = Sobject

My final Intent is to build a component that can support multi-editing any sobject data in the org.

In my init function I populate the value for the sobject and pass it to the wrapper class variable. I then take the wrapper class variable and bind it to the name attribute to the inputtext component. All this works fine

When the user updates the input field I want to control 2 things

1) I want to maintain the user entry value (the value on change resets back to the value from the wrapper class name variable)

2) On updating the input text, instead of the Name variable getting updated a new variable called Name gets created.

In short: How do I bind a wrapper class variable and maintain the text in the input field and pass the same to an input field?

Original value from the controller:

enter image description here

2 Name attributes for the wrapper object:

enter image description here

Component:

<aura:component  access="global" controller="sobjectcontroller">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="sobj" type="Sobject" default="{'sobjectType': 'Sobject'}"  access="global"/>
    <aura:attribute name="sobjectvariable" type="sobjectwrapperclass[]"/>

    <aura:iteration items="{!v.sobjectvariable}" var="sobje">
         <ui:inputtext value="{!sobje.sobj.Name}" updateOn="change" change="{!c.updateUIValue}"/>
    </aura:iteration>
</aura:component>

Controller:

({
    doInit : function(component) {
        var action = component.get("c.getsobjectdata");
        var sob = component.get("v.sobj");
        //I have hardcoded Account here for simplifying this example, but I have a separate code that will describe all the sobjects in the org and pass it back through a server side controller.
        sob.sobjectType = 'Account';
        action.setParams({
            sobjectName  :  JSON.stringify(sob)
        });
        action.setCallback(this, function(response){
            var state  = response.getState();
            if(state == 'SUCCESS'){
                component.set("v.sobjectvariable",response.getReturnValue());
            }
            console.log(response.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    updateUIValue : function(component, evt) {
        console.log(component.get("v.sobjectvariable"));
    }
})

Server side controller:

public class sobjectcontroller {
Public Static List<SObject> existingRecordList = new List<SObject>();
Public Static List<sobjectWrapperclass> sList = new List<sobjectWrapperclass>();

@AuraEnabled
    public static List<sobjectWrapperclass> getsobjectdata(String sobjectName) {
        sobjectWrapperclass sobjval = (sobjectWrapperclass) JSON.deserialize(sobjectName, sobjectWrapperclass.class);
        String queryString = 'select id,name from '+sobjval.sobjectType +' limit 1';
        existingRecordList = Database.query(queryString);
        for(sobject s: existingRecordList){
            sList.add(new sobjectWrapperclass(s));
        }
        return sList;
    }
}

Wrapper class :

public class sobjectwrapperclass {
    @AuraEnabled
    public SObject sobj{get;set;}
    @AuraEnabled
    public String sobjectType;

    public sobjectwrapperclass(sobject so){
        sobj = so;
    }  
}
  • Just out of curiosity, why the wrapper? – sfdcfox Mar 27 '17 at 20:25
  • @sfdcfox I have a checkbox field column that I will use to get the selected records value to implement multi delete. I was trying to implement the same VF logic that is used for deleting/ editing multiple records in lightning by just creating component instead of VF page. There is something about the inputfield behavior that I do not understand in lightning. In a VF page the inputfield maintains the user entry on change, here in lighting the inputfield retains/ updates the value even after change – Rao Mar 27 '17 at 20:34
  • Without the wrapper class, I can get the code working like a charm and there are no duplicate Name variables and the sobject maintains the structure as expected. I may have to go some other route to get the selected value instead of using the wrapper class approach. – Rao Mar 27 '17 at 20:45
  • 2
    Yeah, I wrote a similar type of app, but I skipped the wrapper, it never occurred to me. Wrappers are more of a VF construct to work around the limitations of the platform, and aren't really relevant in Lightning; in the few cases where it would make sense, you can usually alter your data client-side instead. – sfdcfox Mar 27 '17 at 20:47
  • For other looking in the same context, I ended up following this blog to avoid wrapper class : sfdcmonkey.com/2017/02/23/… Easy way is to assign a ID and assign the Id of the record to modify as text to the checkbox component and pass the same in the server side controller. – Rao Mar 27 '17 at 21:11

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.