+ Start a Discussion
Karen Brown 39Karen Brown 39 

How do i change Visualforce page not to default to edit mode

I have created a visualforce page but when you click on the page section it is defaulted to edit mode, i want it to behave similar to classis in the way that its in read mode until you click an edit button.... here is the starting code of my page

<apex:page standardController="opportunity" lightningStylesheets="true">
 <apex:messages />

    <apex:form >
        <apex:pageBlock title="" mode="edit">

            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!save}"/>
                <apex:commandButton value="Cancel" action="{!cancel}"/>
            </apex:pageBlockButtons>
DeveloperSudDeveloperSud
Hi Karen,

It will be easier to analyse if you can just paste your full code here and explain which part of the page you want to make readonly.Thanks!!
Karen Brown 39Karen Brown 39
Thanks, FYI i dont know visualforce i used an app to convert a classic page layout into code, none of the page should be read only it should all be editable but i dont want the mode to default to edit, i want to have the page open in read mode i.e. detail mode then click a button like you do on the standard layout to edit if they so wish.

<apex:page standardController="opportunity" lightningStylesheets="true">
<apex:messages />

    <apex:form >
        <apex:pageBlock title="" mode="edit">

            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!save}"/>
                <apex:commandButton value="Cancel" action="{!cancel}"/>
            </apex:pageBlockButtons>

        
            <apex:pageBlockSection title="Credit Committee" columns="2">
          
                <apex:inputField value="{!opportunity.No_of_days_waiting__c}" required="false"/>
                <apex:inputField value="{!opportunity.Credit_minute_approved_internally__c}" required="false"/>
                <apex:inputField value="{!opportunity.Credit_application_started__c}" required="false"/>
                <apex:inputField value="{!opportunity.Credit_minute_signed__c}" required="false"/>
                <apex:inputField value="{!opportunity.Credit_application_approved_by_Head_of_C__c}" required="false"/>
                 <apex:pageBlockSectionItem />
                <apex:inputField value="{!opportunity.Credit_app_approved_internal__c}" required="false"/>
                <apex:inputField value="{!opportunity.Credit_app_re_approval__c}" required="false"/>
                <apex:inputField value="{!opportunity.Credit_application_approved_by_TSSP__c}" required="false"/>
                 <apex:inputField value="{!opportunity.Credit_app_re_approval_comments__c}" required="false"/>
                 <apex:pageBlockSectionItem />
                                         
           </apex:pageBlockSection>



        </apex:pageBlock>
    </apex:form>
</apex:page>
Prashant Pandey07Prashant Pandey07
Hi Karen Brown ,

You need to change the input field to output field in order to make it read-only.
 
<apex:page standardController="opportunity" lightningStylesheets="true">
<apex:messages />

    <apex:form >
        <apex:pageBlock title="" >

            <apex:pageBlockButtons >
                <apex:commandButton value="Edit" action="{!edit}"/>
       
            </apex:pageBlockButtons>

        
            <apex:pageBlockSection title="Credit Committee" columns="2">
          
                <apex:outputField value="{!opportunity.No_of_days_waiting__c}" required="false"/>
                <apex:outputField  value="{!opportunity.Credit_minute_approved_internally__c}" required="false"/>
                <apex:outputField value="{!opportunity.Credit_application_started__c}" required="false"/>
                <apex:outputField value="{!opportunity.Credit_minute_signed__c}" required="false"/>
                <apex:outputField value="{!opportunity.Credit_application_approved_by_Head_of_C__c}" required="false"/>
                 <apex:pageBlockSectionItem />
                <apex:outputField value="{!opportunity.Credit_app_approved_internal__c}" required="false"/>
                <apex:outputField value="{!opportunity.Credit_app_re_approval__c}" required="false"/>
                <apex:outputField value="{!opportunity.Credit_application_approved_by_TSSP__c}" required="false"/>
                 <apex:outputField value="{!opportunity.Credit_app_re_approval_comments__c}" required="false"/>
                 <apex:pageBlockSectionItem />
                                         
           </apex:pageBlockSection>



        </apex:pageBlock>
    </apex:form>
</apex:page>

Follow the below step to view the above page in read-only on Opportunity .

Step 1- Go to set up find the opportunity Object 
Step 2-  Find "Buttons, Links, and Actions" on Opportunity
Step 3- Override the view Force from the View button.

User-added image

User-added image
Step 4- Go to opportunity Detail page and see the vf as the result.

<!----------------Another way------------------>
 
<apex:page standardController="Opportunity">
  <apex:detail subject="{!Opportunity.Id}" relatedList="false" title="false"/>  
</apex:page>

Here you need to pass the id in the url and also override the view of opportunity.

--
Thanks,
Prashant
Karen Brown 39Karen Brown 39
Prashant, I dont want to make the fields read only.... in my requirement i explain i want the team to input the field but when they navigate to the page i dont want it to default to edit mode i want it to default to read mode with a button to click to edit the same4 as the classic view.......  We use visualoforce to enable us to have classic page sections as tabs in the lightning page compoent..

so when they click on the tab it looks like this....i want it to be in read mode with an edit button we cant assume the6y want to edit just because they navigate to the tab.

User-added image
 
Prashant Pandey07Prashant Pandey07
Hi Karen,
Did you override the detail page with your visual force page..if yes then you will always see the detail page in Edit mode. 



--
Thanks,
Prashant


 
Karen Brown 39Karen Brown 39
Prashant, we use lightning, and we prefer that instead of when using classic the page sections you scroll down when we implemented lightning we decided to have visualforce pages for each section of the detail page... we then in lightning app builder added a tab component and dragged the visualforce pages in as tabs.... see below;

User-added image

User-added image

 
Prashant Pandey07Prashant Pandey07
Thanks for image...Just update your visualforce with my code you will see the desired result..


--
Thanks,
Prashant
Karen Brown 39Karen Brown 39
Ok ill try thanks
Karen Brown 39Karen Brown 39
@Prashant i tried your code but go this error

Error: Unsupported attribute required in <apex:outputField> in test at line 15 column 98
Prashant Pandey07Prashant Pandey07
Hi Karen,

Just remove the required "attribute" from all the outputfiled.. and try.

--
Thanks,
Prashant
 
Karen Brown 39Karen Brown 39
@Prashant thanks i did this and yes the edit button is present and its displayed by default as read only.... the new problem is that clicking the edit button displays the entire page for the opportunity all fields, not just the ones i placed on the visualforce page...

Any ideas how it can just present the relevsnt fields?
Prashant Pandey07Prashant Pandey07
Karen- Now either u can create a new page layout and add your desired fields and assign to the profile 

or Create a visualforce page as earlier you have created earlier and as soon as the user clicks edit you need to redirect to new vf.

--
Thanks,
Prashant
Karen Brown 39Karen Brown 39
Hi thanks, problem is we have 5 VF pages because we have 5 sections on the standard page layout, so how do i go about adding an edit button that will direct to the correct VF page?

Thanks
Prashant Pandey07Prashant Pandey07
@Karen- I didn't get the 5 vf and 5 sections. Do you mean the edit page has 5 section that is in vf...

--
Thanks,
Prashant
Karen Brown 39Karen Brown 39
@prashant, so for example in opportunity page layout in classic our detail page has the following sections;
  1. Opportunity detail
  2. Key Dates
  3. Credit Application
  4. Professionals
  5. Final Closing Checklist
When we moved to lightning because it makes the page scroll even longer due to the fields entry being below the field label and not to the side we decided to reduce thr layout we would create a visualforce per section and have these displayed as tabs in lightning to reduce scrolling, so with your solution for editing the page byu adding the button etc it redirects to edit the full page and not just the section specific to the visualforce page.

Does that make sense?
Prashant Pandey07Prashant Pandey07
@Karen- Yes..and thanks for clarifying..you need to create 5 edit page for each section and edit login should be redirecting you to respected page 

Let me know if have any issue..

--
Thanks,
Prashant
Karen Brown 39Karen Brown 39
@Prashant, do you mean i need 5 custom edit buttons 1 for each section and then add to VF page... no sure how i do this?  thanks
Prashant Pandey07Prashant Pandey07
Yes, 5 custom button and following pages in edit mode.
Opportunity detail
Key Dates
Credit Application
Professionals
Final Closing Checklist

--
Thanks,
Prashant