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 Unily, 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.

 

Upcoming events

View all

Latest Insights

  • Leadership in the digital era: shaping the employee experience with an intranet

    Inspirational leadership is one of the most crucial factors in enterprise success. Yet with rapidly evolving global markets and constantly shifting economic environments, how do the leaders of tomorrow continue to engage their people and achieve their goals? In this webinar in partnership with strategy consulting firm Gagen MacDonald, we explore the changing nature of leadership and how we can strive to manage the challenges facing leaders today, through the lens of modern enterprise technology.

  • Windstream: Migrating to Unily in 9 weeks

    As a leading telecommunications provider, connection is Windstream’s lifeblood. Previously, a legacy platform created roadblocks that hindered the efficacy of internal comms. By migrating to Unily, Windstream has entered a new era of workforce connectivity.

  • 6 challenges facing the energy industry a next-gen intranet can solve

    Employee engagement will be a make or break factor in the new world of work. As energy and utilities leaders look towards the future, a digitally-driven approach to enhancing workplace experience is needed to solve the industry’s most pressing challenges.

View all

Where next? Latest insights.

Future of the sustainable workplace in the age of COVID-19 and climate change

If the disruptions of early 2020 have taught the world anything, it is that the future is very much undefined and impossible to truly predict what will happen next. Just as the COVID-19 crisis has created dramatic and accelerated changes to the way we live and work, so too does the rising threat of a changing climate. As business leaders, how do we then take positive proactive action towards being a climate positive workplace and providing incredible experiences for workers and customers alike?

Windstream: Migrating to Unily in 9 weeks

As a leading telecommunications provider, connection is Windstream’s lifeblood. Previously, a legacy platform created roadblocks that hindered the efficacy of internal comms. By migrating to Unily, Windstream has entered a new era of workforce connectivity.

Supercharge employee experience with an intranet - Vienna

We're taking our exclusive Intranet Masterclass online for Vienna. Learn how to supercharge employee experience with an intranet at our FREE virtual seminar.