+ Start a Discussion
Ajay LAjay L 

Lightning Out VF page button on Related List


I am trying to create custom Related List button using Lightning Out VF page. The component loads fine however, when I click on the button it is opening in a new tab, Is there a way I can show it on the same page in a MODEL?User-added image
 
<!-- Load Lightning dependencies -->
<apex:includeLightning />

<div class="slds">
    <!-- Target div for the Lightning component -->
    <div id="customObjectEdit"></div>
</div>

<script>
var recordId = '{!lId}';

$Lightning.use("c:createLtgOutApp", function() {
    var attributes = {
        recordId: recordId
    };

    var targetElementId = 'customObjectEdit';

    $Lightning.createComponent('c:createLtgOut', attributes, targetElementId,
                               function(cmp) {
                                   // At this point the component has been created and loaded
                               });
});
</script>

 
Veena Sundara-HeraguVeena Sundara-Heragu
I have done something somewhat similar.  I have made the lightning component as a modal. The visualforce page does open in a new page, but appears as modal.  Then when the user clicks Save on the Lightning Component, I redirect the user back to the calling page.


So, my ligtning component is a modal by enclosing its content in a modal div like this :

<div class="slds-modal slds-fade-in-open slds-modal--large" aria-hidden="false" role="dialog">
          <div class="slds-modal__container">
.....
.....

Then when Save is clicked on the lightning component, it fires an application event

       $A.get("e.c:EvtAppLexComponentExit").fire();

This event can be captured in the enclosing visual force page and you can redirect back to the original record 

    <script>
        $Lightning.use("c:AppEditContractRates", function() {
            $Lightning.createComponent(
                "c:CmpEditContractRates",
                {"recordId": "{!$CurrentPage.parameters.Id}"},
                'contractRates',
                function(cmp) {
                    $A.eventService.addHandler({ "event": "c:EvtAppLexComponentExit", "handler" : lexCompClose});
                });
            });

        function lexCompClose(event)
        {
            var loc = '/' + "{!$CurrentPage.parameters.Id}";
            window.location.href = loc;
        }
    </script>

Hope this helps