Adding a Coveo-Powered Search Page

You can now add a Coveo-powered search page to your Microsoft Dynamics 365 for Customer Engagement portal. The instructions in this page require you to have completed the previous steps of the deployment process (see Deploying Coveo for Microsoft Dynamics 365 in a Portal).

Adding the Search Interface Web Template

In Microsoft Dynamics 365, create a new web template (see Store source content by using web templates):

  1. In the Name box, enter Coveo-Powered Search Page - Search Interface.

  2. In the Website menu, select your portal.

  3. In the Source box, enter the following script, which defines the structure of the search interface:

     <div id="coveo-search-interface" class='CoveoSearchInterface' data-enable-history="true">
         <div class="CoveoAnalytics" data-search-hub="PortalSearchPage" data-endpoint="{{ settings['Coveo/UsageAnalyticsUrl'] | default:'' }}"></div>
         <div class="coveo-tab-section">
             <a class="CoveoTab" data-id="All" data-caption="All Content"></a>
         </div>
         <div class='coveo-search-section'>
             <div class="CoveoSettings"></div>
             <div class="CoveoSearchbox" data-enable-omnibox="true"></div>
         </div>
         <div class="coveo-main-section">
             <div class="coveo-facet-column">
                 <div class="CoveoFacet" data-title="Type" data-field="@objecttype" data-tab="All"></div>
                 <div class="CoveoFacet" data-title="FileType" data-field="@filetype" data-tab="All"></div>
                 <div class="CoveoFacet" data-title="Author" data-field="@author" data-tab="All"></div>
                 <div class="CoveoFacet" data-title="Year" data-field="@year" data-tab="All"></div>
                 <div class="CoveoFacet" data-title="Month" data-field="@month" data-tab="All"></div>
             </div>
             <div class="coveo-results-column">
                 <div class="CoveoShareQuery"></div>
                 <div class="CoveoExportToExcel"></div>
                 <div class="CoveoPreferencesPanel">
                     <div class="CoveoResultsPreferences"></div>
                     <div class="CoveoResultsFiltersPreferences"></div>
                 </div>
                 <div class="CoveoBreadcrumb"></div>
                 <div class="coveo-results-header">
                     <div class="coveo-summary-section">
                         <span class="CoveoQuerySummary"></span>
                         <span class="CoveoQueryDuration"></span>
                     </div>
                     <div class="coveo-result-layout-section">
                         <span class="CoveoResultLayout"></span>
                     </div>
                     <div class="coveo-sort-section">
                         <span class="CoveoSort" data-sort-criteria="relevancy" data-caption="Relevance"></span>
                         <span class="CoveoSort" data-sort-criteria="date descending,date ascending" data-caption="Date"></span>
                     </div>
                 </div>
                 <div class="CoveoHiddenQuery"></div>
                 <div class="CoveoDidYouMean"></div>
                 <div class="CoveoErrorReport"></div>
                 <div class="CoveoResultList" data-layout="list" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
                 <div class="CoveoResultList" data-layout="card" data-wait-animation="fade" data-auto-select-fields-to-include="true"></div>
                 <div class="CoveoPager"></div>
                 <div class="CoveoLogo"></div>
                 <div class="CoveoResultsPerPage"></div>
             </div>
         </div>
     </div>
    

    The CoveoAnalytics component sends usage data to Coveo Cloud. You can use this information to evaluate how users are interacting with your search interface, improve relevance, and create analytics dashboards within the Coveo Cloud Administration Console (see Creating Usage Analytics Dashboards.

    The markup configuration data-search-hub:'PortalSearchPage' specifies a descriptive name for the search hub (see searchHub).

  4. In the Action bar, click Save and close.

Alternative: Create a New Search Interface

Alternatively, instead of copying the sample code above, you might want to create your own search interface template (see Editing Search Result Templates, Editing a Search Page, and Code View).

  1. Once you have created a search page, follow the first two steps of the Adding the Search Interface Web Template procedure.

  2. In the Source box, paste the HTML of the search interface that you just created, replacing any content defined previously for this field.

  3. In the root HTML tag <div id="search" class='CoveoSearchInterface'...>, rename id="search" to id="coveo-search-interface".

By default, the ID of the root HTML tag of a Coveo-powered search page is search, as in <div id="search" class='CoveoSearchInterface'...>. However, this is also the same ID used by the portal search feature. Renaming this ID after pasting the code in the Source box will prevent your portal from inconsistent behaviors due to an eventual conflict of identifiers.

Adding a Search Page Web Template

Create a resource defining the main Coveo-powered search interface of the portal.

In Microsoft Dynamics 365, create a new web template (see Store source content by using web templates):

  1. In the Name box, enter Coveo-Powered Search Page.

  2. In the Website menu, select your portal.

  3. In the Source box, enter the following script, which initializes the search interface.

     <script>
         {% assign apikey = settings['Coveo/ApiKey'] | default:'' %}
         {% assign organizationId = settings['Coveo/OrganizationId'] | default:'' %}
         {% assign platformUri = settings['Coveo/PlatformUrl'] | default:'' %}
         document.addEventListener('DOMContentLoaded', function() {
             Coveo.SearchEndpoint.configureCloudV2Endpoint('{{organizationId}}', '{{apikey}}', '{{platformUri}}rest/search');
             // Gets the root HTML tag of the Coveo-powered search page interface.
             let root = document.getElementById("coveo-search-interface");
             Coveo.init(root);
         });
     </script>
     {% include 'Coveo-Powered Search Page - Search Interface' %}
    
  4. In the action bar, click Save and close.

The Coveo-Powered Search Page - Search Interface imports the search page code that you created at Adding the Search Interface Web Template. This provides your portal with the search interface to display.

Ensure that the web template name provided in the include tag matches the name you entered when you created the search interface.

Adding a Page Template for Coveo-Powered Search Page

In Microsoft Dynamics 365, create a new page template (see Manage page templates):

  1. In the Name box, enter Coveo-Powered Search Page.

  2. In the Website menu, select your portal.

  3. In the Type menu, select Web Template.

  4. In the Web Template menu, select the Coveo-Powered Search Page template you created before (see Adding a Search Page Web Template).

  5. Select the Use Website Header and Footer check box.

  6. In the action bar, click Save and close.

Adding the Search Page

In Microsoft Dynamics 365, create a new web page (see Manage web pages in Microsoft Dynamics 365):

  1. In the Name box, enter Coveo-Powered Search Page.

  2. In the Website menu, select your portal.

  3. In the Parent Page box, select your portal home page.

  4. In the Partial URL box, enter coveo.

  5. In the Page Template box, select your Coveo-Powered Search Page.

  6. In the Publishing State box, select Published.

  7. In the action bar, click Save and close.

  8. Navigate to [Your portal base URL]/coveo and validate that the search page works.

What’s Next?

Proceed to the next step of the deployment process (see Replacing the Portal Search Box and Deploying Coveo for Microsoft Dynamics 365 in a Portal).

Recommended Articles