SPFx: Richtext webpart with reusable content and placeholder resolving function for user profile properties

SPFx: Richtext webpart with reusable content and placeholder resolving function for user profile properties

$€®¥09@'s photo
$€®¥09@
·Nov 22, 2021·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

I have created an SPFx WebPart (for SharePoint Online) that uses the PnP Richtext Control as a base. I made a few customizations to display more items in the toolbox. The idea behind this web part is to allow the user to insert placeholders, which are then replaced in display mode. There are the following placeholders:

{Web.Url}
{Web.RelativeUrl}
{Web.Title}
{Site.Url}
{UserProfile.ProfilePropertyName}

Very dynamic and helpful is {UserProfile.ProfilePropertyName}. This can be used to display the properties of the currently logged in user, e.g. to greet him. All user profile fields can be used by (internal) fieldname, where all characters that are not a-z are replaced by an empty text (''). So SPS-JobTitle becomes SPSJobTitle. For example: {UserProfile.SPSJobTitle}

In addition, I have included a well-known feature from SharePoint Publishing (Classic), which does not exist in this way in Modern. The Reusable content. You can define content in a list and it will be displayed in the web part. If the text is not marked as "static", it can even be modified. So schaut dann das Resultat aus:

WebPart Preview

You can download the solution here and install it on your tenant. The code is stored in this repository.

Update March 2022

With the new release (v1.1.0.0) is it possible to configure the greeting text depending on the time (e.g. 0-12 am "Good morning", 12-16 pm "Good afternoon" etc.). To resolve the greeting text, insert {Greeting} as a placeholder. Also, you can insert the web part into a full-width section and the web part supports theme variants.

I would appreciate feedback.

Happy coding ;-)

$€®¥09@

Did you find this article valuable?

Support $€®¥09@ by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this