Visualforce: Button Action With Javascript Not Compatible in Lightning

Recently, we were working on a project to convert the existing visualforce page to support the Lightning experience. An issue that I encountered was the command button with javascript action was no longer working in the Lightning experience mode. This was due to the change mentioned in this post. Below is an example:

<apex:form>
    ...
    <apex:actionFunction action="{!doPassParam}" name="passparam" rerender="mypanel" status="status">
        <apex:param name="selectedRecordId" value="" assignTo="{!selectedRecordId}"/>
    </apex:actionFunction>
    ...
    ...
    ...
    <apex:commandButton value="Submit" action="javascript:passparam('{!recordId}')" rerender="mypanel" style="margin-left: 5px" styleClass="slds-button slds-button--neutral slds-not-selected"/>
</apex:form>

The code above shows that we would like to pass a parameter to the controller via actionFunction when the user clicks the button. This will allow it to work in classic mode. However, it will throw an error saying “The page is not supported in Lightning experience” when we try to repeat in the Lightning experience mode.

To get around this issue, use javascript to set the value to a hidden input field. The hidden input field will act as a place holder to submit the value to the controller.

<apex:form>
    <script type="text/javascript">
        function setField(fieldId, fieldValue){
            document.getElementById(fieldId).value = fieldValue;
        }
    </script>
    ...
    ...
    <apex:commandButton value="Next Level" action="{!doPassParam}" onclick="setField('{!$Component.hiddenvaluefield}', '{!recordId}')" rerender="mypanel" style="margin-left: 5px" styleClass="slds-button slds-button--neutral slds-not-selected" status="reloadStatus"/>
    <apex:inputHidden value="{!selectedRecordId}" id="hiddenvaluefield" />
</apex:form>

Note that now the command button will invoke the onclick function first before invoking the doMyAction action.