Case Deflection Component

Question

The standard case form component includes a case deflection component. Unfortunately we need our case form to do some things that are beyond the standard case form functionality. Is there a way to use the case deflection component on it's own? If not does anyone know if the logic is more complicated than executing a search on knowledge with the case title?

I hate that we have to replicate these components to add functionality to parts of them

Answer 1

You can use the case deflection component on its own, just need to tweak your form to register the event used by the deflection component and fire it with the field + field value parameters on field change or blur, for example:

sampleForm.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >

    <aura:registerEvent name="appEvent" type="selfService:caseCreateFieldChange"/>

    <lightning:recordEditForm aura:id="recordEditForm"
                       objectApiName="Case">

    <lightning:messages />

    <lightning:inputField fieldName="Subject" onchange="{!c.itemsChange}"/>
    <lightning:inputField fieldName="Description" onchange="{!c.itemsChange}"/>


    <lightning:button class="slds-m-top_small" type="submit" label="Create new" />

</lightning:recordEditForm>
</aura:component>

SampleController.js

({
 itemsChange : function(component, event, helper) {           
        var appEvent = $A.get("e.selfService:caseCreateFieldChange");
        appEvent.setParams({
            "modifiedField": event.getSource().get("v.fieldName"),
            "modifiedFieldValue": event.getSource().get("v.value")
        });

        appEvent.fire();
})

Notice, the OOTB community Case Deflection component will update automatically.

Answer 2

Adding this as an answer rather than a comment since I don't have enough rep.

We tried getting this working with the code above, and it looks like as implemented above doesn't work. It only seems to monitor the subject and description fields.

The solution was a bit hacky. If you hard code the modifiedField to 'Subject', then it'll look at the right field and force the update through. See below:

({
    itemsChange: function (component, event, helper) {
        var appEvent = $A.get("e.selfService:caseCreateFieldChange");
        var params = {
            // modifiedField: event.getSource().get("v.fieldName"),
            modifiedField: "Subject",
            modifiedFieldValue: event.getSource().get("v.value")
        };
        appEvent.fire();
    }
});