Introduction

Hi friends, in this post we are going to learn the usage of PnP RichText control. We will see how we can leverage this control on our SPFx projects and make use of the feature provided by this control. Thanks to the community.

About the Control

This control could be very useful when you would like to implement a rich text editing experience to the application and store and display the values from the list. You may also notice a OOB Text web part that comes with SharePoint Online, but you cannot use that value to store it in the list or you cannot populate your custom value in the OOB control.

Note: When you receive any error on the control strings when you add the control. Try to clean and build the project and then try to add the web part on the page and the control should work.

Focus on the Code

You can refer Part 1 post on the creation of the SPFx project and installing all the dependencies. In addition to the dependencies mentioned in that post you have to install @pnp/sp – v3.5.1. You should also do some changes to the project files to make the pnpjs version 3 to work on SPFx 1.14.0. Please follow this link to do the changes.

Created a webpart named RichTextDemoWebPart. Below is the RichTextDemo.tsx file.

import * as React from 'react';
import { FC, useState } from 'react';
import styles from './RichTextDemo.module.scss';
import { IRichTextDemoProps } from './IRichTextDemoProps';
import { RichText } from "@pnp/spfx-controls-react/lib/RichText";
import { PrimaryButton } from '@fluentui/react';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

const RichTextDemo: FC<IRichTextDemoProps> = (props) => {
    const { hasTeamsContext, isDarkTheme, userDisplayName, environmentMessage } = props;
    const [richTextValue, setRichTextValue] = useState<any>('');

    const _onTextChange = (newValue: any): string => {
        setRichTextValue(newValue);
        return newValue;
    };

    const _saveRichTextValue = React.useCallback(async () => {
        await props.sp.web.lists.getByTitle('Testing').items.add({
            Title: 'RichText Control Demo',
            RichTextField: richTextValue
        });
    }, [richTextValue]);

    return (
        <section className={`${styles.richTextDemo} ${hasTeamsContext ? styles.teams : ''}`}>
            <div className={styles.welcome}>
                <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
                <h2>RichText Control Demo</h2>
            </div>
            <div>
                <RichText value={richTextValue} onChange={(text) => _onTextChange(text)} />
                {richTextValue &&
                    <PrimaryButton onClick={_saveRichTextValue} iconProps={{ iconName: 'Save' }}>Save</PrimaryButton>
                }
            </div>
        </section>
    );
};

export default RichTextDemo;

Below are the updates done to the file.

1. Changed the class component to use react hooks
2. Created a state variables to hold the value from the RichText control and use the value from the state to store it in the list.
3. Following are some of the most commonly used properties
   • isEditMode – To display the control in edit or view mode.
   • value – Rich text value.
   • onChange – Method executed when the value of the control is changed.

Reference URL

RichText – @pnp/spfx-controls-react

Sample Implementation

Conclussion

I hope you had learned something about one of the PnP controls. Still a lot to come in future. Stay tuned.

Please free to post your comments and let me know if you want me to post article on any particular feature or plugins that relates to SharePoint. Thanks for your support.

sudharsank/pnpcontrols-demo: Demo project on different PnP React Controls. (github.com)

Happy Coding…