+ Start a Discussion
nickwick76nickwick76 

Missing Aura and UI components?

Hi,
I was playing around with Lightning components and created an input field which on the onchange event through the client contoller and helper calls the server controller to get a list of accounts which are returned to the helper via the callback function and then set to an attribute in the component page. I am printing these in the controller using the aura:iteration tag. For each of the accounts I am displaying I want to link them to open the account page layout in Salesforce1.

Is there an aura ui component for this? I solved it by using the below syntax, but it doesn't seem right. And although it works I don't get a back arrow to go back to the list which you can see if you are looking at an account record that you have navigated to from the 'All Accounts' list for example,
<aura:iteration items="{!v.accs}" var="a">
    <a href="{!'/one/one.app#/sObject/' + a.Id + '/view?t=1414009941155'}">{!a.Name}</a>
</aura:iteration>
Currently I am using this aura reference (https://eu3.lightning.force.com/auradocs/reference.app#) but it is not very extensive.
So is this coming later or am I missing something that I should be aware of?

Thanks / Niklas
 
Best Answer chosen by nickwick76
SkipSaulsSkipSauls
Hi Niklas,

Safe Harbor - The event described below is not public in the Winter '15 release, but is expected to be in Spring '15. Many of these will be similar to the sforce.one events available in Visualforce.

Rather than using the URL, use an event ot navigate to the record home. A simple version of your component markup might look like this:

<aura:component implements="force:appHostable" controller="aotp1.AccountListController">
    <aura:attribute name="accs" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
    <ul>
        <aura:iteration items="{!v.accs}" var="a">
            <li><a href="javascript:void(0)" data-id="{!a.Id}" onclick="{!c.selectAccount}">{!a.Name}</a></li>
        </aura:iteration>
    </ul>    
</aura:component>

The client-side JavaScript controller looks like this:

({
    doInit: function(component, evt, helper) {
           var action = component.get("c.getAccounts");
        action.setCallback(this, function(a) {
            component.set("v.accs", a.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    
      selectAccount: function(component, event, helper) {
        var id = event.target.getAttribute("data-id");
        var evt = $A.get("e.force:navigateToSObject");
        evt.setParams({recordId: id});
        evt.fire();
    }
})

Try this out and you'll see that you get the back arrow as expected. Hopefully the sample is easy to follow, but if not, let me know.

Thanks,

Skip
 

All Answers

SkipSaulsSkipSauls
Hi Niklas,

Safe Harbor - The event described below is not public in the Winter '15 release, but is expected to be in Spring '15. Many of these will be similar to the sforce.one events available in Visualforce.

Rather than using the URL, use an event ot navigate to the record home. A simple version of your component markup might look like this:

<aura:component implements="force:appHostable" controller="aotp1.AccountListController">
    <aura:attribute name="accs" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
    <ul>
        <aura:iteration items="{!v.accs}" var="a">
            <li><a href="javascript:void(0)" data-id="{!a.Id}" onclick="{!c.selectAccount}">{!a.Name}</a></li>
        </aura:iteration>
    </ul>    
</aura:component>

The client-side JavaScript controller looks like this:

({
    doInit: function(component, evt, helper) {
           var action = component.get("c.getAccounts");
        action.setCallback(this, function(a) {
            component.set("v.accs", a.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    
      selectAccount: function(component, event, helper) {
        var id = event.target.getAttribute("data-id");
        var evt = $A.get("e.force:navigateToSObject");
        evt.setParams({recordId: id});
        evt.fire();
    }
})

Try this out and you'll see that you get the back arrow as expected. Hopefully the sample is easy to follow, but if not, let me know.

Thanks,

Skip
 
This was selected as the best answer
nickwick76nickwick76
Thank you Skip,
Good explanation and it works great!
// Niklas