[SalesForce] Conditional rendering of buttons when using apex:detail and inlineEdit=”true”

Use case:

  1. Conditionally render the 'Submit for approval' button based on some criteria while …
  2. Exploiting apex:detail relatedList="true" relatedListHover="true" inlineEdit="true" and
  3. Hiding the 'Submit for approval' button once inlineedit is activated and
  4. Showing the 'Submit for approval' button once inlineedit is canceled

apex:detail has lots of usefulness: you get relatedLists for free, you get the related List Hovers for free, you get page layout buttons for free, and you can get inlineedit for free on your page layout. Inlineedit also is smart to hide all your standard page layout buttons (e.g. Edit, Clone, Delete, Sharing..) when you activate inline edit by double clicking, showing Save and Cancel in their place. If you Cancel, the standard page layout buttons come back

If I do something like the following:

<apex:page standardController="Foo__c" >
<apex:form id="theForm">
    <apex:pageBlock >
        <apex:pageBlockButtons location="top">
            <apex:commandButton id="submitBtn"
                                value="Submit for Approval"     
                                action="{!URLFOR($Action.Foo__c.Submit,Id)}" 
                                rendered="{!someCtlrProperty'}"/>
        </apex:pageBlockButtons>
    </apex:pageBlock>
    <apex:detail relatedList="true" relatedListHover="true" inlineEdit="true" 
                 showChatter="false" subject="{!Foo__c.id}"/>
</apex:form>    
</apex:page>

Objectives 1 and 2 are met but not 3 and 4

Solutions tried:

  1. Add <apex:inlineEditSupport hideOnEdit="submitBtn" resetFunction="resetInlineEdit" event="ondblclick"/> as child to apex:form. This does nothing. Activating inlineEdit on any detail page field isn't captured by the form component; even though it surrounds the apex:detail component

Alternatives

I. I know I can abandon apex:detail and build out the page using individual VF commandButton, pageBlock with child apex:inlineEditSupport that does show and hide, outputField, followed by relatedList components but this seems harder than necessary, especially with dozens of fields and I lose the relatedList Hover feature unless I implement something like this: related Idea. I also have to build / borrow the field history related list component/controller from here.

II. I also know I could abandon objectives 3 and 4 and rely on the users averting their eyes at the Submit for the Approval button while they are inline editing.

Best Answer

If you are not against using some simple jQuery on your VF page, this works for me in my dev org:

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>

        <script>

            $vfjq = jQuery.noConflict();

            $vfjq(document).ready(function() {
                $vfjq('form').on('click', 'div', function(event) {
                    var i = setInterval(function() {
                        if ($vfjq("input[value='Cancel']").css('display').indexOf('none') !== -1) {
                            $vfjq("input[value='Submit for Approval']").show();
                        } else {
                            $vfjq("input[value='Submit for Approval']").hide();
                        }
                        clearInterval(i);
                    }, 200);
                });
            });

        </script>
Related Topic