Create custom actions for a Coveo Insight Panel Classic Component or a custom Box

This is for:

Developer System Administrator

Salesforce Classic

Deprecated

When creating a Coveo Insight Panel Classic Component, you might want to create custom actions, outside of the default Quick View and Attach to Case functions. You can, for example, add a button to attach a result to an email, insert a result in case feed, or create a Knowledge Base article from a result.

This page outlines the leading practices on how to create a custom action. For explicit tutorials on the previously mentioned use cases, see Examples.

Coveo for Salesforce search result card with buttons: Detach, Insert into feed, Email this article, and Create KB from result

Requirements

Note

While this page only refers to the Coveo Insight Panel Classic Component, the same procedure applies to a Custom Box.

Step 1: Add code to your custom Coveo Insight Panel Classic Component

To add the code that must be executed when clicking your custom action

  1. Access the Visualforce Page of your Coveo Insight Panel Classic Component.

    1. In Setup, search for and select Visualforce Pages.

    2. Next to your custom Coveo Insight Panel Classic Component, select Edit.

      Note

      You’re encouraged to create a custom Coveo Insight Panel Classic Component in which to insert your code (see Create a custom Coveo Insight Panel Classic Component).

  2. In the Visualforce Markup tab, inside the apex:page, add a script element.

  3. Inside the script element, add the following code. Modify the sections that you want to fit your needs.

     // Make sure you use a unique name for each action you implement. Here, it's 'MyCustomAction'
 var MyCustomAction = function(element, options, bindings, result) {
     this.type = 'MyCustomAction'; // <------------- Change this if you change the name
     Coveo.Component.bindComponentToElement(element, this);
     this.element = element;
     this.options = options;
     this.bindings = bindings;
     this.result = result;
 };
     __extends(MyCustomAction, Coveo.Component); // <------------- Change this if you change the name, as well as on the following line
 MyCustomAction.prototype.getTitle = function () {
     // Here you implement your template on how you want the component to appear.
     var menuDiv = $('<div class="coveo-insert-comment"><div class="coveo-sprites-common-tagging_tag"></div><div class="coveo-caption">Some Text</div></div>'); // <------------- 'Some Text' is the text that you want to be shown
     var _this = this;
     menuDiv.click(function() {
         //
         // ----------------------------------------------------------------------------
         // Your Custom code goes here, you can reference the result using, _this.result
         // example:
         console.log(JSON.stringify(_this.result));
         // -----------------------------------------------------------------------------
         //
     });
     return menuDiv.get(0);
 };
 MyCustomAction.ID = 'MyCustomAction'; // <------------- Change this if you change the name
 Coveo.CoveoJQuery.registerAutoCreateComponent(MyCustomAction); // <------------- Change this if you change the name

  4. After modifying the template and adding your desired code, save the page by clicking Save.

Step 2: Display the action button in the template

To display your custom action

  1. Access the code of your Coveo Insight Panel Classic Component.

    1. Access the code through the Visualforce component:

      1. In Setup, search for and access the Visualforce Components page.

      2. Find the search page you want to change, and under Actions, select Edit.

        OR

    2. Access the code through the Interface Editor:

      1. In your Console, access a page that includes the Coveo Insight Panel Classic Component.

      2. Inside the panel, select Customize Panel.

      3. In the Interface Editor, select the Code View tab at the top right.

  2. Locate the <div class="CoveoBoxResultAction"> section of the result template you want to add the custom action to.

  3. Inside this <div>, add a new <div> with a class equal to Coveo followed by the name of your custom action.

    Example

    In the previous step, your action was called MyCustomAction. Inside the <div class="CoveoBoxResultAction"> element, you add the following div:

     <div class="CoveoMyCustomAction"></div>

  4. Repeat these steps for every result template that should have present your custom action.

  5. Save your modifications by clicking Save. Your custom action is now ready to be used.

Examples

Here are some specific use cases for custom actions. Feel free to adapt and integrate them in your installations.

Action: Send Email

This action creates a Salesforce email and attaches a link to the selected result.

Coveo for Salesforce Send Email action dialog displaying drafted support email with formatting toolbar
Important
Important

For this action to work, the Email-to-Case functionality must be enabled (see Enable and Configure Email-to-Case).

  1. When adding script to your Visualforce Page, add the following line before the script element.

     <apex:includeScript value="/canvas/sdk/js/publisher.js" />

  2. In your script element, add the following code:

     var MyCustomEmail = function(element, options, bindings, result) {
   this.type = 'MyCustomEmail';
   Coveo.Component.bindComponentToElement(element, this);
   this.element = element;
   this.options = options;
   this.bindings = bindings;
   this.result = result;
 };
  __extends(MyCustomEmail, Coveo.Component);
 MyCustomEmail.prototype.getTitle = function () {
     var menuDiv = $('<div class="coveo-insert-comment"><div class="coveo-sprites-facet-email_sendto"></div><div class="coveo-caption">Email this article</div></div>'); // Change the caption to display here
     var _this = this;
     menuDiv.click(function() {
       // Change the body of the email to display your custom message
       var body = 'Hi,<br/>'+ 'This article from our Knowledge Base might help you:<br/>'+'<br/><a href="' + _this.result.clickUri.split(' ').join('%20') + '">'+_this.result.title+'</a><br><br>Regards<br>Ramiro Reeves, Product Specialist at BestTech';
       Sfdc.canvas.publisher.publish({name: "publisher.selectAction", payload: {actionName:"Case.Email"}});
       Sfdc.canvas.publisher.publish({name: "publisher.setActionInputValues", payload:{actionName:"Case.Email", emailFields: {subject: {value: 'This article might help you'}, body: {value:body}}}});
     });
     return menuDiv.get(0);
 };
 MyCustomEmail.ID = 'MyCustomEmail';
 Coveo.CoveoJQuery.registerAutoCreateComponent(MyCustomEmail);

  3. When adding your div element in your CoveoBoxResultAction div of your result template, ensure that you give it the CoveoMyCustomEmail class, as such:

     <div class="CoveoBoxResultAction">
   <div class="CoveoMyCustomEmail"></div>
 </div>
Case feed panel showing Coveo results with Insert into feed action button selected

Action: Insert into Case Feed

This action inserts a result link into the case feed comments.

Coveo result link to Dropbox doc Troubleshooting Netflix Network Issues added in Salesforce Case Feed with Post Answer and Remove Answer buttons

  1. When adding script to your Visualforce Page, add the following line before the script element.

     <apex:includeScript value="/canvas/sdk/js/publisher.js" />

  2. In your script element, add the following code:

     var MyCustomInsertIntoFeed = function(element, options, bindings, result) {
   this.type = 'MyCustomInsertIntoFeed';
   Coveo.Component.bindComponentToElement(element, this);
   this.element = element;
   this.options = options;
   this.bindings = bindings;
   this.result = result;
 };
  __extends(MyCustomInsertIntoFeed, Coveo.Component);
 MyCustomInsertIntoFeed.prototype.getTitle = function () {
     var menuDiv = $('<div class="coveo-insert-comment"><div class="coveo-sprites-common-tagging_tag"></div><div class="coveo-caption">Insert into feed</div></div>'); // Change the caption to display here
     var _this = this;
     menuDiv.click(function() {
         // You can add things to display alongside the result link here
         var body = _this.result.title + '\n' + _this.result.clickUri.split(' ').join('%20');
         Sfdc.canvas.publisher.publish({name: "publisher.selectAction", payload: {actionName:"Case.CaseComment"}});
         Sfdc.canvas.publisher.publish({name: "publisher.setActionInputValues", payload:{actionName:"Case.CaseComment", portalPostFields: {body: {value: body}, sendEmail: {value:false}}}});
         Sfdc.canvas.publisher.publish({name: 'publisher.refresh', payload : {feed: {value: true}}});
     });
     return menuDiv.get(0);
 };
 MyCustomInsertIntoFeed.ID = 'MyCustomInsertIntoFeed';
 Coveo.CoveoJQuery.registerAutoCreateComponent(MyCustomInsertIntoFeed);

  3. When adding your div element in your CoveoBoxResultAction div of your result template, ensure that you give it the CoveoMyCustomInsertIntoFeed class, as such:

     <div class="CoveoBoxResultAction">
   <div class="CoveoMyCustomInsertIntoFeed"></div>
 </div>
Coveo search results listing Netflix support articles with Insert into feed button displayed

Action: Create a Salesforce KB article

Coveo for Salesforce 2.25

A new Create Article button is now available out of the box. To learn how to implement it in your Salesforce integration, see Adding a "Create Article" Button to the Coveo Insight Panel Classic Component.

This action creates a Salesforce KB article from a result.

Salesforce Knowledge article draft opened after clicking Coveo Create Article button

  1. When adding script to your Visualforce Page, add the following line before the script element.

     <apex:includeScript value="/soap/ajax/39.0/connection.js"/>

  2. In your script element, add the following code:

     sforce.connection.sessionId='{!GETSESSIONID()}'; // This needs to be added to create objects since Spring '16

 var MyCustomCreateKB = function(element, options, bindings, result) {
   this.type = 'MyCustomCreateKB';
   Coveo.Component.bindComponentToElement(element, this);
   this.element = element;
   this.options = options;
   this.bindings = bindings;
   this.result = result;
 };
  __extends(MyCustomCreateKB, Coveo.Component);
 MyCustomCreateKB.prototype.getTitle = function () {
     var menuDiv = $('<div class="coveo-insert-comment"><div class="coveo-sprites-common-copy"></div><div class="coveo-caption">Create KB from result</div></div>'); // Change the caption to display here
     var _this = this;
     menuDiv.click(function() {
       var kb = new sforce.SObject('Troubleshooting__kav'); // Change 'Troubleshooting' to your KB type
       kb.Summary = '{!JSENCODE(case.Description)}';
       kb.Title = '{!JSENCODE(case.Subject)}';
       kb.URLName = '{!JSENCODE(case.Subject)}'.replace(/\s+/g, '-').replace(/[^a-zA-Z-0-9\-]/g, '') +'-'+ (Math.random() * 100000 + '').replace('.', '-');
       var createResult = sforce.connection.create([kb]);
       if (createResult[0].getBoolean("success")) {
         openSubTab('/' + createResult[0].id, kb.Title);
         menuDiv.addClass('hidden')
       } else {
         console.log('Failed creating custom KB',createResult);
       }
     });
     return menuDiv.get(0);
 };
 MyCustomCreateKB.ID = 'MyCustomCreateKB';
 Coveo.CoveoJQuery.registerAutoCreateComponent(MyCustomCreateKB);
 function openSubTab(url, title) {
   sforce.console.getEnclosingPrimaryTabId(function (result) {
     sforce.console.openSubtab(result.id, url, true, title);
   });
 }

  3. When adding your div element in your CoveoBoxResultAction div of your result template, ensure that you give it the CoveoMyCustomCreateKB class, as such:

     <div class="CoveoBoxResultAction">
   <div class="CoveoMyCustomCreateKB"></div>
 </div>
    Create KB from result custom action | Coveo for Salesforce