Display Knowledge Article Rich Text Content in Salesforce Lightning Web Component

Display Knowledge Article Rich Text Content in Salesforce Lightning Web Component

Using lightning/uiRecordApi, we can fetch the Salesforce Knowledge Article and display it in a Lightning Web Component. For rich text content, lightning-formatted-rich-text tag in the Lightning Web Component can be used to display the rich text content.

Sample Lightning Web Component:

HTML:

<template>
    <lightning-card title="Knowledge Information">
        <div class="slds-var-p-horizontal_small">
            <p class="slds-text-title_bold">
                Title:
            </p>
            {strTitle}
            <br/><br/>
            <p class="slds-text-title_bold">
                Summary:
            </p>
            {strSummary}
            <br/><br/>
            <p class="slds-text-title_bold">
                Content:
            </p>
            <lightning-formatted-rich-text 
                value={strContent}>
            </lightning-formatted-rich-text>
        </div>
    </lightning-card>
</template>

JavaScript:

import { LightningElement, api, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

export default class KnowledgeComponent extends LightningElement {

    @api recordId;
    strTitle;
    strSummary;
    strContent;

    @wire( getRecord, {
        recordId: '$recordId',
        fields: [ 
            'Knowledge__kav.Title', 
            'Knowledge__kav.Summary',
            'Knowledge__kav.Content__c'
        ]
    } )
    wiredRecord( { error, data } ) {

        if ( error ) {

            let message = 'Unknown error';
            console.log(
                'Inside the error block'
            );

            if ( Array.isArray( error.body ) ) {

                message = error.body.map(e => e.message).join(', ');

            } else if ( typeof error.body.message === 'string' ) {

                message = error.body.message;

            }

            console.log(
                'Error Message is',
                message
            );

            this.dispatchEvent(
                new ShowToastEvent( {
                    title: 'Some error occurred',
                    message,
                    variant: 'error',
                } ),
            );

        } else if ( data ) {

            console.log(
                'Title Value is',
                getFieldValue( 
                    data, 
                    'Knowledge__kav.Title' 
                )
            );
            this.strTitle = getFieldValue( 
                data, 
                'Knowledge__kav.Title' 
            );
            this.strSummary = getFieldValue( 
                data, 
                'Knowledge__kav.Summary' 
            );
            this.strContent = getFieldValue( 
                data, 
                'Knowledge__kav.Content__c' 
            );

        }

    }

}

JS-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply