I recently built a handful of amazing content entry web parts for Office 365 using SharePoint Framework (SPFx). The client I was working with wanted various combinations of responsive columns, rich text editor, links, and pictures. This ultimately led to building out a few custom web parts to meet their needs.

About a months later, as we started focusing on search, I noticed a huge problem. The contents of my web parts were not searchable! We couldn’t find anything. This was the first time I had to ensure the content was indexed on a modern page. It’s not the same as classic – lesson learned.

Step 1 – Mark Your SPFx Web Part Properties

I came across the official Microsoft guidance which tells you to mark your properties. I will not go into details of the article, you can read the full article here.

As you can clearly see you need to mark the web parts as image, html, string, or link. If you have a combination of those then use html.

Microsoft’s Example

Yet another issue. What about web parts that have arrays, objects, arrays of objects or props that leverage lists as a data source?

How to handle an arrays / objects / both … simplify

Here is an example from one web part. I have a web part property which is an Array of Objects, that have multiple properties. According to the guidance, how do you mark it?

There is no immediate way to tag this properties where it would get indexed correctly and make the content searchable. So how do you solve this? The list below are the main points.

  1. Create a new property ‘searchableText’
  2. Mark the new property ‘isHtmlString’
  3. Create an update function

Step 1 and 2 are very straightforward. These are used inside the main .ts file of the web part. It will not be passed into the child components.

Create New Property
Mark New Property

The 3rd step is to pass a function to child component. When the items are changed inside the web part, it will loop over the items and create an html string of the text & links to update searchableText. Once that is complete we will be able to search on the content of the web part properly.

The purpose of this example is give you an idea of converting your objects / arrays into a String. It’s a little extra work but making it worthwhile when users can search the contents of your web parts. I have yet to figure out a way to make list based web part content searchable on the page. [I do not want to hit the list items directly in many cases] That might be a blog for another time.

About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles