Use Case Attach search results to a case record

This section describes how to extend the existing integration by adding a new custom action button Attach To Case for each search result. Triggering this action button will attach the search result to the Case record page. In addition, you will create a new custom lightning component to fetch all the attached results of a visited Case and displays them in a table view.

Step 1 Data modeling via custom objects

In this step, you will create a custom object and add some fields to it. These fields will be displayed when a search result is attached to the case. A field can be considered as a one-to-one map of a search result property.

Example:

If you are interested to show the following search result properties (title, URL, source, and author), then you must create equivalent fields respectively and add them to your custom object.

Later on, we will show you how the mapping between the search result properties and the custom fields is done, then how the lightning component displays those fields in a table view in the case record page.

Please apply the following steps:

• In Salesforce, click on the settings gear icon and choose Edit Object.
• Click Object Manager to view all objects.
• 
• Click Create in the dropdown menu and Select Custom Object.
• 
• Fill in the fields Label and Plural Label. Object Name is set automatically.
• 
• Click Save.
• From the left menu. Click Fields & Relationships.
• Click New.
• Choose a Data Type (e.g. Text) and click Next.
• Enter the fields Field Label and a Length. Field Name is automatically set.
• 
• Click Next, Next, and Save.
• Repeat the same steps to add the remaining fields.

• Create a Master-Detail relationship with the Case standard object:
  • Click Fields & Relationships. Click New.
  • Choose Data Type: Master-Detail Relationship.
  • Select Case from the “Related To” dropdown.
  • Enter a Field Label. (e.g. Case).
  • Click Next, Next, Next, and then Save.
  • Note down the API Name. (e.g. Case__c).
• Delete the default view from the Case layout:
• Return back to object manager list:

• Choose Case.
• From left menu, choose “Case Page Layouts”.
• Choose your layout from the table. (e.g. Case Layout)
• Scroll down until you find the attached Results table.
• Delete it by pressing the minus icon
  
• Click Save.

Step 2 Create an Apex custom controller

Custom controllers contain custom logic and data manipulation that can be used by a Visualforce page. For example, a custom controller can retrieve a list of items to be displayed and can create or delete records of a custom objects.

In this step, you will create the controller AttachResultController, which will do the following:

• Fetch the attached results of a certain case. (Used by the lightning component to display the case attached results in a table view).
• Remove an attached result from a case.
• Attach a result to a Case object. (Fired when the Attach To Case action button is clicked)

Please apply the following steps:

• In Salesforce, click on the settings gear icon and choose Setup.
• Search for and select Apex Classes.
• Click New.
• Add the following code snippet:

public class AttachResultController {

    public AttachResultController(ApexPages.StandardController controller) {

    }

    public String ValueReturned {get; set;}

    public void attachResultToCase() {

      Id caseId = System.currentPageReference().getParameters().get('Id');

      String resultName = ApexPages.currentPage().getParameters().get('resultName');

      String resultUrl = ApexPages.currentPage().getParameters().get('resultUrl');

      String source = ApexPages.currentPage().getParameters().get('source');

      String author = ApexPages.currentPage().getParameters().get('author');  

      List<Attached_Result__c> existingAttachedResults = [

        SELECT Name__c FROM Attached_Result__c

        WHERE Case__r.Id = :caseId AND Name__c = :resultName

      ];

      if (existingAttachedResults.size() > 0) {

         this.ValueReturned = 'duplicate record';  

      } else {

         Attached_Result__c newRec= new Attached_Result__c();

         newRec.Name__c = resultName;

         newRec.Result_Url__c = resultUrl;

         newRec.Author__c = author;

         newRec.Source__c = source;

         newRec.Case__c = caseId;

         insert newRec;

         this.ValueReturned = 'reload component';

      }

    }

    @AuraEnabled

    public static List<Attached_Result__c> getAttachedResults(Id recordId) {

        return [

           SELECT Name__c, Result_Url__c, Source__c, Author__c

           FROM Attached_Result__c

           WHERE Case__r.Id = :recordId

        ];

    }

    @AuraEnabled

    public static boolean removeAttachedResult(Id recordId, String name) {

        delete [

          SELECT Name__c FROM Attached_Result__c

          WHERE Name__c =: name AND Case__r.Id = :recordId

        ];

        return true;

    }

}

Code Highlights:

In the function attachResultToCase, in the else block, you have created a new instance of your custom object created previously and then you mapped the search result properties to the fields of the custom object.

Step 3 Create a new Lightning Component (AttachedResults)

• In this step, you will create a Lightning Component which will be added to the Salesforce Case page. The component displays the fields of the custom object created in the step 1.

Please apply the following steps:

1. In Salesforce, click the gear icon then select Developer Console.
2. In the developer console, select File > New > Lightning Component.
3. Name the component AttachedResults, select Lightning Record Page, and select Submit.
4. Replace the contents of the component with this code:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="AttachResultController">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <aura:attribute name="recordId" type="Id" />

    <aura:attribute name="AttachedResults" type="Attached_Result__c"/>

    <aura:attribute name="AttachedResultsCount" type="String" />

    <aura:attribute name="Columns" type="List" />

    <lightning:card class="slds-card_boundary" iconName="standard:case" title="{! 'Case Attached Results (' + v.AttachedResultsCount + ')' }">

        <!-- Attached Results list goes here -->

        <lightning:datatable data="{! v.AttachedResults }"

                             class="tableHeader"

                             columns="{! v.Columns }"

                             keyField="Id"

                             hideCheckboxColumn="true"

                             onrowaction="{! c.handleRowAction }"

                             wrapTextMaxLines="1" />

    </lightning:card>  

</aura:component>

1. Click File > Save.
2. Click CONTROLLER in the component palette on the right and replace the contents with this code:

({

   doInit : function(component, event, helper) {

      window.addEventListener("message", $A.getCallback(function(event) {

         if (event.data === 'reloadComponent') {

           helper.renderResults(component);

         }

      }), false);

      var rowActions = [{

         'label': 'Delete',

         'iconName': 'utility:delete',

         'name': 'delete'

      }];

      component.set("v.Columns", [

        {label:"Result Name", fieldName:"Name__c", type:"text", wrapText: true},

        {label:"Result Url", fieldName:"Result_Url__c", type:"url", wrapText: true},

        {label:"Source", fieldName:"Source__c", type:"text", wrapText: true},

        {label:"Author", fieldName:"Author__c", type:"text", wrapText: true},

        {type: 'action', typeAttributes: { rowActions: rowActions }}

      ]);

      helper.renderResults(component);

   },

   handleRowAction: function (cmp, event, helper) {

      var action = event.getParam('action');

      var row = event.getParam('row');

      switch (action.name) {

         case 'delete':

           helper.removeResult(cmp, row);

           break;

      }

   }

})

1. Click File > Save.
2. Click HELPER in the component palette on the right and replace the contents with this code:

({

    renderResults: function(component) {        

      var action = component.get("c.getAttachedResults");

        if (action) {

            action.setParams({

                recordId: component.get("v.recordId")

            });

            action.setCallback(this, function(response) {

              var state = response.getState();

              if (state === "SUCCESS") {

                 var data = response.getReturnValue();

                 component.set("v.AttachedResultsCount", data.length);

                 component.set("v.AttachedResults", data);

              }

            });    

            $A.enqueueAction(action);  

        }

    },

    removeResult: function (cmp, row) {

        var action = cmp.get("c.removeAttachedResult");    

        if (action) {

         action.setParams({

                recordId: cmp.get("v.recordId"),

                name: row.Name__c

            });

            action.setCallback(this, function(response) {

              var state = response.getState();

              if (state === "SUCCESS") {

                var rows = cmp.get('v.AttachedResults');

                var rowIndex = rows.indexOf(row);

                rows.splice(rowIndex, 1);

                cmp.set('v.AttachedResults', rows);

                cmp.set('v.AttachedResultsCount', rows.length);

              }

            });

            $A.enqueueAction(action);  

        }

    }

})

1. Click File > Save.
2. Click STYLE in the component palette on the right and replace the contents with this code:

.THIS .tableHeader thead th button {

    visibility: hidden;

    display: none;

}

.THIS {

    margin-bottom: 10px;

}

.THIS div.slds-card__header {

    border-bottom: var(--lwc-borderWidthThin) solid var(--lwc-cardColorBorder);

    padding: 8px !important;

    background: var(--lwc-pageHeaderColorBackground,rgb(243, 242, 242));

}

.THIS div.slds-card__body {

    margin-top: -8px;                  

}

1. Click File > Save.
2. Add the component to the Case page the same way as described in this section: Lightning App Builder to add components

Step 4 Add a new custom action button: Attach to Case

In this step, the action button Attach To Case will be added to each search results. In addition, you will add the handler function which is fire when the action button is triggered.

Please apply the following steps:

1. In Salesforce, click the gear icon then select Setup.
2. Search for and select Visualforce pages.
3. Choose the existing VF page. (In our example, Mindbreeze_search_page)
4. Click on Edit.
5. In the Visualforce Markup:
   1. Add the extension AttachedResultController to the VF page.
      Code Before:
      <apex:page standardController="Case">
      
      Code After:
      <apex:page standardController="Case" extensions="AttachResultController">

1. Add the Apex handler function:
   
   Code Before:
   <script>
      Mindbreeze.require(["client/application"], function(Application){
         var subject = "{! Case.Subject }";
         var App = Application.extend({
             prepareModels: function() {
                this.setUnparsedUserQuery(subject);
             }
          });
          var application = new App();
      });
   </script>
   
   Code After:
   <script>
      Mindbreeze.require(["client/application"], function(Application){
         var subject = "{! Case.Subject }";
         var App = Application.extend({
             prepareModels: function() {
                this.setUnparsedUserQuery(subject);
             }
          });
          var application = new App();
      });
   </script>
   
   <script>
       function handleAttachCaseAction(returnValue) {
           if (returnValue === "duplicate record") {
              alert("This result is already attached to the current case: {!Case.CaseNumber}");
           } else if (returnValue === "reload component") {
              var lexOrigin = 'https://<salesforce-page>.lightning.force.com';
              parent.postMessage('reloadComponent', lexOrigin);
           }
       }
   </script>
   <apex:form >
         <apex:actionFunction name="AttachToCase" action="{!attachResultToCase}" oncomplete="handleAttachCaseAction('{!ValueReturned}')">
             <apex:param name="resultName" value="" />
             <apex:param name="resultUrl" value="" />
             <apex:param name="source" value="" />
             <apex:param name="author" value="" />
         </apex:actionFunction>
   </apex:form>

1. Add the action button Attach To Case & attachResult handler function:
   
   Code Before:
   <script>
     Mindbreeze.require(["client/application”], function(Application) {
           var subject = "{! Case.Subject }";
           var App = Application.extend({
                 prepareModels: function() {
                     this.setUnparsedUserQuery(subject);
                 }
           });
           var application = new App();
        });
   </script>
   
   Code After:
   <script>
   Mindbreeze.require(["client/application", "api/v2/api", "underscore"], function(Application, API, _) {
   var subject = "{! Case.Subject }";
   var App = Application.extend({
      prepareModels: function() {
       this.setUnparsedUserQuery(subject);
      },
      attachResult: function(options) {
        var model = options.model;
        var actions = model.get("actions");
        var resultName = model.get()["title"].data[0].value;
        var source = model.get('category') + '/' + model.get('categoryinstance');
        var author = model.get('Author') || 'N/A';
        var openAction = _.find(actions, function(action) {
           return action.id == "Open";
        });
        if(!openAction) {
          openAction = _.find(actions, function(action) {
            return action.href;
          });
        }
        if(openAction && openAction.href.length > 255) {
          openAction.href = 'Result URL is too long';
        }
        /* Passing result to controller */
        AttachToCase(resultName, openAction.href, source, author);
      }
   });
   var application = new App();
   API.search.on("loadoutput", function(model, atts, options) {
     if((atts && atts.resultset && atts.resultset.results) || (atts && atts.results)) {
      _.each((atts.resultset&&atts.resultset.results)||atts.results,function(result){      
        var actionName = "attachToCase";
        var htmlAction = "<a role=\"button\" data-action-name=\"attachResult\">Attach to Case</a>";
        result.properties.actions && result.properties.actions.data &&
        result.properties.actions.data.push({
           "html": htmlAction,
           "value": {
             "action":{ actionName:{} }
           }
        });
        result.properties.actions && result.properties.actions.properties &&
        result.properties.actions.properties.push({
           "id": actionName,
           "name": actionName,
           "data": [{
             "html": htmlAction,
             "value": {
               "action":{ actionName: {} }
             }
           }]
        });
      });
     }
   });
   });
   </script>

Click Save and return back to any Case page.

In the search results, you will see the new custom action button:

Click on the Attach To Case button and the search result will be displayed in a table view:

Troubleshooting

Salesforce field limitations

Example: Result URL field has a maximum length of 255 characters

If a link is longer than 255 characters, an error occurs.

Workaround: Display instead a string “Result Url is too long”

How?

In your VF page, at the Mindbreeze require <script> tag, at the attachResult function, add the following yellow highlighted code:

<script>

Mindbreeze.require(["client/application", "api/v2/api", "underscore"], function(Application, API, _) {

var subject = "{! Case.Subject }";

var App = Application.extend({

   prepareModels: function() {

    this.setUnparsedUserQuery(subject);

   },

   attachResult: function(options) {

     var model = options.model;

     var actions = model.get("actions");

     var filename = model.get()["title"].data[0].value;

     var source = model.get('category') + '/' + model.get('categoryinstance');

     var author = model.get('Author') || 'N/A';

     var openAction = _.find(actions, function(action) {

        return action.id == "Open";

     });

     if(!openAction) {

       openAction = _.find(actions, function(action) {

         return action.href;

       });

     }

     if(openAction && openAction.href.length > 255) {

    openAction.href = 'Result URL is too long';

     }        

     /* Passing result to controller */

     AttachToCase(filename, openAction.href, source, author);

   }

});

var application = new App();

});

</script>

How to request search results properties from the Mindbreeze search model

Example below requests the Author and extension properties:  

First, in your Insight App snippet, add the following html:  

<span style="display:none">{{Author}}{{extension}}</span>

And then in the attach result function at the <script> tag:

var author = model.get('Author') || 'N/A';

var extension = model.get('extension');

Clear button (x) in the search bar is not working

In the browser console (F12), you see the following error:

Uncaught SyntaxError: Unexpected token & in JSON at position 2

Solution:

In the VF page, in your html code snippet of your search app replace the following code:
data-action-object="{&quot;resetSearch&quot;:{}}"

with
data-action-object='{"resetSearch":{}}'