0

Scenario :

Retirving 4 product records including 3 fields.id, image(richtext field) and name.Displaying image in lightning carousal and also name as the header..Now I want to hold the product id , and pass it as param . Now i'm unable to hold the prod id value as lightning:carousal has no attribute neither aura:id , id or data-attriVal helping me to store the prod id value..Any workaround .. please find below code :

Component:

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<div class="slds-align_absolute-center" style="height: 5rem;">
    <div class="slds-size_1-of-2">
        <div class="slds-box slds-align_absolute-center" style="height: 5rem; position: absolute; width: 300px; height: 200px; z-index: 15; top: 50%; left: 50%; margin: -100px 0 0 -150px; border-color: rgb(255, 255, 255);" >
            <lightning:carousel >

                <aura:iteration items="{!v.productLst}" var="prod" indexVar="index">
                    <lightning:carouselImage  src = "{!prod.Product_Image__c}"  
                         value ="{!prod.Id}"   header = "{!prod.Name}"  href="javascript:void(0)" onclick="{!c.navigate}"   data-attriVal="{!prod.Id}">
                    </lightning:carouselImage> 


                </aura:iteration>
            </lightning:carousel>
        </div>
    </div>
</div>

Controller

({
  doInit : function(component, event, helper) { 
    var action = component.get("c.fetchprodRecId"); 
    action.setCallback(this, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var retrunRes = response.getReturnValue();
            var productRecId = component.set("v.prodRecTypeid",retrunRes);
            helper.fetchproducts(component,event,retrunRes);
        }
    });
    $A.enqueueAction(action); 
  },
navigate:function(component, event, helper) {
 var freqRow = event.currentTarget.getAttribute("data-attriVal");
 alert(freqRow);
        var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:test"
    });
    evt.fire();
  }
})

Your Answer

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

Browse other questions tagged or ask your own question.