Leverage case context in your custom Insight Panel

This is for:

When building a custom Insight Panel, you can optionally leverage case information in your custom context. Custom context helps machine learning models promote content that’s more relevant to the specific case situation.

At a high level, to add case context to your custom Insight Panel, you must retrieve case information with the Salesforce getRecord wire adapter and update your Headless engine state with this information using the target Headless Insight actions. You must also update the context and execute a new search with the updated context when the case information changes.

For clarity, this article focuses only on the snippets relevant to adding case context to your custom Insight Panel. For the full implementation, see exampleInsightPanel.js in the Quantic project repository.

In your custom Insight Panel JavaScript file, import the required Salesforce modules:
```
import {LightningElement, api, wire} from 'lwc'; 
import {getRecord} from 'lightning/uiRecordApi'; 
```
See Understand the Wire Service.

See getRecord.

Define variables you’ll need as well as the case fields that your Insight Panel will leverage:

triggeredFirstSearch = false; 

caseRecord; 

caseFields = [ 
  'Case.CreatedDate',
  'Case.CreatedBy.Email',
  'Case.CaseNumber',
  'Case.Subject',
  'Case.Description',
];

	A flag that will be used below to ensure the first search is executed only once.
	The current case record data. It will be populated using the `getRecord` wire below.
	The case fields that your Insight Panel will use.

Define functions to check if the watched fields of a case record have been updated and to retrieve the value of a record field:

watchedFieldsUpdated(newRecordData) {
  return Object.values(this.caseFields)?.reduce((result, field) => {
    const previousValue = this.getFieldValueFromRecord(
      this.caseRecord,
      field
    );
    const newValue = this.getFieldValueFromRecord(newRecordData, field);
    return result || previousValue !== newValue;
  }, false);
}

getFieldValueFromRecord(record, fieldName) {
  let innerKeys = fieldName.split('.'); 
  if (!record || !innerKeys.length) return null;
  if (innerKeys[0].toLowerCase() === 'case') {
    innerKeys = innerKeys.slice(1);
  }
  if (innerKeys.length === 1) return record.fields?.[innerKeys[0]]?.value;
  return this.getFieldValueFromRecord(
    record.fields?.[innerKeys[0]]?.value,
    innerKeys.slice(1).join('.')
  );
}

This function expects the fieldName to be in the following format: Case.Contact.Name.

In your engine initialization function, load the required Headless actions and set the case number in the engine state:

initialize = (engine) => {
  // ...

  this.actions = {
    // ...
    ...this.headless.loadInsightSearchAnalyticsActions(engine), 
    ...this.headless.loadInsightSearchActions(engine), 
  };

  this.caseNumber =
    this.getFieldValueFromRecord(this.caseRecord, 'Case.CaseNumber') ||
    '1234'; 

  // ...
  this.engine.dispatch(this.actions.setCaseNumber(this.caseNumber)); 
};

	See loadInsightSearchAnalyticsActions.
	See loadInsightSearchActions.
	Provide a default case number if the Insight Panel isn’t on a case record page.
	Dispatch an action to set the case number in the engine.

Use the getRecord wire adapter to fetch and store the target case record data. This wire adapter is reactive, so also use the watchedFieldsUpdated function just defined to check if the watched fields have changed. If they have, update the case record and execute a search with the updated context, which will yield better results.

@wire(getRecord, {recordId: '$caseId', fields: '$caseFields'}) 
wiredRecord({data, error}) {
  if (data) {
    if (!this.triggeredFirstSearch) {
      this.caseRecord = data;
    } else {
      if (this.watchedFieldsUpdated(data)) {
        this.caseRecord = data;
        this.executeSearchAfterContextChanged();
      }
    }
  } else {
    console.warn('An error occurred while retrieving the record.');
    console.warn(error);
  }
}

executeSearchAfterContextChanged() {
  this.setupContext(); 
  this.engine.dispatch(
    this.actions.executeSearch(
      this.actions.logContextChanged(this.caseId, this.caseNumber)
    )
  );
}

setupContext() {
  const context = { 
    Case_ID: this.caseId,
    Case_Subject: this.getFieldValueFromRecord(
      this.caseRecord,
      'Case.Subject'
    ),
    Case_Description: this.getFieldValueFromRecord(
      this.caseRecord,
      'Case.Description'
    ),
  };
  this.engine.dispatch(this.actions.setCaseContext(context)); 
}

	Target only the case record by its ID and the fields you want to monitor.
	Update the context, execute a search, and log the context change when case fields are modified.
	Create a context object with case information that will be sent with search requests.
	Set the case context in the Headless engine so it’s included in all searches.

Update your search execution methods to include case context:

handleInterfaceLoad = (event) => {
  event.stopPropagation();
  if (!this.triggeredFirstSearch) { 
    this.triggeredFirstSearch = true;
    this.executeFirstSearch();
  }
};

executeFirstSearch = () => {
  this.setupContext(); 
  this.engine.executeFirstSearch();
};

	Only execute the first search once when the interface loads.
	Set up case context before executing the initial search.

Validate that the Insight Panel works as expected. When you open a case record page in which you’ve included your custom Insight Panel, it should automatically execute a search request with the case context.