function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
golugolu 

opening lightning component inside vf page as a modal

Hi,

I want to open my lightning component which is inside a visualforce page as a modal. How can i do it?
reason : i want o display my lightning component in the list view quick action button but it is not possible. So i used vf page to display the component. But my requirement is opening this visualforce page as a model.

Code for the visualforce page: 
<apex:page sidebar="false" standardController="Contact"  recordSetVar="selectedObjects" extensions="test" showHeader="false"  standardStylesheets="True" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" cache="false" expires="0">
   <apex:includeLightning />
    
   <div id="lightning" />
    
   <script>
        $Lightning.use("c:TestComponent", function() {
            $Lightning.createComponent(
                "TestComponent",
                {recordId : "{!selected}",
                 objName  : "{!objName}"},
                "lightning",
                function(cmp) {
                    
                });
            });
   </script>
    
</apex:page>

 
Ajay K DubediAjay K Dubedi
Hi Golu,
You have to also include the name of lightning app name insted of TestApp i.e. written below. Create a lightning app and then include it as included in the below code. 
<apex:page sidebar="false" standardController="Contact" recordSetVar="selectedObjects"  extensions="test" showHeader="false"   standardStylesheets="True" applyHtmlTag="false"  applyBodyTag="false" docType="html-5.0" cache="false" expires="0">
 <head>
         <apex:includeLightning />
  </head>
  <body>
   <div id="lightning">
   </div>
    <script>
       $Lightning.use("c:TestApp", function () {
           $Lightning.createComponent(
               "c:TestComponent",
               {recordId : "{!selected}",
                   objName  : "{!objName}"},
                  "lightning",
                   function(cmp) {
                  });
              });
     </script>
    </body>
</apex:page>


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
Deepali KulshresthaDeepali Kulshrestha
Hi,
Just to clarify have you made an app? If not not then please refer to the followong code:
TestComponentApp
<aura:application extends="ltng:outApp"  access="GLOBAL" >

</aura:application>

Please modify your code as follows:
<apex:page sidebar="false" standardController="Contact"  recordSetVar="selectedObjects" extensions="test" showHeader="false"  standardStylesheets="True" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" cache="false" expires="0">
   <apex:includeLightning />
    
   <div id="lightning" />
    
   <script>
        $Lightning.use("c:TestComponentApp", function() {
            $Lightning.createComponent(
                "c:TestComponent",
                {recordId : "{!selected}",
                 objName  : "{!objName}"},
                "lightning",
                function(cmp) {
                    
                });
            });
   </script>
    
</apex:page>

Please refer to the following link as it may help you to solve your problem:
https://developer.salesforce.com/forums/?id=9060G0000005mFFQAY

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha