function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
srinivasusrinivasu 

how to render a VF page without buttons using <apex:detail> TAG

Hi,

 

 

Is it possible to render a VF page without buttons for eg: Edit,Delete etc using <apex:detail> tag.

I am using apex:detail because i have to display all sections of the detail page as a printable view , but the buttons should not be displayed. Any help will be appreciated..

 

 

Thanks and regards

vasu

Best Answer chosen by Admin (Salesforce Developers) 
srinivasusrinivasu

Thank you Imran...it works perfectly with the following code:

 

<script>

for(i=0;i<window.document.getElementsByName('edit').length;i++)

{

    window.document.getElementsByName('edit')[i].style.display = 'none';

}

for(i=0;i<window.document.getElementsByName('del').length;i++)

{

    window.document.getElementsByName('del')[i].style.display = 'none';

}

</script>

All Answers

Imran MohammedImran Mohammed

Add below javascript code on onLoad function

 

<script>
window.onload = function removeButtons() {

for(i=0;i<window.document.getElementsByName('edit').length;i++

{

    window.document.getElementsByName('edit')[i].style.display = 'none';

}

for(i=0;i<window.document.getElementsByName('del').length;i++

{

    window.document.getElementsByName('del')[i].style.display = 'none';

}

}

</script>

 

Hope this will work out for you.
Navatar_DbSupNavatar_DbSup

Hi,
You can use style css to hide and show the edit,delete button with apex:detail tag.
<style>
.btn{display:none;}

</style>

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved. 
jordanmjordanm

I'm having this exact same issue.

I have a VF page that I'm using to launch a flow/interview. The flow is navigated by using a built-in Next/Previous button.

 

Making all css .btn classes hidden as suggested will remove those crucial buttons. It would be ok if I could somehow change the class of those buttons and then hide all the other .btn classes but I'm not sure how to override these.

 

I also tried the code above that where you're trying to call GetElementsbyName('edit') but that won't fire either.

 

Here is my page:

 

<apex:page controller="IntakeController" tabStyle="Case"  >
    <style>
        .actionColumn{display:none;}
    </style>
    <script type="text/javascript">
    function addLoadEvent(func)
      {
        var oldonload = window.onload;
        if (typeof window.onload != 'function')
        {
           window.onload = func;
        }
        else
       {
            window.onload = function()
             {
              if (oldonload)
              {
                 oldonload();
              }
              func();
            }
         }
      }
      addLoadEvent(function()   
     {
         for(i=0;i<window.document.getElementsByName('edit'​).length;i++
{
    window.document.getElementsByName('edit')[i].style​.display = 'none';
}
for(i=0;i<window.document.getElementsByName('del')​.length;i++
{
    window.document.getElementsByName('del')[i].style.​display = 'none';
}
     }); 
    </script>
    <flow:interview name="Universal_Intake" finishLocation="{!FinishPage}"
        interview="{!myflow}" />
    <apex:PageBlock >
        <apex:outputText style="font-size:150%; color:red; font-weight:bold" 
        value="NOTE: Editing/Deleting below this point will interrupt your Universal Intake flow!" />
        <apex:detail subject="{!var_ParticipantId}" relatedList="true" />
    </apex:PageBlock>
    <apex:PageBlock >
        <apex:detail subject="{!var_FamilyId}" relatedList="true" />
    </apex:PageBlock>
</apex:page>

 

 If I replace this code block:

 

for(i=0;i<window.document.getElementsByName('edit'​).length;i++
{
    window.document.getElementsByName('edit')[i].style​.display = 'none';
}
for(i=0;i<window.document.getElementsByName('del')​.length;i++
{
    window.document.getElementsByName('del')[i].style.​display = 'none';
}

 

 with this line:

Alert('test');

 the code fires successfully, so the problem may be in that block, i'm just not sure what that would be.

 

Thanks!
srinivasusrinivasu

hii..thank u so much for the reply...but i am not able to trigger the code for onload...can u plz share the code snippet for using the code in a visualforce page..

 

 

Thanks and regards

Vasu
srinivasusrinivasu

Thank you Imran...it works perfectly with the following code:

 

<script>

for(i=0;i<window.document.getElementsByName('edit').length;i++)

{

    window.document.getElementsByName('edit')[i].style.display = 'none';

}

for(i=0;i<window.document.getElementsByName('del').length;i++)

{

    window.document.getElementsByName('del')[i].style.display = 'none';

}

</script>

This was selected as the best answer
jordanmjordanm

Srivinas, how did you get this working?

I still can't get the onLoad to fire.

Here is a much simpler page I tried adding an onLoad event to, with the code you got working.

<apex:page standardController="Participant__c">
    <apex:pageMessages />         
     <script>
     window.onload = function removeButtons() {
      for(i=0;i<window.document.getElementsByName('edit'​).length;i++)
     {
        window.document.getElementsByName('edit')[i].style​.display = 'none';
     }
     for(i=0;i<window.document.getElementsByName('del')​.length;i++)
     {
        window.document.getElementsByName('del')[i].style.​display = 'none';
     }
   }
</script>
        <apex:detail relatedList="true" />
</apex:page>

 Again, if I replace the block of code you pasted above and replace it with just an alert, it fires.
srinivasusrinivasu

Hi Jordan,

 

I am not using onload function;

 

you can try below code, it works fine; u have to add the detail tag before u call the script.

 

 

<apex:page standardController="Account">
    <apex:pageMessages /> 
    <apex:detail relatedList="true" />
      
     <script>
    <!-- window.onload = function removeButtons() { -->
      for(i=0;i<window.document.getElementsByName('edit'​).length;i++)
     {
        window.document.getElementsByName('edit')[i].style​.display = 'none';
     }
     for(i=0;i<window.document.getElementsByName('delete')​.length;i++)
     {
        window.document.getElementsByName('delete')[i].style.​display = 'none';
     }
   //}
</script>
        </apex:page>
jordanmjordanm

Oh! Yes, the order I was calling the code in was ruining it. This works fine. Thank you!
srinivasusrinivasu

Hi Navatar,

 

Thanks it works with ur code also...but i needed to display atleast one custom button so i had to go for other option
Egor VolkovEgor Volkov
Also you can use CSS to hide buttons:

<style type="text/css"> 
        input.btn[name="clone"]
        {
            display: none;
        } 
</style>