Thursday, March 3, 2016

Event aura:attribute type in lightning components

I was starting to write a lightning component to create an Event in Salesforce and ran into an issue which I will explain below, along with a resolution.

Here's an example where the aura:attribute type is the Task standard object. A user would enter the task Subject (In a real app, there would be other fields, this is for demo purposes only) and press the button which would invoke the handleClick in the controller.
<aura:component implements="force:appHostable">        
     <aura:attribute name="newTask" type="Task" default="{'sobjectType': 'Task', 'Subject': ''}"/>
    <ui:inputText aura:id="taskSubject" label="Task Subject" value="{!v.newTask.Subject}"/> 
    <ui:button label="Submit" press="{!c.handleClick}"/>             
</aura:component>

The javascript in the controller then retrieves the newTask attribute and displays the value in JSON format.
({
    handleClick : function(component, event, helper) {
        var t = component.get("v.newTask");
        alert('Task as JSON: ' + JSON.stringify(t) + ', Subject: ' + t.Subject);                                             
    }
})

As you can see, component.get retrieves the value of 'newTask' without any problem.



Here's another example where the aura:attribute type is the Event standard object. Again, a user would enter the task Subject and press the button to invoke the controller method.
<aura:component implements="force:appHostable">        
    <aura:attribute name="newEvent" type="Event" default="{'sobjectType': 'Event', 'Subject': ''}"/>
    <ui:inputtext aura:id="eventSubject" label="Event Subject" value="{!v.newEvent.Subject}"/>        
    <ui:button label="Submit" press="{!c.handleClick}"/>            
</aura:component>

({
    handleClick : function(component, event, helper) {        
        var e = component.get("v.newEvent");
        alert('Task as JSON: ' + JSON.stringify(e) + ', Subject: ' + e.Subject);        
    }
})

The result, however, is different. The newEvent value is blank in the JSON string and undefined when trying to access the 'Subject'.



One of the workarounds is to modify the aura:attribute type to a collection, namely an array of Events and access the first element of this array to get the attribute value.
<aura:component implements="force:appHostable">        
    <aura:attribute name="events" type="Event[]"/>          
    <ui:inputtext aura:id="eventSubject" label="Event Subject" value="{!v.events[0].Subject}"/>    
    <ui:button label="Submit" press="{!c.handleClick}"/>            
</aura:component>

({
    handleClick : function(component, event, helper) {        
        var events = component.get("v.events");             
        alert('Events as JSON: ' + JSON.stringify(events));  
    }
})



I am not sure what is different about the Event object. The attribute value gets passed to the controller without issues for other objects like Account and Task, but not for Event.

No comments :

Post a Comment