Breadcrumbs using Component Event in Lightning Component

Hi All,

In this post I will tell you how to use Breadcrumbs using Component Event.

A component event is fired from an instance of a component. A component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the bubbled event.

This can be useful when trying to breabcrumbs in component and We’ll see how to attribute is used for firing and handling events by using <aura:registerEvent>. Register Component Event is registers that it may fire an event by using in its markup.

When complete it will look like these screenshots:


Let’s walk through code.

BreadcrumbContainer.cmp :

<aura:component implements="force:appHostable">
    <aura:attribute name="FixedBreadcrumbs" type="String[]" default="Home,Bread,End"/>
    <aura:attribute name="Breadcrumbs" type="String[]" default="Home"/>
    <aura:attribute name="itemName" type="String" default="Home"/>
<div class="breadcrumb">
        <aura:iteration items="{!v.Breadcrumbs}" var="menu" indexVar="i">
            <c:BreadcrumbContent index="{!i}" menu="{!menu}" cmpEvent="{!c.setNavigationEvent}"/>
        </aura:iteration></div>
<div class="container">
<div>
        	This is <b>{!v.itemName}</b>  Breadcrumbs</div>
<aura:if isTrue="{!v.FixedBreadcrumbs.length > v.Breadcrumbs.length}">

<ui:Button label="Next" press="{!c.next}" />
        </aura:if></div>
</aura:component>

BreadcrumbContainerController.js

({
	setNavigationEvent : function(component, event, helper){

        var index = event.getParam("navIndexEvent");
        var navbNew = [];
        var navb = component.get("v.FixedBreadcrumbs");
        for(i=0; i<=index; i++){
            navbNew.push(navb[i]);
        }
        component.set("v.itemName",navb[index]);
        component.set("v.Breadcrumbs",navbNew);
	},
    next : function(component, event, helper){
        var navb = component.get("v.FixedBreadcrumbs");
        var navbNew = component.get("v.Breadcrumbs");
        var len = navbNew.length;
        navbNew.push(navb[len]);
        component.set("v.itemName",navb[len]);
        component.set("v.Breadcrumbs",navbNew);
    }
})

BreadcrumbContainer.css

.THIS.breadcrumb {
    padding: 20px;
    background-color: antiquewhite;
    margin: 13px;
    border-radius: 5px;
    font-size:20px;
}

.THIS.container {
    text-align: center;
    font-size: 22px;
    margin: 15px;
    padding: 20px;
    background-color: peru;
    border-radius: 5px;
}

BreadcrumbContainer is component parent component of BreadcrumbContent.

BreadcrumbContent.cmp

<aura:component >
	<aura:registerEvent name="cmpEvent" type="c:CmpEvent"/>
	<aura:attribute name="menu" type="String" />
    <aura:attribute name="index" type="integer" />
    <a onclick="{!c.setNavigation}">{!v.menu}</a> ❱
</aura:component>

BreadcrumbContentController.js

({
	setNavigation : function(component, event, helper) {
        var cmpEvent = component.getEvent("cmpEvent");
        var index = component.get("v.index");

        cmpEvent.setParams({"navIndexEvent" : index});
        cmpEvent.fire();
    },
})

In this component i am using <aura:registerEvent>.

CmpEvent.evt

<aura:event type="COMPONENT" description="Event for set Index No." >
    <aura:attribute name="navIndexEvent" type="integer" default=""/>
</aura:event>

This is a Event with the type of COMPONENT.

Thanks

Advertisements

2 thoughts on “Breadcrumbs using Component Event in Lightning Component

  1. Pingback: Breadcrumbs using Component Event in Lightning Component | SutoCom Solutions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s