A week ago Joanne Klein posted a request on twitter where she asked if it was possible to easily see which page is the home page or welcome page of a site. In a library with hundreds of pages, this can be quite useful indeed.
Technically the information about which page is the home page is stored as property on the root folder of the web (almost a mouthful there), which translates to that it’s not stored on the page it self, thus not “easily” set by adding a column.
The developer in me figured I could whip up a quick custom field renderer for the modern page library and have this working in a matter of minutes. Turns out, it’s not that easy. (A field renderer is a piece of code which shows a column value in any way you decide, instead of the default way – for example add a red background color.)
Either way, head over to https://github.com/Puzzlepart/spfx-solutions/tree/master/Pzl.Ext.HighlightHome if you want to download and install a solution which does highlight the home page for you. Install instructions are on that page as well.
The obstacles
When debugging I tried to modify the field FileLeafref, which is the file name shown in the Site Pages library. Turns out, you need to associate the custom field renderer with LinkFilename to get this working in production, which makes sense.
But, a SharePoint Framework solution does not allow you to associate a custom field renderer via elements.xml on existing out of the box fields like LinkFilename. Also, if you change the rendering of LinkFilename you loose the context menus for Sharing and Actions. Because the default rendering of a field is all lost when you say you want to handle it yourself.
As I wanted to keep the existing menu logic, I decided to change DocIcon instead, rendering a home icon instead of the default one – which is a custom icon served from an undocumented CDN, so I decided to embed it using a data URI.
To solve the association itself, I added a run-once application customizer to the solution, which on first run will associate the custom field renderer with the DocIcon field of the Site Pages library, then it will remove itself.
The flow then becomes:
- Install application on the site
- Visit a modern page
- The application customizer kicks-in, associates the custom field renderer with DocIcon on Site Pages
- Application customizer removes itself
- When you visit the Site Pages library, the field renderer will render the custom DocIcon, and also use possibly unstable/breakable DOM manipulation to bold the entire row
Hope this helps Joanne, and maybe someone else :)
