+ Start a Discussion
Shubham4462Shubham4462 

Vf page override Opportunity view Page in salsforce classic and migrate it in salesforce lightning

Hello All

I need a urgent help regarding to vf page i have a vf page whic is overriding opportunity view so i need to replace it by lightning component or either any workaround for it this is my vf page.
<apex:page id="optyPageId" StandardController="Opportunity" tabStyle="Opportunity" sidebar="true" docType="html-5.0" extensions="ICS_Async_Search_Before_CreateController">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <apex:pageMessages id="showmsg" escape="false" rendered="{!MatchResponse!=null && MatchResponse.size!=0}"/>
    <apex:form >
        <apex:actionFunction name="searchCDMController" action="{!searchCDM}" reRender="searchResultOPId,showmsg,dsverif" status="loadingStatus" oncomplete="checkDSVerificationCheck();"/>
        <apex:actionFunction name="rollBackStageController" action="{!rollBackStage}" reRender="optyPageId" status="loadingStatus"/>
        <apex:outputPanel id="searchResultOPId"  styleClass="searchResultOPCls" style="position:absolute;z-index:50101;">
        <apex:outputPanel rendered="{!MatchResponse!=null && MatchResponse.size!=0}" styleClass="matchDialogCls">
        <apex:pageBlock id="matchDialogId"  title="Same Account Found in CDM (Please do not Refresh the page)"  >
        <script>$('.overlayBackground').show();</script>
        
        <apex:pageBlockSection title="CDM Search Result" columns="1" >
                    <apex:pageBlockTable value="{!MatchResponse}" id="matchPgBlkTbl" var="match">
                        <apex:column headerValue="Action">
                            <span> 
                                <input type="radio" name="radio" value="{!match.PartyId}">
                                    <apex:actionSupport event="onclick" action="{!getSelected}" reRender="getCustBtn,custOutPan">
                                        <apex:param name="partyid" value="{!match.PartyId}"/>
                                    </apex:actionSupport>
                                </input>
                            </span>
                        </apex:column>  
                        <apex:column headerValue="Party Id" value="{!match.PartyId}"/>
                        <apex:column headerValue="Registry Id" value="{!match.RegistryId}"/>
                        <apex:column headerValue="Customer Name" value="{!match.CustomerName}"/>
                        <apex:column headerValue="City" value="{!match.City}"/>
                        <apex:column headerValue="State" value="{!match.State}"/>
                        <apex:column headerValue="Province" value="{!match.Province}"/>
                        <apex:column headerValue="Postal Code" value="{!match.PostalCode}"/>
                        <apex:column headerValue="County Code" value="{!match.CountyCode}"/>
                        <apex:column headerValue="Country" value="{!match.Country}"/>
                        <apex:column headerValue="DUNS Number" value="{!match.DUNSNumber}"/>
                        <apex:column headerValue="DataQualityScore" value="{!match.DataQualityScore}"/>
                    </apex:pageBlockTable>
                </apex:pageBlockSection>
        <apex:pageBlockSection >
            <apex:pageBlockSectionItem rendered="{!MatchResponse!=null && MatchResponse.size!=0}" >
                <apex:commandButton id="getCustBtn" value="Get Customer Details" action="{!getCustomerFromCDM}"  status="loadingStatus" disabled="{!selectedAccountId==null}" style="margin-top:10px;margin-bottom:10px;" reRender="custOutPan"/>
            </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
            <apex:outputPanel id="custOutPan" >
            <br/>
                    <apex:pageBlockSection title="Customer Details Response from CDM" columns="1" rendered="{!custRes.PartyId!=null}">
                        <apex:pageBlockTable value="{!custRes}" var="cust"> 
                            <apex:column headerValue="PartyId" value="{!cust.PartyId}"/>
                            <apex:column headerValue="RegistryId" value="{!cust.RegistryId}"/>
                            <apex:column headerValue="CustomerName" value="{!cust.CustomerName}"/>
                            <apex:column headerValue="StreetAddress" value="{!cust.StreetAddress}"/>
                            <apex:column headerValue="StreetAddress2" value="{!cust.StreetAddress2}"/>
                            <apex:column headerValue="State" value="{!cust.State}"/>
                            <apex:column headerValue="Province" value="{!cust.Province}"/>
                            <apex:column headerValue="PostalCode" value="{!cust.PostalCode}"/>
                            <apex:column headerValue="CountyCode" value="{!cust.CountyCode}"/>
                            <apex:column headerValue="Country" value="{!cust.Country}"/>
                            <apex:column headerValue="DUNSNumber" value="{!cust.DUNSNumber}"/>

                            <apex:column headerValue="Source">
                                <apex:outputPanel rendered="{!cust.OrigSystemReferences.OrigSystemReference!=null}">
                                    <a class="showMoreCls" onClick="$('.sourceSystemOPCls, .overlayBackground').show()">...</a>
                                </apex:outputPanel>
                                <apex:outputPanel styleClass="custPopUpCls sourceSystemOPCls"  style="display:none">
                                    <a class="closeCls pbTitle" onClick="$('.sourceSystemOPCls, .overlayBackground').hide()">Close</a>
                                    <apex:pageBlock title="Source System References">
                                        <apex:pageBlockTable value="{!cust.OrigSystemReferences.OrigSystemReference}" var="sourceSysRef">
                                            <apex:column headerValue="Referece Id" value="{!sourceSysRef.OrigSystemReferenceId}"/>
                                            <apex:column headerValue="Source System" value="{!sourceSysRef.OrigSystem}"/>
                                            <apex:column headerValue="System Reference" value="{!sourceSysRef.OrigSystemReference}"/>
                                        </apex:pageBlockTable>
                                    </apex:pageBlock>
                                </apex:outputPanel>
                            </apex:column>
                            
                            <apex:column headerValue="PartyUsages">
                                <apex:outputPanel rendered="{!cust.PartyUsages.PartyUsageAssignment!=null}">
                                    <a class="showMoreCls" onClick="$('.partyUsagesOPCls, .overlayBackground').show()">...</a>
                                </apex:outputPanel>
                                <apex:outputPanel styleClass="custPopUpCls partyUsagesOPCls"  style="display:none">
                                    <a class="closeCls pbTitle" onClick="$('.partyUsagesOPCls, .overlayBackground').hide()">Close</a>
                                    <apex:pageBlock title="Party Usages">
                                        <apex:pageBlockTable value="{!cust.PartyUsages.PartyUsageAssignment}" var="usage">
                                            <apex:column headerValue="Referece Id" value="{!usage.PartyUsgAssignmentId}"/>
                                            <apex:column headerValue="Source System" value="{!usage.PartyUsageCode}"/>
                                        </apex:pageBlockTable>
                                    </apex:pageBlock>
                                </apex:outputPanel>
                            </apex:column>
                            
                            
                        </apex:pageBlockTable>
                        <apex:outputPanel >
                        <apex:outputText >Do you want to create the Account in CDM?  Click Here.</apex:outputText>
                        <apex:commandButton styleClass="createAccBtn" value="Create Account in CDM" action="{!updateWonPending}" oncomplete="$('.searchResultOPCls, .overlayBackground').hide();" status="loadingStatus" reRender="showmsg,custOutPan"/>
                        
                        <apex:outputText ><br/><b>OR</b><br/>Do you want to update the Account in SFDC ?  Click Here.</apex:outputText>
                        <apex:commandButton styleClass="createAccBtn" value="Update Account in SFDC" action="{!updateSFDCAccount}" oncomplete="$('.searchResultOPCls, .overlayBackground').hide();" status="loadingStatus" reRender="showmsg,custOutPan"/>
                        
                        </apex:outputPanel>
                    </apex:pageBlockSection>   
    </apex:outputPanel>
              
        
        </apex:pageBlock>
        </apex:outputPanel>
        </apex:outputPanel>
        <!-- <input type="hidden" id="dsverif" value="{!dsVerificationReq}" class="dsverifCls"/> -->
        <apex:outputPanel id="dsverif" styleClass="dsverifCls">
            <apex:inputHidden value="{!dsVerificationReq}"/>
        </apex:outputPanel>

    </apex:form>
    <apex:actionStatus id="loadingStatus">
            <apex:facet name="start">
                <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.25; z-index: 52000; background-color: black;">
                &nbsp;
                </div>
                <div style="position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 52001; margin: 15% 50%">
                    <div style="display: inline-block; padding: 2px; background-color: #fff; width: 125px;">
                        <img src="/img/loading.gif" style="float: left; margin: 8px;" />
                        <span style="display: inline-block; padding: 10px 0px;">Please Wait...</span>
                    </div>
                </div>
            </apex:facet>
        </apex:actionStatus>
        <apex:outputPanel id="detailPageOPPanel">
            <apex:detail inlineEdit="true" relatedList="true" showChatter="true" oncomplete="searchCDMAJAX();"/>
        </apex:outputPanel>

    <script>
        function searchCDMAJAX(){
            searchCDMController();
        }
        function checkDSVerificationCheck(){
            if($(".dsverifCls>input").val() =='true'){
                alert('{!$Label.DS_Verification_Err_Msg}')
                rollBackStageController();
            }
        }
    </script>
    <style>
    .closeCls{
        background:white;
        float: right;
        width: 30px !important;
        max-width:400px;
        cursor:pointer;
        padding:5px;
    }
    .matchDialogCls .pbTitle{
        white-space: nowrap;
    }
    </style> 
</apex:page>
This is my Vf page i want this in lightning component or any other workaround will be appreciated For how to override opportunity view page without mentioning each field

Thanx regads 
Shubham
Raj VakatiRaj Vakati
Make this changes to your code


To style your Visualforce page to match the Lightning Experience UI when viewed in Lightning Experience or the Salesforce app, set lightningStylesheets="true" in the <apex:page> tag. When the page is viewed in Salesforce Classic, it doesn’t get Lightning Experience styling.


 
<apex:page lightningStylesheets="true">

Check this for looks and feel 

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm