Dynamics 365 Sales: Troubleshooting Photo Display Issues in Unified Interface Forms

Table of Contents

Users leveraging Microsoft Dynamics 365 Sales within the Unified Interface may encounter an issue where contact or lead photos, specifically those sourced through the LinkedIn integration, do not appear on custom forms. While these photos typically display without issue on the standard, out-of-the-box forms provided by Microsoft, the behavior differs significantly when working with forms that have been created or heavily customized by the organization. This inconsistency can detract from the user experience, as the visual context provided by photos helps sales professionals quickly identify and connect with their contacts and leads. The absence of expected imagery can make forms feel incomplete and less intuitive to navigate, particularly for users accustomed to the photo-rich experience on default forms. Understanding the root cause of this discrepancy is the first step toward implementing an effective resolution.

The primary reason why photos from the LinkedIn integration might not display on custom contact or lead forms in Dynamics 365 Unified Interface lies in how these custom forms are configured compared to their default counterparts. The out-of-the-box forms are pre-equipped with the necessary components to render these specific types of integrated photos. This includes references to specific JavaScript libraries and the configuration of event handlers that execute when the form loads. These components are responsible for retrieving the photo data from the integrated source (in this case, LinkedIn) and displaying it within the designated control on the form.

However, when a form is created from scratch or heavily customized, these essential components are not automatically included or linked to the new form definition. Customization allows organizations to tailor the layout, fields, and behavior of forms to meet their specific business processes. While this offers immense flexibility, it also means that elements relying on specific background scripts or event triggers, like the display of LinkedIn photos, must be explicitly added back into the custom form configuration. Without the correct library reference and the associated function call tied to a form event, the logic required to fetch and display the LinkedIn photos is simply not executed when the custom form loads, resulting in the photos being absent.

To rectify the issue of missing LinkedIn photos on custom contact and lead forms within Dynamics 365 Sales Unified Interface, the necessary JavaScript library and its corresponding event handler must be manually added to the custom form’s properties. This process involves modifying the form definition through the customization interface to include the required client-side scripting components. By linking the appropriate library and ensuring the correct function is triggered when the form loads, you re-enable the functionality that retrieves and displays the integrated photos. This step is crucial for restoring the expected user experience and ensuring feature parity between default and custom forms regarding the LinkedIn photo display. The steps outlined below provide a detailed guide on how to implement this resolution.

Prerequisites and Context: Dynamics 365 Customization

Before diving into the resolution steps, it’s helpful to have a basic understanding of the Dynamics 365 customization environment. The Unified Interface is the modern, responsive design used across Dynamics 365 applications, providing a consistent user experience across devices. Customization in Dynamics 365 allows administrators and customizers to modify the application’s appearance and behavior without writing significant code, primarily through a web-based interface. This includes modifying entities (like Contact or Lead), views, charts, dashboards, and forms. Forms are particularly important as they are the primary interface users interact with to view and edit record data.

Customizations are typically performed within the “Advanced Settings” area, which provides access to the classic configuration interface. Within this area, the “Customize the System” option allows direct modification of system components. It’s generally recommended to perform customizations within a Solution, especially in production environments, as solutions provide better management, packaging, and portability of changes. However, for straightforward modifications like adding a library and event handler to a form, directly customizing the system (as described in the original steps) is a common approach for administrators familiar with the environment, particularly in development or testing instances. It’s crucial to remember that any changes made need to be saved and published to become available to users.

Step-by-Step Resolution

Let’s break down the process of adding the required components to your custom form in more detail, providing context for each action.

1. Sign in to Your Dynamics 365 App: Access your Dynamics 365 Sales environment using a web browser. Ensure you have the necessary security roles and permissions (typically System Administrator or Customizer) to access and modify system customizations.
2. Navigate to Advanced Settings > Customizations > Customize the System: Once logged in, locate and click on the gear icon (⚙️) in the top right corner of the page. This usually opens a settings menu. From this menu, select “Advanced Settings.” This action navigates you to the classic interface area of Dynamics 365. In the navigation pane on the left, expand the “Customizations” section and then select “Customize the System.” This opens a new window or tab displaying the default solution view, allowing you to browse and modify system components.
3. Select the Entity and Custom Form: In the left-hand navigation pane within the customization window, expand the “Entities” tree. Entities represent the different record types in Dynamics 365, such as Account, Contact, Lead, Opportunity, etc. Locate and expand the entity that contains the custom form you need to modify (e.g., the “Contact” entity or the “Lead” entity). Under the selected entity, expand the “Forms” node. You will see a list of forms associated with this entity. Identify and double-click the specific custom form where you want to display the LinkedIn photos. This action opens the form editor in a new window.

4. Open Form Properties: With the custom form open in the editor, locate the “Form Properties” button on the ribbon menu, usually found in the “Home” tab of the editor. Clicking this button opens the “Form Properties” dialog box. This dialog is where you configure various aspects of the form’s behavior, including event handlers and associated libraries.

   

5. Add the Required Form Library: Within the “Form Properties” dialog, navigate to the “Events” tab. This tab is used to configure client-side scripting for the form. In the “Form Libraries” section, you will see a list of JavaScript libraries currently loaded with this form. Click the “Add” button. A “Look Up Record” dialog for libraries will appear. In the search box, type msdyn_linkedinintegrationcommon.js and press Enter or click the search icon. Select the msdyn_linkedinintegrationcommon.js library from the search results and click “Add.” This library contains the necessary functions, including the one responsible for handling the display of LinkedIn photos. Once added, ensure the library appears in the “Form Libraries” list.

6. Add the Event Handler: Still within the “Events” tab of the “Form Properties” dialog, focus on the “Event Handlers” section, specifically for the “OnLoad” event. The “OnLoad” event triggers when the form finishes loading in the browser. This is the ideal time to execute the script that fetches and displays the photos. Select the “OnLoad” event from the “Event” dropdown if it’s not already selected. Click the “Add” button below the event list. This opens the “Handler Properties” dialog.
   • In the “Library” dropdown, select the msdyn_linkedinintegrationcommon.js library you just added.
   • In the “Function” field, type or paste the exact function name: LinkedInIntegration.LinkedInIntegrationCommon.Instance.Form_OnLoad. Ensure there are no typos.
   • Make sure “Enabled” is checked.
   • Typically, for this specific handler, “Pass execution context as first parameter” should be checked (this is often required for scripts interacting with the form context). Confirm this setting based on standard practices for Dynamics 365 form scripting, but in most cases for Microsoft-provided handlers like this, passing the execution context is necessary.
   • Click “OK” in the “Handler Properties” dialog. The handler LinkedInIntegration.LinkedInIntegrationCommon.Instance.Form_OnLoad from the msdyn_linkedinintegrationcommon.js library should now appear in the list of handlers for the “OnLoad” event.
7. Save and Publish the Form: After adding the library and the event handler, click “OK” in the “Form Properties” dialog to close it. Back in the form editor window, click the “Save” button on the ribbon. This saves the changes you made to the form definition. However, saving only stores the changes; it doesn’t make them live for users. To make the changes available in the Dynamics 365 application, you must click the “Publish” button on the ribbon. Publishing compiles the changes and deploys them to the server, making the updated form accessible to users with the appropriate security roles. It’s good practice to “Publish All Customizations” from the main customization window if you’ve made changes to multiple components, but publishing just the specific form is sufficient for this issue.

After completing these steps and publishing the customizations, users who access the modified custom contact or lead form in the Unified Interface should now see the LinkedIn photos displayed correctly, assuming the LinkedIn integration itself is properly configured and functioning within your Dynamics 365 environment.

Understanding the Components

• msdyn_linkedinintegrationcommon.js Library: This is a JavaScript file developed by Microsoft as part of the LinkedIn Sales Navigator integration or related LinkedIn features. It contains the underlying code necessary to interact with the Dynamics 365 form context, communicate with the LinkedIn integration components, fetch photo URLs or data, and potentially handle the display logic within the form’s photo control. Adding this library makes the functions within it available to be called by the form.
• LinkedInIntegration.LinkedInIntegrationCommon.Instance.Form_OnLoad Function: This is a specific function within the msdyn_linkedinintegrationcommon.js library. It’s designed to be executed when a form loads (OnLoad event). When triggered, this function performs the necessary actions to check for LinkedIn photo availability for the record being viewed and initiates the process to display it on the form, typically targeting the standard photo control associated with Contact or Lead entities.

Potential Troubleshooting Steps If Photos Still Don’t Appear

If you follow the steps above and the photos still aren’t displaying on your custom form, consider these additional troubleshooting steps:

• Clear Browser Cache: Sometimes, old versions of forms or scripts are cached by your web browser. Clear your browser’s cache and cookies, then close and reopen the browser before accessing Dynamics 365 again.
• Verify LinkedIn Integration Configuration: Ensure that the LinkedIn integration (e.g., Sales Navigator) is correctly set up and enabled in your Dynamics 365 environment at the system level. Check that users have the necessary licenses and permissions for the integration.
• Check Field Properties: Ensure that the photo field (the standard image control for Contact or Lead) is present and visible on your custom form. While adding the script enables the logic to display the photo, there still needs to be a place on the form for it to be rendered.
• Security Roles: Confirm that the user viewing the form has the necessary security roles and permissions to access both the Contact/Lead record and any underlying data or configurations related to the LinkedIn integration.
• Check for JavaScript Errors: Use your browser’s developer tools (usually by pressing F12) to check the console for any JavaScript errors when the form loads. Errors related to the msdyn_linkedinintegrationcommon.js library or the Form_OnLoad function could indicate a problem with how it was added or a conflict with other custom scripts.
• Test on a Default Form: If possible, verify that LinkedIn photos do display correctly on the default Contact or Lead form in the same environment and for the same record. This helps isolate whether the issue is specific to the custom form or a broader problem with the integration itself.
• Re-add Components: Occasionally, removing the library and handler and adding them back precisely following the steps can resolve subtle configuration issues.

By adding the msdyn_linkedinintegrationcommon.js library and configuring the LinkedInIntegration.LinkedInIntegrationCommon.Instance.Form_OnLoad function as an OnLoad event handler, you are essentially replicating the behavior found in the default Dynamics 365 forms that enables the display of LinkedIn-sourced photos. This is a common pattern in Dynamics 365 customization where specific functionalities tied to default components need to be manually included when creating custom versions of those components.

mermaid graph TD A[User Opens Custom Form] --> B[Form Starts Loading]; B --> C{OnLoad Event Triggered?}; C -- Yes --> D[Execute OnLoad Event Handlers]; D --> E{msdyn_linkedinintegrationcommon.js Library Loaded?}; E -- Yes --> F{LinkedInIntegration.LinkedInIntegrationCommon.Instance.Form_OnLoad Handler Configured?}; F -- Yes --> G[Execute Form_OnLoad Function]; G --> H[Function Fetches LinkedIn Photo Data]; H --> I[Function Displays Photo on Form]; I --> J[Photo Visible to User]; E -- No --> K[Photo Not Displayed (Library Missing)]; F -- No --> L[Photo Not Displayed (Handler Missing)]; C -- No --> L; % If OnLoad doesn't trigger or is blocked
This diagram illustrates the flow: the OnLoad event triggers the execution of the specified handler from the loaded library, which then performs the necessary steps to display the photo. If either the library or the handler is missing from the custom form’s configuration, the process breaks, and the photo won’t appear.

Restoring photo display on custom forms significantly enhances the usability of Dynamics 365 Sales for users who rely on visual cues provided by the LinkedIn integration. It ensures a consistent and rich data experience regardless of whether they are using default or tailored form layouts. While requiring a manual configuration step during customization, this resolution is straightforward and effectively addresses the discrepancy.

Experiencing issues with form customization or integration features like this is common in complex business applications like Dynamics 365. Have you encountered similar problems with other features not appearing on custom forms? What other customizations have you found require specific libraries or handlers? Share your experiences and insights in the comments below!