Visualstrap : Using Modals in Visualforce Pages

Friday, June 13, 2014

Modals are part of the Visualstrap from very beginning but I never talked much about them. Modals can be really help to enhance the user experience. They can let you do many things without going to and fro between pages.

In Salesforce, we are used to this type of arrangement. For example have a look at the "New" / "Edit" buttons, they will take you to a another page to accomplish the task. It feels a bit clunky.
To make the experience  fluid and fast these pages can be replaced with modals.

Scenario 

Lets say we want a page where

• See all the cases
• Create new cases

The page can be extended to close and update the cases as well

Prerequisite 

• VisualStrap

The Page & Controller 

The page and controller are pretty simple.

The Catch

•  Opening Modal : Modal can be opened using JS or html attribute. In this demo we are using JS
  

  <a class="btn btn-success btn-md" onclick="$('#newCase').modal('show');return false;">New Case</a> 
  
  
  

Closing the Modal Only when insert is success : We cannot just close the Modal when the user presses the Save button because there can be validation errors/required fields missing etc. To control this we are using a controller variable "isSuccess". We are setting it to true only if the transaction was success and based on the variable value we are calling the modal hide on the page.

Controller : This method sets the isSuccess flag to true only when the records is saved successfully.

    public void saveCase(){
        try{
            insert caseObj;
            init();
            isSuccess = true;
        }
        catch(Exception ex){
            Apexpages.addMessages(ex);
            isSuccess = false;
        }
    }

Page : The below section only renders when isSuccess is true ( and lets the page to close only when the save was success )

<apex:outputPanel rendered="{!isSuccess}">
     <script>
         $('#newCase').modal('hide');
     </script>
</apex:outputPanel>

VSModal in action

Below is the live demo of the page, you are welcome to try creating some cases for me :)

Demo Page : http://blogforce9dev-developer-edition.ap1.force.com/VSModals