ui:outputURL tag is not working as expecting

Question

        <table id="contactsTableId" class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
                <tr>
                    <aura:iteration items="{!v.fieldNames}" var="fieldName">
                        <th scope="col"><span class="slds-truncate">{!fieldName}</span></th>
                    </aura:iteration>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.paAlertList}" var="alert">                   
                    <tr>     
                        **<td><ui:outputURL value="{!alert.Id}" label="{!alert.Name}" 
                                           aura:id="detailContURL" target="_new"/></td>**                              
                        <td><ui:outputText value="{!alert.AccountId}" /></td> 
                        <td><ui:outputText value="{!alert.Name}" /></td> 
                    </tr>
                </aura:iteration>
            </tbody>  
        </table>

I am trying to use ui:outputURL aura component, but It redirects to wrong url:
** https://varkala-dev-ed--c.na15.visual.force.com/apex/003i000000FkAThAAN ** Basically it is appending the apex in the url. I end up using click="{!c.redirectToDetail}".

redirectToDetail : function(component, event, helper) {        
        var alertId =  event.getSource().get("v.value");
        var _url=window.location.href;
        if(_url!=''){
            _url= _url.substring(0,_url.indexOf("/apex"));
        }
        window.open(_url+"/"+alertId);
    }

It works fine in Chrome, but it is opening in 2 tabs in IE,firefox,where one tab opens with correct url and other with wrong url(appending apex).

To fix the above issue, I worked around and made few changes as follow:

<td><ui:outputURL value="#" label="{!alert.Name}" click="{!c.redirectToDetail}" aura:id="detailContURL" class="{!alert.Id}"/></td>
//Client side controller action
     redirectToDetail : function(component, event, helper) {        
            var alertId =  event.getSource().get("v.class");
            var _url=window.location.href;
            if(_url!=''){
                _url= _url.substring(0,_url.indexOf("/apex"));//alert(alertId);
            }
            window.open(_url+"/"+alertId);                
            return true;
        }

I know its not the ideal way of doing it. Can anyone please help me out on this. Also please let me know is this aura component bug. Or I am missing some thing? I really appreciate for you help. Thanks!!

Answer 1

Looks like you are running the component in a vf page.

The problem is, the value attribute of <ui:outputURL /> points to an incorrect relative url. Click here to know more about the significance of adding / in href (becoz <ui:outputURL/> generates anchor tag <a />), which changes the relative url.

So, all you have to do is, add / before the id:

<ui:outputURL value="{!'/'+alert.Id}" label="{!alert.Name}" aura:id="detailContURL" target="_new"/>.

I believe this will solve your issue, and those workarounds might not be needed at all.