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.

Copy to Clipboard

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.

Page:

Copy to Clipboard

Controller:

Copy to Clipboard

Button:

Salesforce Modal Button

Add Button to Page Layout:

Modal Sample Page Layout

Result:

Salesforce Modal Sample Page

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.

Copy to Clipboard

Next, we need to allow our Visualforce page to reference Lightning Design System styling. We can do that by adding a simple tag:

Copy to Clipboard

Per LEX guidance page, we also have to wrap our modal block with “slds-scope” class.

Copy to Clipboard

Let’s make our modal to be hidden by default by adding a simple CSS styling:

Copy to Clipboard

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.

Copy to Clipboard

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:

Copy to Clipboard

Let’s add a small script to close modal when clicking on ‘Cancel’ button within the modal:

Copy to Clipboard

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.

Copy to Clipboard

Finally, we should add a button that will open our modal:

Copy to Clipboard

Putting things together. VF Page + Modal + Controller

Alright, if we were to put all things together, the VisualForce page would look like this:

Copy to Clipboard

Controller:

Copy to Clipboard

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:

VisualForce Modal Page Updated

If I click the button to ‘Add Contacts’ – our added modal will show up:

Lightning Modal Preview Generic

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:

Copy to Clipboard

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:

Copy to Clipboard

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:

Page:

Copy to Clipboard

Controller with comments:

Copy to Clipboard

If you did everything right, then when you click the button to add contacts, you should see something like this:

Lightning Modal Preview with Contact

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.

Lightning Modal Save Contact

Once this is done, verify that new contact is actually saved.

Final Thoughts

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!

4.6 5 votes
Article Rating