Hello Community!

I'm seeking for your help as I'm not really practical with VF codes - mainly when it comes down to Classic VS LEX.

The code below allows users to hit 'New Case' button and create a new case in a separate tab. The form will be already populate with account details and transction number. This only happens in Classic. 
In LEX, although users are able to create a New Case - account and transction information are not automatically filled in.

Any idea?

<apex:page controller="ExternalObjectTransactionCtrl" sidebar="false" showHeader="true" action="{!initiateAPIAccessRequest}" tabStyle="Case"> <!--<apex:includeScript value="/support/console/33.0/integration.js"/>--> <apex:includeScript value="/support/console/44.0/integration.js"/> <script type="text/javascript"> window.onload = function setCustomConsoleStyle(){ rerenderTopPanel(); } // Global variables var primaryTabId; var primaryObjectId; var transExternalId; // Get Primary Tab ID and Primary Object ID function openNewSubTabForNewCase(pTransExternalId) { transExternalId = pTransExternalId; // get Primary Tab ID sforce.console.getFocusedPrimaryTabId(showPrimaryTabId); } // get Primary Tab ID var showPrimaryTabId = function showPrimaryTabId(result) { primaryTabId = result.id; // get the Primary Tab Object ID sforce.console.getFocusedPrimaryTabObjectId(showPrimaryObjectId); }; // get the Primary Tab Object ID var showPrimaryObjectId = function showPrimaryObjectId(result) { primaryObjectId = result.id; // Open a standard page for "New Case" as a Sub Tab openSubTabForNewCase(); }; // Open a standard page for "New Case" as a Sub Tab function openSubTabForNewCase(){ sforce.console.openSubtab(primaryTabId, '/setup/ui/recordtypeselect.jsp?ent=Case&ekp=500&save_new_url=/500/e?def_account_id='+ primaryObjectId +'&ekp=500&ent=Case&'+'{!$Label.TransactionNumber_DOM_ID}'+'='+transExternalId, true, '{!$Label.NewCase}', null); } // FOR REFRESH CURRENT TAB function refreshCurrentTab(){ //window.top.location = '/console'; window.top.location = '/lightning/console'; } </script> <style> .LoadingMessage{ left: 50%; top: 50%; margin-left: 20px; margin-top: 15px; position: fixed; z-index: 999; } </style> <apex:form > <apex:sectionHeader title="Transactions" subtitle="{!$CurrentPage.parameters.transExternalId}"/> <apex:pageMessage rendered="{!IF(errorMessage <> null, true, false)}" summary="{!errorMessage}" severity="FATAL" strength="2"/> <apex:outputPanel id="listCasesPanel" rendered="{!IF(errorMessage == null, true, false)}"> <!-- Show message : Please wait assigning selected Transaction. status="status"--> <center><b><apex:actionStatus id="status" startText="{!$Label.IframeCase_AssignMassTransactionMessage}" startStyle="color:{!$Label.WorldRemit_Green_Colour}"/></b></center> <apex:pageBlock title="Cases" mode="edit" id="listCasesPageBlock"> <apex:pageBlockButtons location="top"> <apex:commandButton value="{!$Label.AssignSelectedTransactionButton}" action="{!massAssignTransactionToCases}" status="status" oncomplete="refreshCurrentTab();" disabled="{!IF(lstCaseWrapper.size == 0, True, False)}"/> <apex:commandButton value="{!$Label.NewCaseButton}" onclick="openNewSubTabForNewCase('{!$CurrentPage.parameters.transExternalId}');"/> <!-- <apex:commandButton value="{!$Label.NewCaseButton}" onclick="openNewSubTabForNewCase('{!$CurrentPage.parameters.transExternalId}', '{!availableAndDefaultRecordTypeId}');" oncomplete="window.location.reload();"/> <a HREF="#" onClick="openNewSubTabForNewCase('{!$CurrentPage.parameters.transExternalId}', '{!availableAndDefaultRecordTypeId}');">{!$Label.NewCaseButton}</a> <button onclick="openNewSubTabForNewCase('{!$CurrentPage.parameters.transExternalId}', '{!availableAndDefaultRecordTypeId}');">{!$Label.NewCaseButton}</button> --> </apex:pageBlockButtons> <!-- This Div is helpful for Horizontal and Vertical Scroll bars reRender="theForm, transactionDetailPanel" --> <div style="height: {!$Label.IframeCase_PaginationHeight}px; overflow-x:scroll; overflow-y:scroll;"> <!-- Show Transaction(s) which meets the defined the crtieria --> <apex:pageBlockTable value="{!Cases}" var="caseWrapper" rendered="{!IF(lstCaseWrapper != null && lstCaseWrapper.size>0, True, False)}"> <apex:column headerValue="{!$Label.TransactionCaseList_SelectionColumnName}"> <apex:inputCheckbox value="{!caseWrapper.isSelected}" disabled="{!IF(caseWrapper.caseRecord.Transaction_Number__c <> null, True, False)}"/> </apex:column> <!-- Show Transactions using a Field Set "TransactionSearch_FieldSet" --> <apex:repeat value="{!$ObjectType.Case.FieldSets.CaseSearch_FieldSet}" var="fieldAPIName"> <apex:column headerValue="{!fieldAPIName.Label}" rendered="{!IF(fieldAPIName.Label == 'Case Number', True, False)}"> <apex:outputLink value="/{!caseWrapper.caseRecord.Id}" id="theLink">{!caseWrapper.caseRecord[fieldAPIName]}</apex:outputLink> </apex:column> <apex:column headerValue="{!fieldAPIName.Label}" rendered="{!IF(fieldAPIName.Label <> 'Case Number', True, False)}"> <apex:outputField value="{!caseWrapper.caseRecord[fieldAPIName]}"/> </apex:column> </apex:repeat> </apex:pageBlockTable> </div> <!-- Show Buttons for Pagination --> <center> <apex:outputPanel id="paginationButtonsPanel"> <apex:panelGrid columns="5" bgcolor="{!$Label.WorldRemit_Green_Colour}" rendered="{!IF(lstCaseWrapper != null && lstCaseWrapper.size>0, True, False)}"> <apex:commandButton action="{!first}" value="{!$Label.Iframe_FirstButton}" disabled="{!IF(pageNumber = 1, True, False)}"/> <apex:commandButton action="{!previous}" value="{!$Label.Iframe_PreviousButton}" disabled="{!NOT(hasPrevious)}"/> <apex:outputText value="page {!pageNumber} of {!TotalPages}" rendered="{!TotalPages > 0}"></apex:outputText> <apex:commandButton action="{!next}" value="{!$Label.Iframe_NextButton}" disabled="{!NOT(hasNext)}"/> <apex:commandButton action="{!last}" value="{!$Label.Iframe_LastButton}" disabled="{!IF(pageNumber = TotalPages, True, False)}"/> </apex:panelGrid> </apex:outputPanel> </center> </apex:pageBlock> </apex:outputPanel> <apex:actionFunction name="rerenderTopPanel" rerender="transactionDetailPanel" status="iframeActionStatus"/> <apex:outputPanel id="transactionDetailPanel"> <apex:actionStatus id="iframeActionStatus" stopText="" startText="Start"> <apex:facet name="start"> <div class="LoadingMessage"> <table border="0" width="100%" height="100%"> <tr> <td align="center"><b>{!$Label.Iframe_LoadingProcessBarMessage}</b></td> </tr> <tr> <td align="center"><img src="{!$Resource.ProcessBar}"/></td> </tr> </table> </div> </apex:facet> <apex:facet name="stop"> <apex:iframe title="{!$Label.Iframe_TransactionDetail}" src="{!endPointURL}" frameborder="true" scrolling="true" rendered="{!IF(errorMessage == null, true, false)}" height="1000px" width="100%"/> </apex:facet> </apex:actionStatus> </apex:outputPanel> </apex:form> </apex:page>

Really appreaciate your assistance on this!