3
        <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!!

  • are you running the component inside vf page? – Praveen Jul 18 '16 at 16:11
3

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.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.