Custom Salesforce Knowledge Component using LWC

Salesforce Knowledge is excellent knowledge base which help support executive to resolve customer issues faster. We can use this tool by enabling Lightning Knowledge and adding this to case page layout. Standard knowledge component is suffice for most of use cases but some time we have some custom requirement. To handle custom requirement, we have to create our custom Salesforce Knowledge component. Some of the custom requirement could be like

1. Assigning multiple knowledge article in one go
2. Showing knowledge article conditionally
3. Custom UI like showing them in data tables
4. Assigning knowledge articles to custom objects

Let us now create a custom knowledge component to show articles and assign them to case. To make this component we need below steps

1. Create Apex class for getting knowledge articles
2. Create LWC component to show knowledge articles
3. Add LWC component on page

1. Apex class to access Knowledge Articles

Create apex class to get all all knowledge articles. We can search article content from title, question text or answer text. Question is long text area field so we have to query complete knowledge articles and then we can search in question text. If you don’t want to search in question then use simple SOQL with where condition .

 'SELECT Id, Title, Summary FROM Knowledge__kav WHERE Title LIKE \'%' + input + '%\' ';

For this requirement we are searching text in question field as well.

2. LWC component to search knowledge

Create a lwc component that will show all articles based on provided input. We will use above created apex class to get articles. We can associate selected articles to current case. After association, case association count will be increased.

lightning-datatable is used to show all knowledge articles. I have made Title column as hyperlink to navigate article record.

{label: 'Title', fieldName: 'url', type: 'url',sortable : true,typeAttributes: {label: { fieldName: 'Title' }, target: '_self'}},

3. Add LWC component to Case Page Layout

Add above created LWC component to page layout using app builder page. You can use component based on your requirement.

Test Page:

Reference:

https://help.salesforce.com/articleView?id=sf.knowledge_whatis.htm&type=5

https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable