Visualforce

Disabling the command buttons and Grey out the total vf page on any action

How to disable the command buttons and Grey out the total vf page on any action?

Usually we multiple records creates whenever multiple click on save button on custom save button on VF page. So to overcome this issue we can hide the all buttons once user click on buttons.

VF Page:

<apex:commandButton action=”{!doSave}” id=”saveButton ” value=”save” onclick=”disableAllButtons()”/>

<apex:commandButton action=”{!doCancel}” id=”cancelButton” value=”cancel” onclick=” disableAllButtons()”/>

var j$ = jQuery.noConflict();

function disableAllButtons(){

j$(“[id$= saveButton],[id$= cancelButton]”).hide();

}

function showButtons(){

j$(“[id$= cancelButton],[id$= saveButton]”).show();

}

</Script>

showButtons function is to show the button once the action.
If we can use the same code for the input fields as well which have the action function. So that we can restrict the user to change the field and click the buttons immediately.
Some times we have to restrict the user to modify the fields on that page after click on button or change on any fields of having action function.

So, here we have to grey out the total VF page to restrict the user to change the fields if any action is In-progress.

The below code is to grey out the page. Gering out the backgrouond,status box and all tex boxes in the page.

<apex:commandButton action=”{!doSave}” id=”saveButton ” value=”save” onclick=”disableAllButtons()”/>

<apex:commandButton action=”{!doCancel}” id=”cancelButton” value=”cancel” onclick=” disableAllButtons()”/>

“Processing…….” </div>

var j$ = jQuery.noConflict();

function disableAllButtons(){

j$(“[id$= saveButton],[id$= cancelButton]”).hide();

j$(“# processingSimbol “).show();

j$(“[id$=formId]”).append(j$(“<div>”,{“id”:”blurybackground”})

,j$(“<div>”,{“id”:”statusBox”})

.append(

j$(“<img>”,{“src”:”/img/loading32.gif”}),

j$(“<div>”,{“id”:”textBox”}).text(“{!$Label.MDF_Status_Processing}”)));

}

function showButtons(){

j$(“[id$= cancelButton],[id$= saveButton]”).show();

j$(“#blurybackground, #statusBox”).remove();

if(globalFocus != null){

globalFocus.focus();

if(globalFocus.attr(‘class’).indexOf(‘amountInput’)!=-1){

var focusId = globalFocus.attr(‘id’).split(‘:’).join(‘\\\\:’);

setTimeout(function(){

j$(“#”+focusId).focus();

},300);

}

</Script>

<style>

#blurybackground {

z-index:1000;

//bottom:0;

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;

text-align:center;

vertical-align: middle;

background-color: #222;

opacity:0.6;

filter:alpha(opacity=60);

}

#statusBox {

// for Modzilla

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

-moz-border-radius-bottomleft:5px;

-moz-border-radius-bottomright:5px;

-moz-border-radius-topleft:5px;

-moz-border-radius-topright:5px;

-moz-box-shadow:1px 6px 5px #888888;

-webkit-border-bottom-left-radius:5px;

-webkit-border-bottom-right-radius:5px;

-webkit-border-top-left-radius:5px;

-webkit-border-top-right-radius:5px;

-webkit-box-shadow:1px 6px 5px #888888;

box-shadow: 1px 6px 5px #888888;

z-index:1000;

background:#FFFFFF none repeat scroll 0 0;

height:42px;

width:150px;

left:45%;

top:35%;

padding-left:15px;

padding-top:11px;

position:absolute;

vertical-align:middle;

}

#textBox {

margin-left:40px;

margin-top:-20px;

font-weight:bold;

font-size:14px;

}

</style>

Visualforce page to add multiple records

Adding multiple records:

Generally by using standard salesforce tab you can enter only one record at a time form UI. I don’t want to enter single record at a time. I want to enter multiple records at time. How can we achieve this? We can achieve this by using simple visual force page.

Example: I want to enter multiple accounts in single save. See the below visualforce page.

Visualforce page:

<apex:page Controller=”AddmultipleAccountsController”>
<apex:form >
<apex:pageBlock >
<apex:pageBlockTable value=”{!listAccount}” var=”acc”>
<apex:column headerValue=”Account Name”>
<apex:inputField value=”{!acc.Name}”/>
</apex:column>
<apex:column headerValue=”Account Number”>
<apex:inputField value=”{!acc.AccountNumber}”/>
</apex:column>
<apex:column headerValue=”Account Type”>
<apex:inputField value=”{!acc.Type}”/>
</apex:column>
<apex:column headerValue=”Industry”>
<apex:inputField value=”{!acc.Industry}”/>
</apex:column>
</apex:pageBlockTable>
<apex:pageBlockButtons >
<apex:commandButton value=”Add Accounts Row” action=”{!addAccount}”/>
<apex:commandButton value=”Save Accounts” action=”{!saveAccount}”/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>

Controller related to above page:

public class AddmultipleAccountsController {
Account account = new Account();
public list<Account> listAccount{ get; set; }

public AddmultipleAccountsController()
{
listAccount=new list<Account>();
listAccount.add(account);
}

Public void addAccount()
{
Account acc = new Account();
listAccount.add(acc);
}
public PageReference saveAccount() {
for(Integer i=0; i<listAccount.size(); i++)
{
insert listAccount;
}
return Page.Allaccountssaved;
}
}

Visualforce page Allaccountssaved( using this page above controller):

<apex:page sidebar=”false” showHeader=”true”>
<center><h3>Congrtas your accounts are successfully saved!!</h3></center>
</apex:page>

Output of above example:

Here Add Account row is used to enter one more account and Save Account is used to save all account records you entered. See below screen, you can understand functionality of Add Account Row button.

After saving you will get below screen.

This is simple example to explain how to enter multiple records at time form UI.

Overriding Standard button with visualforce page

By using visualforce pages we can override standard buttons. This example helps you to understand how you can overriding standard button with visualforce page. In this example i am creating visualforce page called “newopportunitycreatepage” and I am overriding standard new button with above created visualforce page.

below is code for “create newopportunitycreatepage” ( to crate vf page go to How to create visualforce page?)

<apex:page standardController=”Opportunity” sidebar=”false”>
<apex:form >
<apex:pageBlock title=”Opportunity Detail”>
<apex:pageBlockbuttons >
<apex:commandButton value=”Save Opportunity” action=”{!save}”/>
</apex:pageBlockbuttons>
<apex:pageBlockSection title=”Opportunity Information 1″ columns=”2″ collapsible=”false”>
<apex:inputField value=”{!opportunity.Name}”/>
<apex:inputField value=”{!opportunity.Active__c}”/>
<apex:inputField value=”{!opportunity.DeliveryInstallationStatus__c}”/>
<apex:inputField value=”{!opportunity.TrackingNumber__c}”/>
<apex:inputField value=”{!opportunity.CloseDate}”/>
</apex:pageBlockSection>
<apex:pageBlockSection title=”Opportunity Information 2″ columns=”2″ collapsible=”false”>
<apex:inputField value=”{!opportunity.Description}”/>
<apex:inputField value=”{!opportunity.LeadSource}”/>
<apex:inputField value=”{!opportunity.NextStep}”/>
<apex:inputField value=”{!opportunity.Type}”/>
<apex:inputField value=”{!opportunity.StageName}”/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

This is simple visual force page code. Below is the output of this code.

Now we are ready with our vf page, next step how to override standard opportunity new button.

Steps to overriding standard buttons

Go to setup -> opportunity -> Buttons,links, and actions, then click edit on new action. see below image for reference.

Next select override with visualforce option and select “newopportunitycreatepage” you created above and save your changes. See the below image for reference.

Now you are done with overriding your standard opportunity new button.

How to test this?

To test this just go to opportunity tab and click on new button. you will get newly created visualforce page. And also you can see the difference in url. Your url will navigate to your visualforce page url.

Hope you under stand how to override standard buttons with visualforce page. By using this you can override stadard buttons for any object(Standard or Custom). But for custom object navigation is different.

For custom object just go to setup -> build -> create ->object -> and select your object there you can find buttons and links section.

apex:actionStatus tag in visualforce page

actionStatus tag in visualforce

<apex:actionStatus> tag

This tag helps you to display the status AJAX request like an AJAX request can either be in progress.

See the below example to understand <apex:actionstatus> tag.

Below visualforce helps you to search opportunity based on name:

<apex:page controller=”OppsearchController”>
<apex:form >
<apex:pageBlock id=”pb” mode=”edit”>
<apex:pageBlockSection >
<apex:pageBlockSectionItem >
<apex:outputLabel for=”Search String”>Search String</apex:outputLabel>
<apex:panelGroup >
<apex:inputText value=”{!searchString}”/>
<apex:commandButton value=”GO” action=”{!oppResult}” status=”as” reRender=”pbt”/>
<apex:actionStatus startText=”Searching…….” id=”as”></apex:actionStatus>
</apex:panelGroup>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
<apex:pageBlockSection title=”Result”>
<apex:pageBlockTable value=”{!OppSearchResult}” var=”opp” id=”pbt”>
<apex:column value=”{!opp.name}”/>
</apex:pageBlockTable>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

Apex Controller:

public class OppsearchController {
List<Opportunity> OppSearchResult;
public String searchString { get; set; }
public List<Opportunity> getOppSearchResult() {
return OppSearchResult;
}
public PageReference oppResult() {
OppSearchResult = (List<Opportunity>)[FIND :searchString RETURNING Opportunity(Name)][0];
return null;
}
}

See the below visualforce page output.