--- title: Create custom actions for a Coveo Insight Panel Classic Component or a custom Box (Deprecated) slug: '1079' canonical_url: https://docs.coveo.com/en/1079/ collection: coveo-for-salesforce source_format: adoc --- # Create custom actions for a Coveo Insight Panel Classic Component or a custom Box (Deprecated) [.version.no-link.classic] Salesforce Classic > **Deprecated** > > This feature is still available, but no longer supported as of the August 2023 release of Coveo for Salesforce version [5.2](https://docs.coveo.com/en/n5bj0150#august-2023-release-v5-2-initial-release). 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](#examples). !["Coveo for Salesforce search result card with buttons: Detach](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/attachments/36636312/37094993.png) ## Requirements * You've [installed the Coveo for Salesforce package](https://docs.coveo.com/en/1102/) in your Salesforce integration. * You've created a [Coveo Insight Panel Classic Component](https://docs.coveo.com/en/1300/) or a [custom Coveo Box](https://docs.coveo.com/en/1068/). > **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 . Access the Visualforce Page of your Coveo Insight Panel Classic Component. .. In **Setup**, search for and select **Visualforce Pages**. .. 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](https://docs.coveo.com/en/1300/)). . On the **Visualforce Markup** tab, inside the `apex:page`, add a `script` element. . Inside the `script` element, add the following code. Modify the sections that you want to fit your needs. ```javascript // 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 = $('
Some Text
'); // <------------- '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 ``` . 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 . Access the code of your Coveo Insight Panel Classic Component. .. Access the code through the Visualforce component: ... In **Setup**, search for and access the **Visualforce Components** page. ... Find the search page you want to change, and under **Actions**, select **Edit**. OR .. Access the code through the Interface Editor: ... In your Console, access a page that includes the Coveo Insight Panel Classic Component. ... Inside the panel, select **Customize Panel**. ... In the Interface Editor, select the **Code View** tab at the top right. . Locate the `
` section of the result template you want to add the custom action to. . Inside this `
`, add a new `
` 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 `
` element, you add the following div: ```xml
``` . Repeat these steps for every result template that should have present your custom action. . 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](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/attachments/36636312/37094989.png) > **Important** > > For this action to work, the Email-to-Case functionality must be enabled (see [Enable and Configure Email-to-Case](https://help.salesforce.com/articleView?id=customizesupport_enabling_email_to_case.htm&type=5)). . When adding script to your Visualforce Page, add the following line before the `script` element. ```xml ``` . In your `script` element, add the following code: ```javascript 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 = $('
Email this article
'); // 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,
'+ 'This article from our Knowledge Base might help you:
'+'
'+_this.result.title+'

Regards
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); ``` . When adding your `div` element in your `CoveoBoxResultAction` div of your result template, ensure that you give it the `CoveoMyCustomEmail` class, as such: ```xml
``` ![Case feed panel showing Coveo results with Insert into feed action button selected](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/attachments/36636312/37094984.png) ### 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](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/attachments/36636312/37094991.png) . When adding script to your Visualforce Page, add the following line before the `script` element. ```xml ``` . In your `script` element, add the following code: ```javascript 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 = $('
Insert into feed
'); // 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); ``` . When adding your `div` element in your `CoveoBoxResultAction` div of your result template, ensure that you give it the `CoveoMyCustomInsertIntoFeed` class, as such: ```xml
``` ![Coveo search results listing Netflix support articles with Insert into feed button displayed](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/attachments/36636312/37094982.png) ### Action: Create a Salesforce KB article > **Available since** > > This feature was introduced in the July 2016 release of Coveo for Salesforce version [2.25](https://docs.coveo.com/en/1124#july-2016-release-v225). 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](https://docs.coveo.com/en/1305/). This action creates a Salesforce KB article from a result. ![Salesforce Knowledge article draft opened after clicking Coveo Create Article button](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/attachments/36636312/37094988.png) . When adding script to your Visualforce Page, add the following line before the `script` element. ```xml ``` . In your `script` element, add the following code: ```javascript 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 = $('
Create KB from result
'); // 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); }); } ``` . When adding your `div` element in your `CoveoBoxResultAction` div of your result template, ensure that you give it the `CoveoMyCustomCreateKB` class, as such: ```xml
``` ![Create KB from result custom action | Coveo for Salesforce](https://docs.coveo.com/en/assets/images/coveo-for-salesforce/attachments/36636312/37094983.png)