Popdock allows you to easily embed data from a host of applications in your Salesforce environment and filter this data using environmental parameters from the Salesforce object you are embedding.
Embedding a Popdock Widget on a Salesforce Page
However, there may be times when you need to filter your embedded data by a parameter that is not available on the main Salesforce object you are embedding on. For example:
- You want to embed data on an Opportunity page and filter it by a Product ID that is stored on the related Opportunity Product object.
- You want to embed data on a Case page and filter it by a Contact ID that is stored on the associated Account object.
In such cases, you can enhance Popdock’s functionality by incorporating Salesforce Object Query Language (SOQL) within the elements of a Visualforce page. This enables you to retrieve values from various Salesforce objects, allowing for more flexible and precise data filtering.
In this article, you’ll learn how to leverage SOQL to filter a Popdock widget in Salesforce, using a scenario where an Opportunity page needs to be filtered by a Product ID stored in the related Opportunity Product object.
In this example, there is an opportunity in Salesforce with the associated product displayed in the sidebar. As shown in the second screenshot, the product has a custom field called Business Central ID. You want to embed a widget on the Opportunity page in Salesforce. Previously, you would be limited to filtering this widget using only fields from the Opportunity object. However, by following the steps in this article, you will learn how to use Salesforce Object Query Language (SOQL) to retrieve the Business Central ID from the Opportunity Product object to filter the widget.
Setup
1. Configure the widget that will be embedded in Salesforce. The example below uses the Set variable parameter to allow the final widget to be filtered by a list of IDs in Salesforce returned by the SOQL statement.
How to Filter a Popdock Widget by a List of Values Using the “Set Variable” Parameter Type
2. Once you have created the widget, select Create Visualforce page, in the navigation pane.
3. Once the Visualforce page is created, you can add it to the Opportunity page in Salesforce. You can find steps to do that here.
4. In this scenario, you will need to edit the Visualforce page created by Popdock to get the widget to filter correctly.
5. Navigate to the Salesforce setup menu and then go to Custom Code and then Visualforce Pages.
6. Locate the Visualforce page created by Popdock. It will have the same name as your widget in Popdock.
7. Edit the code generated by Popdock. Use the sample code below and replace the placeholders to fit your specific scenario:
- Object and Field Names
- {YourObjectName}: The name of the Salesforce object where the Visualforce page is embedded (e.g., Opportunity, Case).
- {YourRecordIdField}: The field representing the record’s ID (e.g., Id).
- Query Customizations
- {YourRelatedObject}: The name of the related object you are querying (e.g., OpportunityLineItem, Account).
- {YourFilterField}: The field in the related object that links to the current record (e.g., OpportunityId, AccountId).
- {YourQueryField}: The field you need for filtering the widget (e.g., Business_Central_ID__c).
- Widget Parameters
- {YourWidgetId}: The ID of the Popdock widget.
- {YourWidgetToken}: The authentication token for the widget.
- {YourParameterName}: The parameter name on the widget in Popdock (e.g., Items).
- Hidden Input ID
- {yourHiddenInputId}: The unique ID for the hidden input field (e.g., opportunityId, caseId). This should be a field on the object that you are embedded the widget on that will be used to filter the SOQL query.
Instructions for Use
1. Replace all placeholders with the appropriate fields, object names, widget details, and parameters for your specific use case.
Visualforce/SOQL
<style type="text/css">
.sfdcBody {
padding: 0px !important;
}
</style>
<apex:form >
<!-- Replace the YourRecordIdField placeholder with your Salesforce field -->
<apex:inputHidden id="opportunityId" value="{!YourRecordIdField}" />
</apex:form>
<iframe frameborder="false" height="600px" width="100%" id="widget-iframe"></iframe>
<script>
<!-- Replace the remaining placeholders below: -->
const yourQueryField = 'yourQueryField';
const yourRelatedObject = 'yourRelatedObject';
const yourFilterField = 'yourFilterField';
const yourWidgetId = 'yourWidgetId';
const yourWidgetToken = 'yourWidgetToken';
const yourParameterName = 'yourParameterName';
const yourRecordIdField = '{!yourRecordIdField}';
(function () {
var windowOnresize = window.onresize;
var iframe = document.getElementById('widget-iframe');
iframe.style.padding = "0px";
iframe.height = window.innerHeight || "300px";
window.onresize = function () {
if (windowOnresize) windowOnresize();
iframe.height = window.innerHeight || "300px";
};
async function fetchRelatedData() {
const sessionId = '{!$Api.Session_ID}';
const instanceUrl = '{!$Api.Partner_Server_URL_260}';
const baseUrl = instanceUrl.split('/services/')[0];
const recordId = yourRecordIdField;
try {
if (!recordId) {
console.error('Required ID is not defined');
displayError('Required ID is missing. Cannot load widget.');
return;
}
<!-- Adjust the SOQL query to fetch the data relevant to your scenario -->
const query = 'SELECT ${yourQueryField} FROM ${yourRelatedObject} WHERE ${yourFilterField} = '${recordId}'';
const response = await fetch('${baseUrl}/services/data/v52.0/query/?q=${encodeURIComponent(query)}', {
headers: {
Authorization: 'Bearer ${sessionId}',
'Content-Type': 'application/json',
},
});
if (!response.ok) {
console.error('Error fetching data:', response.statusText);
displayError('Unable to fetch data for the widget.');
return;
}
const data = await response.json();
if (!data.records || !Array.isArray(data.records)) {
console.error('Unexpected response format:', data);
displayError('Data format issue. Cannot load widget.');
return;
}
const paramIDs = data.records
.map((record) => record[yourQueryField])
.filter(Boolean)
.join(',');
iframe.src = 'https://widget.popdock.com/embed/${yourWidgetId}?theme=salesforce&token=${yourWidgetToken}&${yourParameterName}=${encodeURIComponent(paramIDs)}';
} catch (error) {
console.error('Error fetching related data:', error);
displayError('An unexpected error occurred. Please try again.');
}
}
function displayError(message) {
const errorDiv = document.createElement('div');
errorDiv.style.color = 'red';
errorDiv.style.margin = '10px';
errorDiv.textContent = message;
document.body.appendChild(errorDiv);
}
window.onload = fetchRelatedData;
})();
</script>
Modifications to the Visualforce page
The original Visualforce page is enhanced to:
- Query Salesforce Data Using SOQL
Use SOQL to fetch related object data that isn’t directly available on the embedded object’s page. - Filter the Popdock Widget Dynamically
Pass the queried data as a parameter to the Popdock widget, ensuring it displays the correct information.
Changes that were added to the Visualforce page:
- Added Salesforce API Libraries
To enable interaction with Salesforce data:
<apex:includeScript value="/soap/ajax/42.0/connection.js" />
<apex:includeScript value="/soap/ajax/42.0/apex.js" />
- Added a Hidden Input Field
A hidden input is added to the form to make the primary record ID accessible:
<apex:form>
<apex:inputHidden id="{yourHiddenInputId}" value="{!{YourRecordIdField}}" />
</apex:form>
- Added a Script to Fetch Related Data Using SOQL
Use a SOQL query to fetch the required related data:
const query = `SELECT {YourQueryField} FROM {YourRelatedObject} WHERE {YourFilterField} = '${recordId}'`;
- Dynamically Processed Multiple Values
To handle multiple records returned by the query, the script processes the results to construct a parameter for filtering the widget:
const paramIDs = data.records
.map((record) => record.{YourQueryField})
.filter(Boolean)
.join(',');
- Dynamically Updated the Widget URL
Modify the iframe src based on the queried data:
iframe.src = `https://widget.popdock.com/embed/{YourWidgetId}?theme=salesforce&token={YourWidgetToken}&{YourParameterName}=${encodeURIComponent(paramIDs)}`;
- Enhanced Error Handling
Throughout the code error handling has been added to manage issues like missing IDs or query failures.
Review and test
Once you replaced all placeholders and adjusted the SOQL query to fetch the data relevant to your scenario, save the code, navigate back to the page where your widget is embedded.
The widget will now be filtered by the results of the SOQL statement.
Troubleshooting
If your widget is not returning correctly the error handling in the code can help you troubleshoot. Below are common errors you may encounter.
- “Required ID is not defined”
Cause: The script couldn’t find the required record ID. The hidden input field {yourHiddenInputId} might not be properly defined or populated.
Resolution: Make sure the hidden input field correctly contains the record ID. - “Unable to fetch data for the widget.”
Cause: There was an issue with the HTTP request to fetch the related data using SOQL.
Resolution:
- Check that the session ID is valid.
- Check that the baseUrl is correct.
- Check for any network issues.
- Check that the query is formatted correctly and is valid.
- “Data format issue. Cannot load widget.”
Cause: The data fetched from the query is not in the expected format.
Resolution:- Check if the returned response contains the expected records array.
- Check that the SOQL query returns expected results.
- “Error fetching related data:” followed by an error message
Cause: An unexpected error during the fetch process.
Resolution: Check for network problems, server errors, or incorrect API endpoints.
- “An unexpected error occurred. Please try again.”
Cause: A catch-all error for any unhandled exceptions in the script.
Additional Information
- Ensure that the necessary Salesforce fields are correctly populated and accessible.
- Verify that the API session ID and instance URL are correctly set up.
- Check that the SOQL query is correctly formatted and returns the expected results.
- Review any error messages in the console for further clues about the issue.
- For end users to use the widget they will need to have “API Enabled” on the profile they are assigned to.
If you have questions about filtering a Popdock widget in Salesforce using SOQL, contact support@eonesolutions.com.
