3

I have lightning component and want to show a lightning card on mouseover on the link, is there any lightning event I can call to show to popup mobile card? this is my code:

===apex-Controller===

public with sharing class ContactController {

@AuraEnabled
public static List<Contact> getList() {
    return [SELECT id, name, phone FROM Contact LIMIT 50];
}

}

====Component===

<aura:component controller="ContactController">

<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<ul>
    <aura:iteration items="{!v.contacts}" var="contact">
        <li>
            <a  href="javascript:void(0)" data-contactId="{!contact.Id}" onclick="{!c.customRedirect}">{!contact.Name}</a>
        </li>
    </aura:iteration>
</ul>

({
doInit : function(component, event) {
    var action = component.get("c.getList");
    action.setCallback(this, function(a) {
        component.set("v.contacts", a.getReturnValue());
    });
    $A.enqueueAction(action);
},
customRedirect : function (component, event){

    var selectedItem = event.currentTarget;
    var selectedId = selectedItem.dataset.contactId;

    console.log("selected ID = "+selectedId);          

    var navEvt = $A.get("e.force:navigateToSObject");
    navEvt.setParams({

        "recordId": selectedId,

        "slideDevName": "detail"

    });

    navEvt.fire(); 

},
})
  • 1
    would you mind sharing a minimal code sample of your component and controller if any, so other can reproduce and assist? This will also allow others to see what you have attempted so far and better assist you. Thanks! – glls May 14 '17 at 16:59
  • 1
    @Faisal - You should not be coding URLs like that. They are subject to change and will potentially break your code int he future if done like that. You should be using URLFOR - see - trailhead.salesforce.com/en/modules/lex_dev_visualforce/units/… – Eric May 14 '17 at 17:49
  • @glls i have updated my code can you please check the code and let me know how can i show popup mobile card on mouse over – Faisal May 15 '17 at 13:18
  • @Eric i am using the lightning event can you please look into the code – Faisal May 15 '17 at 13:20
2

you can use popovers from slds.

Here's a rough sample from component where Contact Record is the hyperlinked text and anything within the section tag is the card, you can make it lightning:card or whatever. I used slds-popover for aesthetics:

<li>
        <a  href="javascript:void(0)" onmouseover="{!c.openPop}" onmouseout="{!c.closePop}">Contact Record</a></li>
        <section aura:id="pop" class="slds-popover slds-nubbin_top slds-hide" role="dialog" aria-labelledby="dialog-heading-id-1" aria-describedby="dialog-body-id-6">
            <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close slds-button_icon-inverse" title="Close dialog" onclick="{!c.closePop}">
                X
                <span class="slds-assistive-text">Close dialog</span>
            </button>
            <header class="slds-popover__header slds-p-vertical_medium">
                <h2 id="dialog-heading-id-1" class="slds-text-heading_medium">Your Card Header</h2>
            </header>
            <div class="slds-popover__body" id="dialog-body-id-6">
                <p>Your card body</p>
            </div>
            <footer class="slds-popover__footer">
            </footer>
        </section>

Here's the controller where we have the method that opens and closes the popover:

openPop : function(component, event, helper) {
    var cmpTarget = component.find('pop');
    $A.util.addClass(cmpTarget, 'slds-show');
    $A.util.removeClass(cmpTarget, 'slds-hide');

},

closePop : function(component, event, helper) {
    var cmpTarget = component.find('pop');
    $A.util.addClass(cmpTarget, 'slds-hide');
    $A.util.removeClass(cmpTarget, 'slds-show');

}

enter image description here

| improve this answer | |
  • Is it supposed to work without using overlayLib? because I am trying that and is not working... – Raphael D Feb 10 at 10:35

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.