[SalesForce] VF Page Migration To Lightning Experience SF one Navigation URL issue

We have a VF page which we are migrating to "Lightning Experience" using <apex:slds /> and <body class="slds-scope">.

Page looks good in Lightning Experience, but when running "readiness report" it shows below error :

JavaScript included in this page uses window. methods.
Included JavaScript uses window. methods for navigation, which are
not supported in Lightning Experience.
Use the sforce.one navigation method instead. For more information
see the Lightning Component Developer Guide

"Window used at lines 893, 900, in Body"

We are opening another VF page by using "windows.open()" function in classic mode. For e.g.

window.open('/apex/TestPage?param1=value1&param2=value2');

As per readiness report, we are using sforce.one method to open the another VF page that we were opening by "windows.open()" in classic mode.

var url='TestPage?param1=value1&param2=value2';
sforce.one.navigateToURL(url, false);

With above SF one method, it is not opening new VF page and reloading the same page.

Can someone please suggest if they have faced similar issue while using "sforce.one.navigateURL" methods in VF Page migration to Lightning Experiance?

Best Answer

navigateToURL(​url​[, isredirect]) :- Navigates to the specified URL. Relative and absolute URLs are supported. Relative URLs are relative to the Lightning domain, and retain navigation history. External URLs—that is, URLs that are outside the Lightning domain—open in a separate browser window.

i am demonstrating 3 visualforce page with one having javascript to navigate between other two.

<apex:page >
    <script type="text/javascript">

        function naviToURL() {

            if( (typeof sforce != 'undefined') && (sforce != null) ) {
                // detail or chatter or related
                sforce.one.navigateToURL('{!$Page.S1_BackDemo}');
            } else {
                window.location.href = '{!$Page.S1_BackDemo}';
            }

            return false;
        }

        function back() {

            if( (typeof sforce != 'undefined') && (sforce != null) ) {
                // detail or chatter or related
                sforce.one.back(true);
            } else {
                window.location.href = '{!$Page.S1_Back}';
            }

            return false;
        }
    </script>
</apex:page>

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" docType="html-5.0" id="page">

    <apex:stylesheet value="{!$Resource.sforceOneStyleCss}" />
    <apex:include pageName="S1_SforceOneCommonCss" />

    <div id="vf-page">
        <div class="padding">
            <button class="btn bg-primary-btn btn--primary pvs size-full brm no-border" onclick="return back();">
                <span class="text-color-5 f3 fw-semibold">
                    <apex:outputText value="Back" />
                </span>
            </button>
        </div>
    </div>
    <apex:include pageName="S1_BackScript" />
</apex:page>

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" docType="html-5.0" id="page">

    <apex:stylesheet value="{!$Resource.sforceOneStyleCss}" />
    <apex:include pageName="S1_SforceOneCommonCss" />

    <div id="vf-page">
        <div class="padding">
            <button class="btn bg-primary-btn btn--primary pvs size-full brm no-border" onclick="return naviToURL();">
                <span class="text-color-5 f3 fw-semibold">
                    <apex:outputText value="Go To sforce.one.back Demo Page" />
                </span>
            </button>
        </div>
    </div>
    <apex:include pageName="S1_BackScript" />
</apex:page>
Related Topic