Customization using SharePoint's new framework

Microsoft are currently rolling out their new page editor for team sites which provides a much faster, slick approach to creating content.

Customization using SharePoint's new framework

Gone is the clunky web forms experience when editing pages and web parts. This is replaced by a responsive page editor, customisable using the new development framework. See more from Microsoft's blog here.

I’ve been working a lot over the last few years with the provider hosted app model both in Office 365 and on premise with clients such as VELUX and Pandora, so I was quite excited to hear Microsoft were giving us some more tools to help clients produce engaging intranets.

The new framework is built on various technologies including TypeScript, Node and Gulp to name a few, but Microsoft have put together a nice bit of documentation on how to get started with development. It’s worth noting that this SharePoint Framework is still currently in preview at time of writing this article so could potentially change before a production release.

As per the Microsoft guide our hello world webpart can be created with the Yeoman SharePoint generator from command prompt using @microsoft/sharepoint. And then a gulp serve command to deploy and we’re up and running:

Pretty cool. This got me thinking about some common customisations I have worked on in recent SharePoint Online projects and how they could be added using this framework. I also thought I’d try out the lightweight Visual Studio Code to make these customisations.

A common business requirement is a formatted or branded article date. Although this would normally be something embedded on a layout let’s give this a go with the new framework. We’ll change our manifest.json to have some month and date formats so the user can pick the format. We’ll also change the officeFabricIconFontName from page to calendar so it depicts our functionality better. See the SharePoint Framework API for the possible values that can be used here.

Now let’s use the REST API to get the created date of our current page and use moment to format that date:

 

Oops moment is undefined. With the new framework we’ll need to download any dependencies using the node package manager. So let’s head back over to command prompt that we used to scaffold out our hello world webpart and run:

npm install moment

And add an import statement to the top so we can use moment. So now we’re ready to check our changes. After refreshing the workbench page in my site collection I can now see I have an Article Date

And if we add that to the page we can see our page created date and can set the format of this date in the web part properties. Changes made to the properties are instantly reflected in the control, no need for Apply/OK/Save like current web part property modifications:

Neat. Let’s change the REST endpoint to get the current user profile (/_api/SP.UserProfiles.PeopleManager/GetMyProperties) and make a web part that pulls back the current user details. ********

 

Cool. One final thing I wanted to try was using React. I’ve used a variety of frameworks & libraries to improve and simplify the creation of customisations such as AngularJS, Knockout and Handlebars. Microsoft are now using the React framework in Office365 and this will already be loaded onto pages without additional references, so when making a framework choice for customisations React is a strong candidate.

Changing the hello world webpart to work with React was quite simple. Firstly, I added import statements for react and react-dom. Then I changed HelloWorldWebPart.ts to a .tsx extension (indicating that this file will contain React code for compilation). And that’s it. Now let’s create a final webpart using React.

For consistency let’s change the end point again, this time let’s make an office graph query and get back items the user has modified, ordered by modified time:

api/search/query?Querytext='*'&Properties='GraphQuery:ACTOR(ME\\, action\\:1003),GraphRankingModel: { \"features\"\\:[{\"function\"\\:\"EdgeTime\"}]}'&RankingModelId='0c77ded8-c3ef-466d-929d-905670ea1d72'&'&SelectProperties=Title,Modified,Author,ServerRedirectedURL'&rowlimit=4

But we’ll change the query text value based on a textbox value change and we’ll hook this up using React:

ReactDOM.render(<input type="text" value={text} onChange={this._performGraphSearch} />, document.getElementById("myLatestDocs"));

 

Great. So there we have it, some simple customisations created using the new framework. Developments like these along with some of the solutions I’ve worked on recently with provider hosted apps and Azure apps make this quite an exciting time to be developing with Microsoft technologies.

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

Get In Touch

Adam Wildash Senior Developer

Adam describes his work as “turning customer’s requirements into a functional reality” which sums it up pretty well. He could list out all the technologies he works with to create custom solutions, like SharePoint, .Net, Azure, & SQL, but that’s not the point. Adam leads development teams, liaises with his clients and runs demos of the solution and it’s all for one purpose – to deliver a ‘functional reality’ based on the requirements he’s been given. Says it all, really. Adam is from a consultancy background and got a first in his BSc in Computer Systems, Networking and Telecommunications, so when everything feels a little too easy, he loves the challenge of finding his way around a problem!

Adam devotes his spare time to spending as much time with his little ones as possible.

Twitter Feed

Where Next? Relevant Stories and Insights.

Wrap-up and question time after Microsoft Ignite
Wrap-up and question time after Microsoft Ignite
With Microsoft’s Ignite fully wrapped up, there’s a lot of information from the SharePoint community about the biggest announcements. We're here to answer your questions.
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​What makes an award-winning Intranet?
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​What makes an award-winning Intranet?
In this seminar, we'll be helping you shape your Intranet business strategy – creating a long-term, sustainable business case of why Intranets matter.