How to make cool modern SharePoint Intranets Part 4 – Custom components #makespintranetcoolagain

In the series to make Intranet cool again we have looked at the strategy, design and build (OOB) options in the prior blogs here. In this blog we will look at the options to customise the Intranet and best practices for the same.

With every intranet there are cases, we will need to customize the look and feel. We will need custom components to add to the functionality.

Since there are many aspects where we could add customizations to the Intranet, this blog could become very long. So to keep it of optimal length, I am just highlighting the high level scenarios for customisations. For detail information, either look for other blogs on my site, or please leave a note and will blog the details about them.

So here we go..

Webparts

We could create SPFx custom web parts for specific requirements for the business. The web parts could scale whole width of the page or section as per requirement. One of the other greater benefit of SPFx web parts is that they are inherently mobile compatible*. The challenge of SPFx is that the client functions run on the client browser so we will need to be sure to that it is light weight and browser compatible**.

For blogs regarding building webparts with SharePoint Framework, please check here.

* Note: When I say mobile compatibility, it means that the webpart as a whole will be able to scale to mobile layout but doesn’t necessarily mean the controls in the web part will scale to mobile layout. Hence the code to scale the controls needs to be added to the app.

** Note: The browser compatibility becomes a key consideration if the organisation’s browser standards still include older browsers such as IE 11. So check here to consider challenges and tips regarding this.

Full width webparts

Sometimes we are given requirements to have full width webparts on Intranet pages. Currently there is no support for full width web parts in section layouts, hence the best way to approach this is using the CSS extender webpart here.  In the CSS customiser web part we could provide the path to the custom css file (recommended to store in Site assets so all users will have access) and the webpart applies the css to the page. Easy !!

Provisioning and Branding

Provisioning and Branding are important components of Intranet.

Provisioning

Normally it is possible to start with a blank communication site and then customise it as per Intranet requirements but this process doesn’t provide a consistent pipeline for dev, test, to prod releases. Also this doesn’t allow to add/update items seamlessly in case of a change. Having a custom Provisioning process provides a consistent approach to test and implement changes for custom solutions. This is beneficial in many ways such as access isolation and solution validation prior release.

Tips for custom Provisioning process

1. Use Site Scripts for creating the site and implementing assets. For reference about this process, check here.

2. Site designs could be used to prepare the custom elements for the site.

3. Use PnP PowerShell to apply the scripts. For reference check here.

For other options to create sites using a custom provisioning process, click here.

Branding

Branding is another important component for the Intranet. Branding using OOB features is mostly covered in this blog, however sometimes there could be custom requirements for header or footer components. For adding header or footer components, we could use the Application customiser to populate them. Some of the common requirement for a customiser could be banners, company footer sections, contact info etc. For details of using application customiser, check the doc at here.

Note: SharePoint has some default footer components such as Feedback and like sections that’s could overlap with the custom footer sections, so plan for them accordingly.

 

Content Authoring and Site Management

Another most common requirement that we receive with Intranets is content management such as adding and removing the pages and content. Communication sites provide many OOB features to manage content, some of these are listed in this blog. But we have many custom scenarios that might need to be added. Some of the custom ones are listed below:

1. News approval / Content publishing – There is a OOB approach to promote a page to a News. This can be combined with the OOB Request sign off Flow to add approval flows but what about demotion of promoted pages. If that is needed, then check the blog here.

2. Custom metadata management – The default forms of SharePoint don’t support custom rules. There are only limited choices based on data type. With custom forms we could add our own business rules. This could be done through PowerApps or SPFx List customiser. For more information on SPFx customiser check here.

3. Site hierarchy / Content hierarchy – One of the legacy trend that many of the Intranet leads keep hanging on to is hierarchy of content. Tree hierarchy has been how content was organised earlier and provided a feasible approach for some aspects. Teams are still looking for the same functionality. Instead of walking down the Tree hierarchy path, in my opinion, we could use metadata hierarchy (term store) to provide the same approach. Then Highlighted content or custom SPFx web part could be used to find content.

4. Permissions – This is one important component of the Intranet. Managing permissions in scope of Intranet is challenging as everyone needs access to the intranet. This also needs to be updated with the new employee and exit process of the company. Hence it is advisable to use a Active Directory (AD) security group with all the users of the company added to it. New users/ Exiting users could be maintained using this AD group. For content autors and editors, these could be given contribute rights. For Intranet admins, they could be provide with Edit or Design rights depending on the access they need. The Site collection admins should be maintained with the IT support team, so the Intranet and all custom builds could be maintained properly.

Hub

Intranet can also be a Hub for information which allows it to collate information from various locations without replicating all the information in Intranet.  This providesd two main benefits – single source of truth and defined ownership. Most of the Hub components such as News, Search are OOB. Some of the custom requirements might be with automatic assocation of sites to the Hub and audience targeting. For more information on SharePoint hub sites, please check here.

Conclusion

In this blog we looked at some approaches for custom implementations and extending the Intranet using custom components. The custom web parts could be managed using the SPFx bulid and release cycle as mentioned here. The other components could also be managed in a similar fashion as per requirements. Again this blog calls out the high level scenario for custom components. Please let me know if there are any specific scenarios of interest.

Happy Coding !!

How to make cool modern SharePoint Intranets Part 3 – Build with OOB Components #makespintranetcoolagain

In the previous blogs here, we looked at how to Strategize and Design the Intranet. These steps are important for establishing a plan for a successful Intranet. The next step in the process is to start building the Intranet as per design plan.

The most important component for building a successful Intranet is to understand the extensibility options in SharePoint Communication Sites and use them to the fullest.

In this blog, we will look at the Out of box options of building the Intranet. In the upcoming blog we will look at the process to build custom components for the Intranet.

Not all functionality of a SharePoint Intranet needs to be customised. We can use some of the existing (in SP world we call them as Out of Box, for short OOB) components. Some of the key and advantageous components are below.

Themes

Themes allow us to change the look and feel of a site without customizing the core design classes. This can be invoked from the ‘Change and Look’ settings of the site. There are already some pre-defined themes but we can create custom ones using the theme generator – here.

Themes can also be added or managed programmatically using PowerShell cmdlet or CSOM API or REST API. For more information, please check here.

Site Layout Options

These are some default layout options (header and footer) that could be applied to the site throughout. Microsoft has been adding more, but below screenshot shows some that are available now.

IntranetHeader

Page Layout options

In my opinion, I consider this as the most powerful feature of all Intranet building features. With these options content authors could design the layout of the page as they want. The idea is to create sections and the columns to arrange the layout of the page.

SectionOptions

News

This is one of the most important component of the Intranet. In Modern Communication Sites, any page could be published or promoted to be a news page. The published news page can then be shown on the Intranet home page using the news web part.

For more programmatic ways of creating and publishing news pages, check the blog here.

With the latest updates in News Web part, we could do much more with News such as,

  1. Get news from this site, selected sites or recommend for current user
  2. Change layout of the new web part
  3. Customise the authoritative sequence of the news
  4. Filter news based on metadata properties

NewsWebPart

Note: Currently the OOB process doesn’t allow to demote news pages to site pages in case of a error publish. This can be done programmatically as shown in the blog here.

Note: The Site Page Approval flow could be used to control the publishing process. For more information, please check this blog. For a programmatic approach, please check here.

 

OOB webparts

The OOB Webparts are a great way to add components to an Intranet page without any customisation. Some of the noted ones are as follows.

Hero Web part

This web part displays content in a metro layout with choice from 1 to 5 tiles.  This web part can be arranged in different layout options also. This allows to focus on the important content on the page.
HeroWebPart

Highlighted content web part

Personally I think this web part is one of the best web parts in SharePoint Modern sites. This component works with data from SharePoint Search. Some of the most useful options while using this web part are.

  1. Get content within this site, or all sites or selected sites using a managed property
  2. Get content from associated sites if Intranet (communication site) is the hub
  3. Get content within a document library or pages library using column search
  4. Filter based on the type of documents such as word, pdf, excel etc.
  5. Get layout options to arrange as a card, list or carousel

HighlightedContentWevPartEdited.png

Text Web Part

Add any text using Rich text control using this web part. This allows to add content onto the page such as a static wiki for Content Authors. The web part has rich text editing options with features to add links and tables. This is a great web part to provide some context to the page or lay down information.

TextEditorWebPart

Quick Links Web Part

This is another helpful webpart that allows to add quick links to pages or web sites. We could also add a custom image to a link and change the arrangement of links.

Yammer Conversations Web Part

This web part is a quick and easy way to shown conversations from Yammer groups.

YammerConversationsWebPart

Conclusion

In this blog, we saw how we could use the OOB components to start building the SharePoint Intranet. In the next blog, we will look at the custom options to build the Intranet and steps to plan for it.

How to make cool modern SharePoint Intranets Part 2 – Design #makespintranetcoolagain

In the previous blog here, we looked at how to strategize (Scope and Plan) a Modern SharePoint Intranet Implementation. In this blog, we will look at some of the design principles for the Intranet.

Before we start building the Intranet, we need to have a usable design so that we could plan for a good user experience. User experience, as most UX guys would say, is not only about a beautiful design but also about easy accessibility and simplicity. In other words, it means we need to plan for a good usable intranet instead of only a beautiful looking intranet.

Note : The reason I stress on usable designs is because we spend most time finding workarounds to make SharePoint Intranet aesthetically beautiful. But instead if we understand the constraints at the UI level and focus on how to make it usable, then it works so smooth.

So, let’s look at some of the key highlights and limitations that the SharePoint Modern Sites present to us and how to tackle them to create a good design. We will look at the most important page sections and then the content part where we could do mostly everything.

Top Header Section

The first major limitation that throws most of my customers off is the fixed banner section at the top. Microsoft recommends not to remove this as it gives the quick way to reach your apps, services settings and personal profile. In future, Microsoft might be providing us with Page Designs that will help arrange this section better.

Now to overcome this limitation, there is a way, but not recommended as any changes on Office 365 layout could break it. So if you are tech savvy, dev and know your way around with CSS, then the below process could work for you.

1. Create an App customiser SharePoint extension.

2. Include your CSS to hide the section as per requirement. Note : not all sections are accessible via CSS overrides

3. Deploy it to the Site Collection App catalog of Intranet. For Site Collection App catalog enablement steps, check here.

App-header-footer-visible

Navigation

With the introduction of modern mega menu navigation, it is now possible to set a better content navigation on SharePoint sites. This could be enabled from the SharePoint site from the “Change the look” option in Site settings. An example is shown below.

Ignite2018_MegaMenus

Left Hand Navigation

Modern Team Sites have a left hand navigation that provide quick access to the common locations such as Site OneNote, Conversations, Site Contents.

Note: The left hand navigation becomes the top navigation in Communication sites. Hence updating the left hand navigation updates the top navigation.

Hack tip: Please check this blog if you would like to find a way to set layout types for pages in Modern Sites

 

Footer

SharePoint by default doesn’t provide a footer, so we could freely add footer to the pages. However, there are two floating footer components on the modern page as shown in the screenshot below that might be of interest. The two buttons are for Microsoft Feedback and cannot be adjusted as per custom requirements.

The footer can be customised using an Application customiser as discussed above.

floatingFooter

Content Section

This section of the page is where the content owners have access to change or add information or components. This is where most of the design layouts are possible, so try to plan/design in this area.

For communication sites, we get a full width layout and team sites we get an article page layout.

ModernPageContentSection

For customisation, we have the following options

  1. Add an existing Out of Box web part to the page. Some of the noted web parts for modern sites are below. We will look at more details about the below in the upcoming blog but below are few highlights of Out of box web parts.
    • Hero Web part – This web part displays content in a metro layout with options to change/update
    • Highlighted content web part – This web part is one of the best web parts in SharePoint site. This allows to filter data in the site using various filtering options such as SharePoint search, or SharePoint list columns or content types or file types etc. Hence this web part can be used at multiple pages
    • Text Web Part – Add any text using Rich text control using this web part
    • Quick Links Web Part – This is another helpful webpart that allows to add quick links to pages or web sites.
  2. Add a custom SharePoint Framework web part
    We could add our own custom web parts using SharePoint Framework. SharePoint Framework allows us to create custom component as per our requirement and add it to the SharePoint site. We are going to discuss more about this in the next blog. For more dev information, please check the blogs here.

Conclusion

In this blog, we saw some of the tips for planning a usable design for Modern Intranets. However, this is not the end, there are more steps after the design is ready, reviewed and accepted. In the upcoming blogs, we will look at how to achieve the design using a functional solution.

How to make cool modern SharePoint Intranets Part 1 – Strategize (scope & plan) #makespintranetcoolagain

Over the last year, we have seen many great advancements with SharePoint communications sites that have bought it more closer of being an ideal Intranet. In this blog series, I will be discussing about some of my experiences for the last years in implementing Modern Intranet and best practices for the same.

In this specific blog, we will look at the strategies about the first block of building a great Intranet – Strategize the Intranet approach.

So what should we be looking for in the new Intranet? The answer in most of the cases is generally about easy reach and effective communication. To achieve this, we should be planning with the below headers.

Shared Ownership

Practically a single team couldn’t own the Intranet. It is a shared responsibility between the core business groups, who provide content and IT, who provide Tech support. Until this is defined effectively, there will be gaps for the Intranet to reach its full potential.

Planning

It is important to plan the steps for an Intranet roll out, not just the overall strategy. For eg. design, build, release to various groups (Big Bang) or progressively etc.

User Experience and Design

Over the years I have firsthand realised that User experience is very critical for good adoption of any system including Intranet. It must look aesthetically appealing and easy to use, so users can get to what they want and find it fast. So, for every Intranet it is needed to have a UX plan.

Adoption

One of key aspects of any Intranet is seamless adoption. No organisation will be spending thousands of dollars teaching how to use the Intranet. And for who are thinking it, the ‘force down the throat’ approach just doesn’t work. It is important to have a Change and Adoption plan for the team.

Prepare a Wishlist

It is important to prepare the wish list of expected items way before starting the implementation process. Most of the times, I have seen teams prolonging it till the implementation phase which delays the release date.

MVP (Minimal Viable Product) cycle

MVPIntranet

Generally, Intranet is thought of a single shot solution which it is prepared perfectly for its first release. But most of the times, this approach doesn’t work effectively. It adds more strain and takes a lot of time to create an ideal Intranet. However, with SharePoint communication sites, we could make this process much simpler and faster.

Intranet could become an evolving process where we implement the first stage of the product with minimal viable requirements such as pages, navigation, must be used corporate components such as news, information etc. Then we build a feedback mechanism into the solution where we allow the focus users and teams to provide responses on the likability and adoption of the Intranet.

After the first stage is built and ready, and we start getting more feedback from business unit and focus groups. In the next phase, we could implement these requirements such as apps, solutions, workflows while expanding the scope of the Intranet.

Subsequently we keep adding more functionality with more cycles of design, build and feedback.

Conclusion

Using the above process, we could start with the strategy and plan of making a great Intranet. In the upcoming blogs we will look at more steps for building a great Intranet and start planning the next steps for it.

Great SharePoint Modern updates Feb 2019 #makespintranetcoolagain

During Ignite 2018, Microsoft showcased some great updates that are going to change how we implement SharePoint Intranets. It will scale Modern Communication sites to new heights to become the Next-gen Intranet.

Since Ignite 2018, there have been many steady releases and some great updates on SharePoint Modern communication sites. Here is a quick blog of these updates.

Following this blog, I am planning to start with a detailed blog series about how to build cool Modern Intranets in SharePoint #makespintranetcoolagain

Megamenus

This is the first time in SharePoint history that we have an Out of Box Multi-Navigation menu which goes beyond two level hierarchy. This will allow us to include any level of navigation hierarchy. Here is blog link mentioning this release

https://techcommunity.microsoft.com/t5/Microsoft-SharePoint-Blog/Organize-your-SharePoint-sites-with-megamenu-navigation-and-new/ba-p/328068

MegaMenu

Modern SharePoint Webparts

There are few great additions to the existing list of SharePoint Webparts. The blog talking about these is below. Some of the noted ones are:

1. New Yammer Conversations web part

2. My Recent and My Documents

3. Code Snippet for Devs and Markdown for Authors

https://techcommunity.microsoft.com/t5/Microsoft-SharePoint-Blog/SharePoint-web-part-updates-Yammer-Conversations-My-Documents/ba-p/303719

Updated SharePoint Page editing experience

Now we could style page headers and update backgrounds for sections in SharePoint Pages. It is surely a valuable addition for Designers and Content Authors who are looking for ways to improve the design and content real estate on their sites.

PageHeader_EditingExperience

Column Formatting on the Fly

Now applying column formatting is way simpler than using the Out of Box column JSON formatter. We were always able to do it using JSON but now we could set it using the UI designer directly. Isn’t that fabulostatic !!

https://techcommunity.microsoft.com/t5/Microsoft-SharePoint-Blog/New-no-code-solutions-for-custom-formatting-in-SharePoint/ba-p/302498

Site Settings and Apply Site Design updates

Now we could apply a site design on an existing site from the site menu and see the status of the process. There is more information in the below link.

https://support.office.com/en-us/article/manage-your-sharepoint-site-settings-8376034d-d0c7-446e-9178-6ab51c58df42

Page Designs

This are still in build but when released they will be a great addition to setting up page layouts in Modern environment.

Improved SharePoint Admin Center experience

SharePoint Admins Rejoice!! Now we could set external sharing, change Site admins and filter on site properties for eg. Hub site from the modern Admin Center.

SharePointNewAdminCenter.png

Webpart Connections

This is a great announcement for devs of SPFx Framework. Now we could connect and send information within two connected webparts as mentioned below

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/dynamic-data

Conclusion

Above we saw some of the cool updates released recently for the Modern Experience. In the upcoming blog series – SharePoint Modern Intranet #makespintranetcoolagain, we will be looking at some of them in detail and use them on real use cases.