SharePoint framework extensions in developer preview

Adam Wildash, BrightStarr's Developer Team Lead shares his excitement about the recently announced SharePoint framework extensions in developer previews.

As Developer Team Lead at BrightStarr, the recent announcement of the SharePoint Framework Extensions got me really excited.The new modern sites experience in SharePoint Online is great, and the development model for the new framework a step in the right direction in terms of modern web development. However, the current customization options for modern sites are very limited compared to what we can do when we build responsive intranet solutions for our clients using publishing site collections (for example).

I had a client recently who was very keen to use the new modern sites as the basis of their SharePoint intranet. When I explained the limitations of the customization however, they chose to make use of a publishing site collection instead. One of the key issues with the modern sites was the inability to have a common header or footer across the site - a problem in terms of user experience. With the new Framework Extensions (which are, at time of writing, in developer preview) we will now be able to customize the header and footer, creating an intranet for the client with a united look and feel!

The client I speak of is almost ready for go-live, but as we developed their customizations in React & TypeScript, what we’ve built for their current intranet solution can be easily ported to the new modern site experience.


To test this, I kicked off the Yeoman SharePoint Generator and picked the new App Extension option:

Firstly, I imported my top navigation React component from the publishing site collection into my SPFramework solution. I then amended the onRender function of the ApplicationCustomizer (see the announcement video on how to do this) to render this component, instead of the ‘hello world’ markup. I tweaked the client’s branding for anonymity of screenshots and then ran the solution locally using gulp serve.

When running the solution locally, a querystring has to be appended to the modern site URL to see the customisation in action:?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"d03ae0c2-bbbf-4cf5-9ff7-0986904553da":{"location":"ClientSideExtension.ApplicationCustomizer" }}

The outcome can be seen below:



Top browser: publishing site

Bottom browser: modern team site

In the top browser, we have the blue custom responsive navigation in a publishing site collection. This also has a custom theme applied to the site, hence the green Office365 Suite Bar. The bottom browser overlapping it is a modern team site with the same React component, added using the new SharePoint Framework Extensions. Pretty cool.

See the Office developer documents for getting started with writing your own SharePoint Framework Extensions.

The next announcement I’ll be looking out for will be the release of Communication Sites (currently set for Q2 of 2017) with the ability to pick section layouts in the modern site experience.

If you want to know more about the work we do to customize SharePoint, talk to our application development team today. 

Talk To Us

Upcoming events

View all

Latest news

  • Unily launches new report: Future Of The Workplace 2030+

    This week Unily launched a new report in partnership with Kjaer Global exploring the impact of technology, AI and cultural shifts on the future of the workplace in 2030 and beyond.

  • Rising digital workplace star Unily attracts $68m growth investment

    Unily, the leading digital workplace platform today announces it has attracted a $68 million growth investment from Silversmith Capital Partners and Farview Equity Partners. Post investment, Silversmith and Farview will hold a significant minority stake in the business and with board representation will support the existing management team on its ambitious international growth strategy.

  • Unily Intranet Masterclass Auckland: An Event Round-Up

    With a reported 87% of employees not engaged in their work, the need for businesses to develop employee engagement has never been greater. Unily’s exclusive masterclass; ‘How to maximize employee engagement with an intranet’ aims to address this by showcasing how organisations can use a digital workplace to create engaging employee experiences.

View all

Where next? Latest insights.

Create smarter digital experiences with Microsoft’s QnA Maker bot

We are delighted to announce that Unily’s DXC now features a deep integration with Microsoft's Azure QnA Maker. Underpinned by Microsoft’s cognitive services and natural language processing capabilities, the new bot will be able to understand your users and route them to content faster than ever.

5 reasons employee experience should be the focus of your enterprise right now

According to the 2018 Talent Trends Report, 51% of ​employers planned to boost their spending on employee initiatives in 2019 and a significant percentage of this investment will go into technology. Why are so many companies investing in employee experience initiatives and what benefits does a strong employee experience bring to the modern enterprise?

Why intranets are key to unlocking employee engagement

A universal message from the general email address blasted to all employees can have the same effect as stapling a memo to the bulletin board in the break room. Your people may take a half-hearted glance, but are they engaged? In this blog, we explore how intranets, and more specifically targeting and personalization, are helping to power authentic engagement with internal communications.

SUBSCRIBE. To our insights.

The latest digital workplace news, events, guides and case studies.