SharePoint Web Parts

Sharepoint-web-parts

Hint: Get to the end of this blog post and you will find a new announcement for one of our popular sharepoint web parts.

When the Modern Experience for SharePoint Online came out, content editors loved the new way of managing pages, adding web parts and styling site pages. Yes, this was Modern but compared to website platforms such as Wix and WordPress, it was just catching up.

We all remember, and still use, Classic experience web parts. The number of clicks (5 to get to this point below!), 8 to publish the changes and then you find its not quite what you want and you go around the same process again.

sharepoint-web-parts

When out of the box SharePoint webparts were not quite cutting it you could add script into editor, create bespoke web parts and buy third party web parts. These did the job but leaving it to the individual development teams, meant there was no standard way of adding configuration to these web parts.

We can’t complain, AMT was built on branding and customising SharePoint. Our SharePoint developers are vastly experienced in coding technologies such as Angular JS – but even they didn’t enjoy the coding required.

Fast forward to SharePoint Modern experience and the world is a much better place. Our developers appear to have taken to the new SharePoint Framework (Development), Fabric UI (Design) and API’s in SharePoint and Microsoft Graph. There are smiles on their faces!

As Sales Director, I still visit clients and manage my account management team and our job is a lot easier. Clients are impressed, features are easier to demonstrate. The work we do is now extremely repeatable. This allows us to create new web parts based on client’s needs and extend them both to the original client’s benefit and future clients. In fact this is how our Hub Intranet started.

Why SharePoint Web Parts?

Looking at SharePoint web parts in particular, what do I like most?

My top 5 would be:

1. Developer Network: The developer network is a very friendly one. There are lots of SharePoint Saturday community events and lots of great web parts posted to GitHub. GitHub is a great place to get started for any developer wanting to move into SharePoint Online Modern Experience.

2. Familiarity: In 2 clicks (yes 2, not 5!) you are into the configuration panel of a web part. All the ‘out of the box’ Microsoft web parts work in the same way, a right hand side slide out panel, slider buttons for YES/NO or ON/OFF configuration.

company-news-sharepoint-web-part

3. WYSIWYG: The best addition in my view is that you get true WYSIWYG (What you see is what you get). The configuration you change is reflected in real time on the web part, meaning no more updating multiple times, saving, publishing etc.

 4. Multi Use: A lot of the out of the box web parts such as ‘Highlighted Content’, ‘Lists’, ‘Tiles’ etc can be used for a wide variety of purposes. Really useful web parts such as ‘PowerApps’ and ‘PowerBI’ that were not available on Classic experience, can also be game changers. Allowing staff to stay in their SharePoint environment whilst filling in forms and review report data and dashboards.

5. Ease of use for Administrators: If you need to create new custom web parts then the administrators job is usually really straight forward. Developers give you a single SharePoint Framework App Package (.sppkg) file to upload into the App Catalog and hey presto, it appears for site owners in an easy to use pop up alongside all the Microsoft out of the box web parts.

custom-sharepoint-web-parts

Custom web parts: AMT Phone Book

If we take a look at the AMT Phone book web part as an example, a lot of the above benefits apply.

1. Developer network: We kicked off the development using Graph API example scripts from Github and use React JS and Fabric UI code. This ensures compatibility and compliance with other web parts.

2. Familiarity: The web part is edited in exactly the same way as out of the box web parts. Click the EDIT pencil icon, a configuration panel slides out of the right hand side. Configuration controls are the same (e.g. slider buttons) using Fabric UI.

edit-button-sharepoint

3. WYSIWYG: By default the web part will inherit the “Theme” of the site however colours and card themes can be changed, filters added and fields selected. As soon as the web part is dropped into any site page, it automatically looks up Microsoft Graph and pulls back staff profiles, photos, names, email, phone etc. No linking by an admin, no complicated scripts to change. It just works and remains dynamic. A new staff member joins the company and they appear in the phone book.

sharepoint-web-part-edit

4. Multi Use: This is a big one and a process we apply to all our web part development. If there is an opportunity to create a custom web part with one set of code and features, how many situations can it be used for? A customer would always prefer one single functional web part than several separate ones that do similar things.

Take the phone book functionality as an example:

a. Create a SharePoint page, call it “Staff Phone Book” and away you go. A dynamic staff phone book that is always up to date.

b. Create another SharePoint page, call it “Staff Directory” or “Staff Knowledgebase”. Go into the SharePoint User Profile and add more staff profile fields. For example; Languages Spoken, Industry Experience, Qualifications Held, Health & Safety individual, First Aider.

Expose these fields in Delve and incentivise your staff to update these fields. They do it on Facebook or LinkedIn so are usually happy to do it in Delve!

Go into the Phone Book Configuration and map in the new Delve fields. The result is a detailed staff directory or knowledgebase complete with search refiners. Do you have loads of staff and need to find a Japanese speaking staff member in the UK with knowledge of the Aerospace sector? Three clicks and you’re there looking at their contact details, their Delve profile, their CV etc.

add-refiners
Add refiners
map-refiners
Map refiners
display-staff-directory-web-parts
Display the staff directory
search-refiners-web-parts
Use search refiners

c. Have you got some public or private department or location sites? Add in the Phonebook and use the built in filter by Department or Location and hey presto. Your Marketing site lists all your Marketing staff. Remember this is dynamic so any new marketing members of staff appear automatically.

search-results
sharepoint-team-view

d. Want to show staff with birthdays on the home page or new starters? No problem, select the Birthday Delve field as the filter and away you go. Select the Created field + 30 and any new starter profile will appear for 30 days after they join.

new-starter-sharepoint-web-part

Finally, one of the best things about SharePoint web parts is Microsoft’s roadmap of new features. Check out all the latest news on SharePoint from last weeks Microsoft Ignite 2019.

Latest Announcement

I did promise an announcement on one new feature of the AMT Phone Book module for all those able to make it all the way through my blog so here it is!

As of this week, the latest Phone Book web part is now available within Microsoft Teams.

phone-book-web-part-microsoft-teams