Anwendungsfall: Anhängen von Suchergebnisse an einem case record

In diesem Abschnitt wird beschrieben, wie Sie die bestehende Integration erweitern können, indem Sie eine neue benutzerdefinierte Aktionsschaltfläche Attach To Case für jedes Suchergebnis hinzufügen. Wenn diese Aktionsschaltfläche geklickt wird, wird das Suchergebnis an die Case record page hinzugefügt. Außerdem werden Sie eine neue benutzerdefinierte Lightning-Komponente erstellen, die alle angehängten Ergebnisse eines besuchten Case abruft und sie in einer Tabellenansicht anzeigt.

Schritt 1 Datenmodellierung via benutzerdefinierte Objekte

In diesem Schritt werden Sie ein benutzerdefiniertes Objekt erstellen und darin einige Felder hinzufügen. Diese Felder werden angezeigt, wenn ein Suchergebnis an den case angehängt wird. Ein Feld kann als eine Eins-zu-Eins-Abbildung einer Suchergebniseigenschaft betrachtet werden.

Beispiel:

Wenn Sie daran interessiert sind, die folgenden Eigenschaften der Suchergebnisse anzuzeigen (title, URL, source, and author), dann müssen Sie entsprechende Felder erstellen und sie zu Ihrem benutzerdefinierten Objekt hinzufügen.

Später wird gezeigt, wie die Zuordnung zwischen den Eigenschaften der Suchergebnisse und den benutzerdefinierten Feldern erfolgt und wie die Lightning-Komponente diese Felder in einer Tabellenansicht in der case record page anzeigt.

Befolgen Sie bitte folgende Schritte:

• In Salesforce, Klicken Sie auf das Zahnradsymbol und wählen Sie Edit Object.
• Klicken Sie auf Object Manager um alle Objekte anzuzeigen.
• 
• Klicken Sie auf Create im dropdown Menü und wählen Sie Custom Object aus.
• 
• Füllen Sie die Felder Label und Plural Label aus. Object Name wird automatisch gesetzt.
• 
• Klicken Sie auf Save.
• Im linken Menü: Klicken Sie auf Fields & Relationships.
• Klicken Sie auf New.
• Wählen Sie ein Data Type (z.B. Text) aus und klicken Sie auf Next.
• Befüllen Sie die Felder Field Label and a Length. Field Name wird automatisch gesetzt.
• 
• Klicken Sie auf Next, Next, und anschließend Save.
• Wiederholen Sie dieselben Schritte um die übrigen Felder hinzuzufügen.

• Erstellen Sie eine Master-Detail Beziehung mit dem Case standard Objekt:
  • Klicken Sie auf Fields & Relationships und dann auf auf New.
  • Wählen Sie das Data Type: Master-Detail Relationship.
  • Wählen Sie vom “Related To” Menü Case aus.
  • Befüllen Sie das Feld Field Label. (z.B. Case).
  • Klicken Sie auf Next, Next, Next und dann auf Save.
  • Notieren Sie sich den API Namen. (z.B. Case__c).
• Löschen Sie die Standardansicht aus dem Case-Layout:
  • Kehren Sie zur Objektmanagerliste zurück:
    
  • Wählen Sie Case.
  • Wählen Sie im linken Menü die Option "Case Page Layouts" aus.
  • Wählen Sie Ihr Layout aus der Tabelle aus. (z.B. Case-Layout)
  • Scrollen Sie nach unten, bis Sie die beigefügte Ergebnistabelle finden
  • Löschen Sie es durch Drücken des Minus-Symbols:
    
  • Klicken Sie auf Save.

Schritt 2 Erstellen eines benutzerdefinierten Apex Controller

Benutzerdefinierte Controller enthalten benutzerdefinierte Logik und Datenmanipulation, die von einer Visualforce-Seite verwendet werden können. Ein benutzerdefinierter Controller kann zum Beispiel eine Liste von records von benutzdefinierten Elementen abrufen, die angezeigt, erstellt oder gelöscht werden können.

In diesem Schritt erstellen Sie den controller AttachResultController, welcher folgendes macht:

• Holt die angehängten Ergebnisse eines bestimmten case. (Wird von der Lightning-Komponente verwendet, um die an case angehängten Ergebnisse in einer Tabellenansicht anzuzeigen)
• Entfernt ein angehängtes Ergebnis von einem case.
• Hängt ein Case Objekt an ein Ergebnis an. (Wird ausgelöst, wenn Aktionsschaltfläche Attach To Case angeklickt wird)

Bitte befolgen Sie folgende Schritte:

• In Salesforce, Klicken Sie auf das Zahnradsymbol und wählen Sie Setup.
• Suchen Sie nach Apex Classes und wählen Sie sie aus.
• Klicken Sie auf New.
• Fügen Sie den folgenden code snippet hinzu:

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 der Funktion attachResultToCase haben Sie im else Block eine neue Instanz Ihres zuvor erstellten benutzerdefinierten Objekts erstellt und dann die Eigenschaften des Suchergebnisses den Feldern des benutzerdefinierten Objekts zugewiesen.

Schritt 3 Erstellen einer neuen Lightning-Komponente (AttachedResults)

• In diesem Schritt erstellen Sie eine Lightning-Komponente, die der Salesforce Case-Seite hinzugefügt wird. Die Komponente zeigt die Felder des in Schritt 1 erstellten benutzerdefinierten Objekts an.

Befolgen Sie bitte folgende Schritte:

1. In Salesforce, Klicken Sie auf das Zahnradsymbol und wählen Sie Developer Console.
2. In developer console, wählen Sie File > New > Lightning Component.
3. Benennen Sie die Komponente AttachedResults, wählen Sie Lightning Record Page, und anschließend Submit.
4. Ersetzen Sie den Inhalt der Komponente durch folgenden 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. Klicken Sie auf File > Save.
2. Klicken Sie auf CONTROLLER in der Komponentenpalette auf der rechten Seite und ersetzen Sie den Inhalt durch diesen 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. Klicken Sie auf File > Save.
2. Klicken Sie auf HELPER in der Komponentenpalette auf der rechten Seite und ersetzen Sie den Inhalt durch diesen 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. Klicken Sie auf File > Save.
2. Klicken Sie auf STYLE in der Komponentenpalette auf der rechten Seite und ersetzen Sie den Inhalt durch diesen 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. Klicken Sie auf File > Save.
2. Fügen Sie die Komponente auf die gleiche Weise wie in diesem Abschnitt Lightning App Builder zum Hinzufügen von Komponenten beschrieben zur Case-Seite hinzu.

Schritt 4 Einfügen einer neuen benutzerdefinierten Schaltfläche: Attach to case

In diesem Schritt wird die Aktionsschaltfläche Attach To Case zu jedem Suchergebnis hinzugefügt. Darüber hinaus fügen Sie die handler function hinzu, die ausgelöst wird, wenn die Aktionsschaltfläche ausgelöst wird.

Bitte führen Sie die folgenden Schritte aus:

1. In Salesforce, Klicken Sie auf das Zahnradsymbol und wählen Sie Setup.
2. Suchen Sie nach Visualforce pages und wählen Sie sie aus.
3. Wählen Sie vorhandene VF-Seite aus. (In unserem Beispiel, Mindbreeze_search_page)
4. Klicken Sie auf Edit.
5. Im Visualforce Markup:
   1. Fügen Sie der VF-Seite die Erweiterung AttachedResultController hinzu.
      Code vorher:
      <apex:page standardController="Case">
      
      Code nachher:
      <apex:page standardController="Case" extensions="AttachResultController">

1. Fügen Sie die Apex handler function hinzu:
   
   Code vorher:
   <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 nachher:
   <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. Fügen Sie die Aktionsschaltfläche Attach To Case & attachResult handler function hinzu:
   
   Code vorher:
   <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 nachher:
   <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>

Klicken Sie auf Save und kehren Sie zu einer beliebigen Case Seite zurück.

In den Suchergebnissen sehen Sie nun die neue benutzerdefinierte Aktionsschaltfläche:

Klicken Sie auf die Attach To Case Schaltfläche und das Suchergebnis wird in einer Tabellenansicht angezeigt.

Troubleshooting

Einschränkungen der Salesforce-Felder

Beispiel: Das Feld für die Ergebnis-URL hat eine maximale Länge von 255 Zeichen.

Wenn ein Link länger als 255 Zeichen ist, tritt ein Fehler auf.

Workaround: Stattdessen wird ein String "Result Url is too long" angezeigt.

Wie?

Fügen Sie auf Ihrer VF-Seite im benötigten Mindbreeze <script> -Tag bei der Funktion attachResult den folgenden gelb markierten Code ein:

<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>

Abfrage von Suchergebnis-Eigenschaften aus dem Mindbreeze-Suchmodell

Das folgende Beispiel fordert die Autor- und Erweiterung Eigenschaften an:

Fügen Sie zunächst in Ihrem Insight-App-Snippet die folgende HTML-Datei ein:

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

Und dann in der attach result function am <script>-Tag:

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

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

Die Schaltfläche Clear button (x) in der Suchleiste funktioniert nicht

In der Browser-Konsole (F12), sehen Sie folgenden Fehler:

Uncaught SyntaxError: Unexpected token & in JSON at position 2

Lösung:

Ersetzen Sie auf der VF-Seite im HTML-Code-Snippet Ihrer Such-App den folgenden Code:
data-action-object="{&quot;resetSearch&quot;:{}}"

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