0

I am trying to show Lightning component on VF page. I am basically showing custom object list view along with a pop up box in my lightning component. When i am trying to refer the same component on VF page the Pop up and list view are rendering same as in Lightning but when i am trying to click on record ( h ref value is showing void (0)). Can anyone help me with the VF page $Lightning.createComponent method construction. My component and vf page are as shown below

Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,lightning:actionOverride" access="global" >

    <aura:attribute name="recordId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.openModal}"/>

    <lightning:listView aura:id="listViewcps"
    objectApiName="ABC"
    listName="All"
    rows="80"
    showSearchBar="true"
    showActionBar="true"
    enableInlineEdit="true"
    showRowLevelActions="true"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <div class="slds-m-around_xx-large">

     <aura:if isTrue="{!v.isOpen}">
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
               <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                       <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">CP MODAL DIALOG</h2>
</header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b> 
                              TEST alert content

                            </b>
                        </p>
                    </div>


                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral" 
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand" 
                                          label="Like and Close"
                                          title="Like and Close"
                                          onclick="{! c.likenClose }"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>


        </aura:if>
    </div>
</aura:component>

JS controller:

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

       var recordId = component.get("v.recordId").Id;
       debugger;
       sforce.one.navigateToSObject(component.get("v.recordId").Id);
       console.log('record id is '+recordId);
    },


    openModal: function(component, event, helper) {
      component.set("v.isOpen", true);
   },

   closeModel: function(component, event, helper) {

      component.set("v.isOpen", false);
   },

   likenClose: function(component, event, helper) {


      component.set("v.isOpen", false);
   },
})

VF page:

<apex:page showHeader="True" sidebar="false">

<div id="lightning"/>
<apex:includeLightning />
<script>
       var recordId= "https://login.salesforce.com/a00/o";

//Need help with this        
$Lightning.use("c:Cpligapp", function() {
          $Lightning.createComponent("c:CPlistview",

              {  }

           ,
          "lightning",
          function(cmp) {


          });
        });
    </script>

</apex:page>

enter image description here

  • @Pranay Jaiswal Thank you for making edits. Any suggestion? – sravan Feb 25 at 16:26
  • What is your specific issue? You will want to use create component depending on how you want to construct. – Jayant Das Feb 25 at 17:01
  • @Jayant Das My requirement is simple. I need to show custom pop up box on click of a Tab. In LEX i was able to do it using Listview component, what i am trying to do with this VF page is to show that Lightning component in classic version of salesforce but as SFDCFOX mentioned below looks like i cannot do that as it is currently being worked on salesforce end. Do you have any other suggestions? – sravan Feb 25 at 18:04
1

As stated in the documentation:

Links outside of Lightning Experience and Communities appear as hyperlinks but don't navigate to the link target. This is a known limitation that will be addressed in a future release.

If you need this functionality right now, you'd have to build your own custom component instead of using lightning:listView.

  • makes sense. Thank you very much for pointing that. Do you think using VF page and Apex controller to show modal popup in classic is the best way to approach this ? – sravan Feb 25 at 18:05
  • @sravan You could use apex:enhancedList, or build your own and simply style it using apex:slds. There's at least a few alternatives available. – sfdcfox Feb 25 at 19:13
  • I have to show popup window too on click of Tab. Is there any way that i can only render pop up part of my lightning component in classic and can still use apex:enhancedlist on page ? – sravan Feb 25 at 21:07
  • @sravan You would have to create a custom component for now, rather than using the standard list view, or maintain two separate versions of the code. – sfdcfox Feb 25 at 21:24
  • sounds good i will develop code for modal window in classic using apex and VF page and use enhancedlist view to show the view on page. Thank you for your help. – sravan Feb 25 at 22:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.