How to Embed a Popdock Widget on a Custom Tab in Salesforce

Published: Sep 01, 2023

How to Embed a Popdock Widget on a Custom Tab in Salesforce

Published: Sep 01, 2023

With the use of a Popdock widget you can integrate a Popdock list or multiple lists directly into your Salesforce user interface either as a tab at the top or as a button that opens up a new window. The following shows how to create a Visualforce page widget in Popdock and create a new custom tab on a Salesforce homepage which uses the embedded Popdock widget.

image 1

A Popdock widget will need to be created prior to following these steps. Click here to learn how to create a Popdock widget.

This article will focus on using the Embed codes – Code generator to create your Visualforce page in Salesforce. You can also create and publish your Visualforce page by using the Environment section under Parameters. Visit Embedding a Popdock Widget on a Salesforce Page to learn how to create your Visualforce page using the Environment section of Parameters for your widget.

Locating Your Visualforce Page Code in Popdock

1. Log into Popdock and then edit the widget you created to embed in Salesforce. Select Embed codes under the left Settings menu.

image 171

2. Select Visualforce page from the Type dropdown. The Code field will populate with the code for your Visualforce page. Copy the code and paste to your clipboard, as you need this code sample in a later step.

image 174

Adding a Popdock tab in Salesforce

6307d9d470b3613b9b758e17 popdock tab

 

1.  Select the Setup icon at the top right next to your profile icon and then select Setup.

Screenshot 2023 12 04 120510


2.  In the left navigation, select Custom Code so you can choose the Visualforce Pages option.

Screenshot 2023 12 04 120659


3.  Select New to create a new Visualforce Page.

6307d9d470b361819b758e1a new visualforce page

 

4.  Give your new Visualforce Page a Label and a Name. This field cannot contain spaces.  If you want, you can also add a Description

On the Visualforce Markup tab, you will see the code that makes up the Visualforce Page.  You will need to delete the default code and paste the code created by the Code generator in Popdock for a Visualforce page (see Step 3 under the Locating Your Visualforce Page Code).

Screenshot 2023 12 04 130755


5.  Select Save and you will see your new Visualforce Page listed.

6.  Using the left navigation, select User Interface.  Then select Tabs.

Screenshot 2023 12 04 131050


7.  Here you will want to create a new Visualforce Tab. Under Visualforce Tabs, select New.

6307d9d470b361d3e5758e1c custom tabs

 

8.  Choose your Visualforce Page from the dropdown menu. Give your tab a Label, Name, and choose a Tab Style.  The rest of the fields are optional.  Once you have completed the fields, select Next.

6307d9d470b36101b8758e1d new visualforce tab

 

9.  The next page in the tab setup is if you want to add to only specific profiles.  Once you have select the profiles you want, select Next.

6307d9d470b3618859758e1e new visualforce tab2

 

10.  In this step you can choose the custom apps that you want the new tab to be available on.  Once you have selected the custom apps, select Save.

6307d9d470b3614484758e1f new visualforce tab3


11. Now you will see the new tab added to your Visualforce Tabs. You can go to your Salesforce main page to see the new tab has been added. Your Popdock widget will be available within the page of your new tab.

Screenshot 2023 12 04 131659


Questions on embedding a Popdock Widget in Salesforce? Contact support@eonesolutions.com.

Content
Locating Your Visualforce Page Code in Popdock Adding a Popdock tab in Salesforce

Feeling stuck? Get the support and guidance you need to help you power through any data challenge

Reset Filters