function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jugbeer BholaJugbeer Bhola 

Lightning Component - Dynamic Url Buttons

Trying to build dynamic buttons in a lightning component. An array is loaded will labels and URL's. As I loop through the array I have gotten it to a point where the buttons show up. Now I need to have a URL in that button to launch.  None of the attributes I have tried will do it.  Any direction would be great.
Best Answer chosen by Jugbeer Bhola
Pankaj MehraPankaj Mehra
Hi Jugbeer,

add a onclick method to the button and attribute data-id on button, next thing is in js function (onlick event of button) in JS controller get the data-id attribute value , search this value in your list and get the URL and navigate to it.

something like this
  
</aura:iteration value={!v.list} var="data">
   <td><a href="{! '#/sObject/' + data.Id +'/view'}" data-id="{!data.Name}"  click="{!c.click}">
                    <p>{!data.Name}</p></a></td></aura:iteration>
                    
                    
                    click : function(component, event){
                        var selectedItem = event.currentTarget;
                        var Name = selectedItem.dataset.id;
                        console.log('data Name = '+ Name);
                    }



thanks

All Answers

Pankaj MehraPankaj Mehra
Hi Jugbeer,

add a onclick method to the button and attribute data-id on button, next thing is in js function (onlick event of button) in JS controller get the data-id attribute value , search this value in your list and get the URL and navigate to it.

something like this
  
</aura:iteration value={!v.list} var="data">
   <td><a href="{! '#/sObject/' + data.Id +'/view'}" data-id="{!data.Name}"  click="{!c.click}">
                    <p>{!data.Name}</p></a></td></aura:iteration>
                    
                    
                    click : function(component, event){
                        var selectedItem = event.currentTarget;
                        var Name = selectedItem.dataset.id;
                        console.log('data Name = '+ Name);
                    }



thanks
This was selected as the best answer
Jugbeer BholaJugbeer Bhola
Thank you so much for responding.  After trashing my code mutliple times trying to use lightning:button, ui:button and tag: 'button' the answer turned out to be in 'ui:outputUrl' 
<aura:component controller="AnyButtonActionLinks_CX">  
  
 
    <aura:handler event="c:AnyButtonActionLinksRequestEvt" action="{!c.handleRequest}" />
    <aura:handler event="c:AnyButtonActionLinksResponseEvt" action="{!c.handleResponse}" />
    
    <div class="slds">
        <div class="slds-align--absolute-center">
            {!v.body}
        </div>
        <!-- spinner for showing progress -->
        <div aura:id="spinner">
            <div class="slds-spinner--brand slds-spinner slds-spinner--medium" role="alert">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>        
    </div>
</aura:component>
({
    handleRequest : function(component, event, helper) {     
        var appEvt = $A.get("e.c:AnyButtonActionLinksResponseEvt");
        appEvt.fire();
    },
    
    handleResponse : function(component, event, helper){
        helper.buildButtons(component, event);
    },   
})
({
    buildButtons: function (component, event, helper) {
        this.showSpinner(component, event);
        var linkTableArray = event.getParam("LinkTable");
        var linkTableArrayElements =  linkTableArray.LTable;
        if(linkTableArrayElements != null){
            component.set("v.linkTable", linkTableArray); 
            component.set('v.body', []); // clear all buttons
            linkTableArrayElements.forEach(function (linkTableArrayElement) {
                $A.createComponent(                  
                    'ui:outputUrl',
                    {  
                        "value": linkTableArrayElement.LinkUrl,
                        "label" : linkTableArrayElement.Caption,
                        "target" : "_blank",
                        "class" : "slds-button slds-button--neutral"
                    },
                    
                    function (newbutton,status, errorMessage) {
                        if (status === "SUCCESS") {
                            var body = component.get("v.body");
                            body.push(newbutton);
                            component.set('v.body', body);
                        }
                        else if (status === "INCOMPLETE") {
                            console.log("No response from server or client is offline.")
                        }
                            else if (status === "ERROR") { 
                             console.log("Error: " + errorMessage);                        
                            }
                    })
            }); 
        }
        // hide spinner
        this.hideSpinner(component, event);
    },
    
     // show spinner
    showSpinner : function (component, event) {
        var spinner = component.find("spinner");
        $A.util.removeClass(spinner, "slds-hide");
        $A.util.addClass(spinner, "slds-show");
    },
    
    // hide spinner
    hideSpinner : function (component, event) {
        var spinner = component.find("spinner");
        $A.util.addClass(spinner, "slds-hide");
        $A.util.removeClass(spinner, "slds-show");
    },
})