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.
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.
- Create a new property ‘searchableText’
- Mark the new property ‘isHtmlString’
- 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.
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.
nithin
I’m just curious, why not the below approach? Any issues?
{
‘items[*].title’:{isSearchbaleText} ,
‘items[*].body’:{isHtmlString} ,
‘items[*].link’:{isLink}
}
Tom Daly
That will would work too. I mashed them into 1 string because i didn’t care about the details the goal was just to appear in search. Your suggestion is a bit more granular – could improve rank perhaps. I’ll have to experiment with this approach to see if there is a difference.
pooja rajpal
Nice and useful for our searchable we parts specially among all regions .Thanks for sharing 🙂
Tom Daly
thank you Pooja! i hope to be able to post new and insightful information each week.