Visualstrap : Using Modals in Visualforce Pages

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 

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 :)

8 comments:

  1. If I am giving any of the four fields as mandatory and click on cancel button(I am using apex:pagemessages),I am getting page message error.is there any way to resolve this issue?

    ReplyDelete
    Replies
    1. Use immediate=true with cancel button that's it.

      Delete
  2. Hi, this work you've done guys is awesome, thanks a lot for making our lives easier.

    I want to ask you for some guiadance:

    I have a table and some columns there, one of the columns contains a button, so the idea is to show as columns only the most relevant information and then to let the user to click on a button in order to set other information for that item. I know how to do this using pure visualforce markup (AJAX) but i want to be able to use your library wichi looks much more nicer.

    What i usually do with visualforce markup is to send an apex:param to the controller when the user clicks on that row's button and then get the selected record and show it on an apex:outputpanel in order to the user to be able to specify some other field values and when the user finish they will need to click a button that rerenders the outputpanel in order to hide it. i can not use this approach with your vs:modal, somehow it seems that the vs:modal is shown before the controller moethod that gets the selected record info is executed, however, the information is correctly saved to the database.


    Do you have any idea on how to use your vs:modal on my scenario?

    PS: is there a way to use the bootstrap's modal large size in vsualstrap?

    Thanks in advance

    ReplyDelete
  3. Great work with the entire VisualStrap package - I have built several pages using it and it has both made my life a lot easier and has gotten big compliments!

    One question - is there any way to adjust the width of the modal popup? I have tried unsuccessfully to edit the modal width and if it is possible, I'd like to stick with Visualstrap styling without building my own modal popup and trying to recreate styling.

    Thanks for any advice you can give!

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. Huh, i tried to post some code to explain what i did to get large modals, however the code is not shown correctly.

      I have uploaded a code snippet to my dropbox account in case you want to see how i did it.

      https://dl.dropboxusercontent.com/u/9950151/LargeModals.txt

      Basically is a visualforce outputpanel that is rendered based on a boolean var value at the controller, so when i what to show the modal i set the var to true and do a reRender. You wil lose some functionality, for example, the ability to close the modal when you hit ESC key or to have a "X" button at the top right of the modal. I can live without that so i haven't spent time to add that functionality by hand.

      Hope it helps

      Delete
    3. Thanks for the code snippet! I have built similar popups before using outputPanels but was trying to keep the VS styling. I have found a workaround (process-wise) that worked, but I appreciate the reply.

      Delete
  4. I would like to put the following scenario: using that modal to Edit. So basically you would have to have the same modal as you have when you click new, but with some fields already populated.

    ReplyDelete