Step 2: Embed the Hierarchy Explorer widget

AD

The Hierarchy Explorer widget can be embedded into the following applications:

  • Network Portal - To add the widget to an application for the Network Portal, see the Network Portal topics.

  • Internal application - Saving the widget generates the code that you can use to embed the Hierarchy Explorer widget in your internal application.

    Note: Generate the code any time you make changes to the widget configuration.

    See the Network Widgets topics in the Veeva Network API Reference. Use the "Affiliation widget" topic as a guide.

  • Veeva CRM Online - The widget can be used in your Veeva CRM Online application.

Embedding the widget in internal applications

After administrators save the Hierarchy Explorer widget configuration, Network generates the code snippets that are required for your web-based internal application. Click Generate Code to copy the code so you can provide it to your web developer.

The process for embedding the widget is similar to the Search Widget and Profile Widget. There are no events that need to be defined for the Hierarchy Explorer widget.

For more information, review the Network Widgets documentation in the Veeva Network Developer Online Help: https://developer.veevanetwork.com/.

Integrating widgets without single sign-on

To allow your users to test the widget without using single sign-on, the widget can be configured to use demo mode. For details about the configuration, see https://developer.veevanetwork.com/widgets/.

Demo mode is available in Sandbox instances only.

To enable demo mode for the widget, contact Veeva Support.

Embed the widget in Veeva CRM Online

The Hierarchy Explorer widget can be used in your Veeva CRM Online application.

To add the widget to Veeva CRM, see Embed the widget in Veeva CRM Online in the Veeva Network API Reference.

Note: If you are embedding the widget into Salesforce Lightning, add the following property to the generated widget code: application-type="SALESFORCE_LIGHTNING".

Requirements

Single sign-on must be enabled in Network.

For details, see Enable single sign-on for widgets.

Embedding the Hierarchy Explorer Widget in Salesforce Lightning

This visualforce page can be used to embed the widget into Salesforce Lightning.

To embed the widget:

  1. Create a Visualforce page.

    For instructions, see the Salesforce™ documentation: https://help.salesforce.com/articleView?id=pages_creating.htm&type=5.

    These Visualforce pages for Salesforce Lightning or Salesforce Classic can be used as a template.

    Notes:

    • The page references Sandbox scripts. To point to the Production scripts, remove "sandbox".
    • Update the widget snippet with your own generated code.

    Sample page for Salesforce Lightning 

    <apex:page >
   <!-- Include the script to load widget -->
   <script type="text/javascript" src="https://sandboxwidgets.veevanetwork.com/veeva-network-manifest.js"></script>
   <script type="text/javascript" src="https://sandboxwidgets.veevanetwork.com/veeva-network-hierarchy-explorer-widget-loader.js"></script>
   <style>
      html, body {
      width: 100%;
      height: 100%;
      padding-left: 0px;
      }
      #widgetContainer {
      width: 100%;
      height: 100%;
      }
      #widgetEl {
      width: 100%;
      height: 100%;
      margin-top: -10px;
      margin-left: -20px;
      }
   </style>
   <body>
      <div id="widgetContainer">
         <veeva-network-hierarchy-explorer-widget
            widget-name="HierarchyWidget"
            auth-domain="my.veevanetwork.com"
            widget-id="MzA3OzC7aGllcmFyY2h5d2XkZ2V0X19j"
            application-type="SALESFORCE_LIGHTNING"
            id="widgetEl"></veeva-network-hierarchy-explorer-widget>
      </div>
   </body>
</apex:page>

  2. Create a Visualforce tab.

    Follow the steps in the Salesforce documentation: https://help.salesforce.com/articleView?id=pages_tabs_create.htm&type=5.

Enable full screen mode

To support full screen mode in Salesforce Lightning, Web developers can add a property to the generated Hierarchy Explorer widget code that is embedded in your internal application.

Property

full-screen-mode="true"

Example code

Add the property to the end of the generated code.

<veeva-network-hierarchy-explorer-widget
    widget-name="HierarchyWidget" 
    auth-domain="my.veevanetwork.com" 
    widget-id="MzA3OzC7aGllcmFyY2h5d2XkZ2V0X19j"
    full-screen-mode="true">
</veeva-network-hierarchy-explorer-widget>