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
Steven P. SchramSteven P. Schram 

What is the proper way to link to a Lightning App from a record detail page?

I have created a Lightning App that takes a record ID and presents information in a format suitable for printing. Well, better than the standard Lightning Experience detail page, at least. To open this app, I created a Custom Button with the following URL: 
/c/MyApp.app#{!Custom_Object__c.Id}
It works, but presents the following message before loading the app:
"We'd like to open the Salesforce page https://domain.lightning.force.com... in a new tab. Because of your browser settings, we need your permission first."
User-added image

This doesn't make sense since it's not an external site. How can I avoid this interruption?
Ashif KhanAshif Khan
Hi Steven
Create a visualforce page add your app to it 

on custom URL button set URL as

/apex/YourVFPage?parameterName ={!Custom_Object__c .Id}


YourVFPage.vfp 
<apex:page sidebar="false" showHeader="true">
 <apex:includeLightning />
    <div  id="DataContainer" />
 <script>
 $Lightning.use("c:YourApp", function() {
 $Lightning.createComponent("c:YourComponent",
 { 
 parameterName: "{!$CurrentPage.parameters.parameterName}"// you need to create a attribute in component where you will get it
 },
 "DataContainer",
 function(cmp) {
 });
 });
 </script>
</apex:page>


YourApp .app 
<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="c:YourComponent" />
</aura:application>
I hope this will help you
Regards
Ashif
 
Steven P. SchramSteven P. Schram
Thanks, Ashif. Unfortunately, I am struggling to get it working.

My button URL: 
/apex/account_summary?recordId={!BP_Involvement__c.Id}

My VF page: 
<apex:page sidebar="false" showHeader="false">
 <apex:includeLightning />
 <div id="DataContainer" />
 <script>
    $Lightning.use("c:StudentStatement", function() {
        $Lightning.createComponent("c:StudentStatement",
            { 
             recordId: "{!$CurrentPage.parameters.recordId}"
            },
            "DataContainer",
            function(cmp) {
            });
     });
 </script>
</apex:page>

My App, StudentStatement.app: 
<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:attribute name="recordId" type="Id" />
  <aura:dependency resource="c:involvementAccountReport" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  
  <c:involvementAccountReport recordId="{!v.recordId}"/>
</aura:application>

My Component, involvementAccountReport.cmp: 
<aura:component controller="PaymentController" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName">
  
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

  <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="{!v.sObjectName}">
...
            <lightning:outputField fieldName="Deposit__c" />
...

It loads a blank page with LEX header (showHeader="false" is ignored! This is a problem too.) I have added {!v.recordId} to the component and app markup, but nothing is displayed. Adding it to the VF page shows the correct Id, however. I also added console.debug statements to the init handlers for the app and the component, and those are executed -- twice. 
involvementAccountReport.js:17 cmp doInit recordId= null
involvementAccountReport.js:17 cmp doInit recordId= a0Tg0000004ISwB
StudentStatement.js:17 app doInit recordId= a0Tg0000004ISwB
StudentStatement.js:17 app doInit recordId= null
Very strange. Do you see what I did wrong?


 
Ashif KhanAshif Khan
Hey Steven

VF page: 
<apex:page sidebar="false" showHeader="false">
 <apex:includeLightning />
 <div id="DataContainer" />
 <script>
    $Lightning.use("c:StudentStatement", function() {
//add c:involvementAccountReport here below
        $Lightning.createComponent("c:involvementAccountReport",
            { 
             recordId: "{!$CurrentPage.parameters.recordId}"
            },
            "DataContainer",
            function(cmp) {
            });
     });
 </script>
</apex:page>

StudentStatement.app:
  
<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="c:involvementAccountReport" />
</aura:application>

c:involvementAccountReport
  
<aura:component controller="PaymentController" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName">
 <aura:attribute name="recordId" type="Id" />
<!-- You need to add attribute here & also call aura:handler here  -->
</aura:component >

I hope this will help you

regards
Ashif
Steven P. SchramSteven P. Schram
Sorry for the long delay. I didn't get this to work, and then got pulled off to other tasks. Two problems remain, using the VF method: (1) The header remains as I mentioned before: showHeader=false is ignored. (2) The print rendering in both Chrome and Firefox only includes the content as shown in the browser window. Anything that is scolled off of the screen does not get printed. It's hard for me to understand why this would be the case. I'm going to continue troubleshooting, and will probably use my original Lightning App version and not the VF version as you suggest. The annoying popup message is better than an unusable page.