7

I am using a jQuery Datatable inside one of my lightning components, and would like to call another lightning component on click of one of the fields in the Datatable. On click of the "edit" field inside the table, it should open a modal which is a lightning component that we already created. Is this possible through javascript?

Thanks!

6

There is an event named force:navigateToComponent. You can use this event for going to another component. It is currently in the Beta version in the Winter '17 release.

Example:

var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef: "c:componentName",
        componentAttributes: {
            // Attributes here.
        }
    });
evt.fire(); 

Source: https://resources.docs.salesforce.com/sfdc/pdf/lightning.pdf (Page number 411 in the document)

  • Great, this does call the component. The problem now is that the component called is a modal popup which we need to have in the same context. So on click of the edit button, it calls the modal component which is displayed over the current view. Is this possible? Thanks! – Angelo Oct 20 '16 at 16:17
0

navigateToComponent is a good option & latest option, however its in beta version.

Here is another option you can try.

Have the modal lightning component inside a div and hide it initially.

<div aura:id="modalDiv" class="slds-hide">
<c:ModalComponent/>
</div>

now onclick of the edit link of datatable, call a method of controller, say openModal.

openModal : function(component, event, helper)
{
var divId = component.find('modalDiv');
$A.util.toggleClass(divId, 'slds-hide');
}

This worked perfectly when navigateToComponent was not present in earlier releases.

  • Use .slds-hide instead. – André Dion Oct 20 '16 at 12:41
0

The force:navigateToComponent event enables you to navigate from one Lightning component to another, but starting in API version 43.0, the event is deprecated. Salesforce recommends implementing the lightning:isUrlAddressable interface on your target component and navigating to the component using lightning:navigation component with the standard__component page type instead.

For example, c:helloTarget displays a string that's passed in from another component:

<aura:component implements="lightning:isUrlAddressable" description="c:helloTarget component">
    <aura:attribute name="firstname" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    Hello {!v.firstname}.
</aura:component>

In c:helloTarget component's client-side controller, retrieve the attribute values from the page state.

({
    init: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var firstname = myPageRef.state.c__firstname;
        cmp.set("v.firstname", firstname);
    }
})

In the component that you want to trigger the navigation, include an instance of the lightning:navigation component. Then include the component to perform the jump to the other component. In this example, a lightning:button component is added to c:hello to trigger the navigation to the URL addressable component.

<aura:component description="c:hello component">
    <aura:attribute name="pageReference" type="Object"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="Navigate" onclick="{!c.handleClick}"/>
</aura:component>

Define your page reference for the component you’re navigating to. We recommend setting the page reference using an init handler. This example stores the pageReference in an attribute in the component, and is used to navigate later in the click handler.

({
    init : function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__helloTarget',
            },
            state: {
                "c__firstname": "John"
            }
        };
        component.set("v.pageReference", pageReference);
     },
     handleClick: function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = component.get("v.pageReference");
        event.preventDefault();
        navService.navigate(pageReference);
    }
})

Clicking the button in c:hello directs you to /lightning/cmp/c__helloTarget?c__firstname=John, and Hi John is displayed on the c:helloTarget page.

For more information go to 1 Aura Component Navigate To Component, 2 Aura Component Navigation and 3 Aura Component Is Url Addressable

Hope this help.

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.