Hi everyone! At some point, I was looking for a way to have a modal popup on one of my visualforce pages. The main requirement is that I wanted it to look professional and be in the lightning design system.
So here are my findings:
- In this example, the whole thing consists of a few controller properties, CSS styles, and some VF markup. I’ve tested it, it works! But doesn’t meet my needs.
- salesforce.stackexchange.com & developer.salesforce.com mostly consist of variations from the first example, or in my opinion, more complex solutions.
- Here is a very interesting solution. However, the styling is off. It has bootstrap CSS. Overall it looks good & very close to what I need.
- This is what we are looking for! But it’s a lightning component. I wish we could convert it to use in the visualforce page! Let’s actually do it!
Let’s Find the Lightning Modal that Fits Our Needs
I’ll use Lightning Design System guidance. Here is a page where you can pick the modal design that you like. For this post, I decided to pick a medium modal because it has a nice title header, content box, and two buttons: Save & Cancel.
Adding a Simple Visualforce Page
Let’s say, we have a task to create a Visualforce page that displays all Contacts that are related to an Account. Aside from that it also should have the capability of adding more contacts to the same account.
I know that it’d be much easier to just add new rows to a contact table to add more records. But since we are trying to understand how to use modals, let’s use them instead. That way you’ll be able to use modals where it’s much more convenient than adding rows.
Add Button to Page Layout:
Now its time to embed our modal into our VisualForce page. First, we need to include two scripts. One is a jQuery library, another one is bootstrap js component. The jQuery is required in order for bootstrap to work.
Next, we need to allow our Visualforce page to reference Lightning Design System styling. We can do that by adding a simple tag:
Per LEX guidance page, we also have to wrap our modal block with “slds-scope” class.
Let’s make our modal to be hidden by default by adding a simple CSS styling:
HTML buttons within the modal are replaced by VisualForce command buttons. Please note that each button has return false; In simple words, it’ll prevent refreshing the whole page which will reset everything. Please take the time to read more about it here.
I think our modal markup can be much simplified by removing X icon at the very top to close the modal. This function will be done by the ‘Cancel’ button within the modal. So let’s remove this part:
Let’s add a small script to close modal when clicking on ‘Cancel’ button within the modal:
As far as controller modifications, let’s just add a blank function to do nothing for now. That way we’ll be able to ensure that our modal works.
Finally, we should add a button that will open our modal:
Putting things together. VF Page + Modal + Controller
Alright, if we were to put all things together, the VisualForce page would look like this:
After those changes, our page would render pretty much similar to what we had at the beginning. The only difference is that now we have ‘Add Contacts’ button:
If I click the button to ‘Add Contacts’ – our added modal will show up:
Adding Logic to Mass add Contacts Within the Modal
Let’s replace our random text with our small table to mass generate contacts. It will consist of basic PageBlock and PageBlockTable with columns. For each row, we’ll add a row index and a button to delete the temporary record. At the bottom of the modal, there will also be a link to add more rows.
Here is how it looks:
Here is a very important part. We can’t use controller methods by using buttons from modal. This is because our buttons are technically located outside of the pageblock where we have our main contacts table.
For that reason, we have to use apex:actionFunction. You can read more about it here. So in our case we’ll need 3 functions. To add row, delete row, and add new contacts to the main list by clicking ‘Save’ button. As we use those functions, we want to make sure that we re-render. That way modal or main page will always reflect the most recent information. Here is how it looks:
As far as the controller, I’ve added all the above functions plus one to actually save new contacts. Let’s move on to the next step so that I can demo the final result
Lightning Modal within the VF page + Logic to Mass Generate Contacts
Alright, if I were to put everything together, this is what I’d get:
Controller with comments:
If you did everything right, then when you click the button to add contacts, you should see something like this:
The last step would be to click ‘Save’ on a page to save our new Contact in the database. You can obviously add more contacts as you need. You can even add multiple rows all at once.
Once this is done, verify that new contact is actually saved.
I hope this guide helped you to learn something new. You can now relatively easily implement similar modals onto your VisualForce pages. If you know a better solution, feel free to leave a comment.
Stay tuned for other how-tos!