I love the FontAwesome library and use it on many projects. I was a huge fan of FontAwesome 4.0 and had a little struggle moving over to using 5.0 + 6.0 in my projects. I was use to the old way of including the link to the CSS files and using the class names. You can still do that if you wish but this article shows using the React component approach. It’s simple once you’ve done it a few times.

Install React Font Awesome

npm i –save @fortawesome/react-fontawesome

Install the Core Packages [required]

npm i --save @fortawesome/fontawesome-svg-core

Install the Icon Packages, use only the ones you need. If you only use solid icons then choose that. If you are not sure right now then you can include them all and remove them later.

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

Go Find a Font – https://fontawesome.com/icons

Keep in mind that you only have the free library so you can only use those unless you buy the pro license

If you pick an icon and it says ‘Start Using this Pro Icon’ then you need to choose something else or purchase a license

You can filter the free ones by clicking this on the left.

I’ve selected the fish icon, next you need to take note of the type ‘Solid’ or ‘Regular’

Now import the FontAwesomeIcon component and the icon you want from the correct package

This fish icon is in the Solid package.

If I wanted to use something from the regular package like this icon

This font is in ‘Regular’ package you would import it from that package instead

There is intellisense inside visual studio to help get the correct name of the icon

Now the result

If you wanted to use the brand icons you would follow the same approach. I believe that all the brands icons are free.

I love FontAwesome library of icons and use them in many projects. The PRO version unlocks so many more fonts and customizations that it’s worth buying if you plan to use them and want to support this project.

Introduction

This new project is a nice little feature that you can easily add to your SharePoint site to enable site messages or alerts. Having the ability to display site alerts is one of the top 10 most requested features to enhance SharePoint. This customization is built as an SPFx application customizer, with a little bit of UI hacking. This project can be used as-is or as a starting point for you to extend and create your own combinations of notifications, icons and colors.

Overview

The Alerts Header solution contains an SPFx application customizer and a list schema for the alerts messages. The list will automatically be created for you when the app is added to your site. Currently the app displays messages from the site it’s in but could be easily modified to pull notifications from another site. Initially this was designed to be deployed the the entire intranet and activated on each site. Each site had the option to display ‘local’ alerts, alerts contained within the site and remote alerts, alerts contained at the root site collection “/”. The remote alert functionality has been commented out for simplicity in the Git Hub repo but could be reenabled with just a little effort.

Implementation

The List

The solution installs an ‘Alerts’ list in your site. This list contains a number of required fields to properly display the alerts.

Title – The first part of the text that is displayed

Description – The second part of the text that is displayed. The description will fill the reminder of the space and truncate with ‘…’

Alert Type – The icon that is displayed. Warning, Actionable or Info as show below from top to bottom.

Link – The navigation url and the text that will be displayed

Start Date / Time – The date and time that the alert will be displayed

End Date / Time – The date and time that the alert will no longer be displayed

Items will immediately start to show up once they are added to the list and hit the duration between the start and end date.

The Web Part

This view below shows the alerts application customizer with all three types of alerts and active.

Icons – The icons used are from the Font Awesome 5.0 free library. You could easily update the code to change out the icons.

Expand / Collapse – If the alert has a long description it will be truncated once it fills the available screen space. The up / down arrow will allow the user to expand and collapse the alert to read the full description.

Dismiss / Close – The alert has and close icon at the far right to dismiss the alert. The alert will no longer show during that session. A new session will display the alert again. New Tabs are equivalent to new sessions.

SharePoint UI Hack – I hinted earlier that I’ve included a bonus UI Hack for free, haha. Take a peek at the picture below. The normal location of an application customizer is at the very top of the page. I did not want the alerts to show up there so I opted to move them to the bottom of the header. This is a non supported customization according to Microsoft. I’m pointing this out for transparency.

Responsive / Mobile Friendly – The web part was designed with the intention of working across all devices and screen sizes. The functionality is somewhat different on the mobile. Once the item is expanded it can only be closed. I’ve do it this way to intentionally close them out to regain the screen real estate back on the small devices.

Customizations

The web part comes with a few notification types. You can add more types directly to the list or to the list schema. After you add new Alert Types you would then need to do a few more updates

IAlerts.types.ts – Add your new Alert Types to the enumeration

AltertItem.tsx – Add new conditions for the new Alert Types and the icon you want to use

AlertItem.module.scss – Copy / Paste an existing Alert Type combination and change the colors to meet your needs.

Conclusion

Site Alerts are one of the top 10 features requested from clients and customers to build. I’m happy to be able to post this feature to share even though it’s not 100% Microsoft compliant. The tiny UI hack positions this feature in the location where I felt it belongs. I hope and wish that Microsoft would give us more Zones in which we could target in the application customizers.

This post will demonstrate another SharePoint UI hack that is typically seen on many modern sites today. Back to top is a button that will position itself on the right hand bottom corner of the screen once you scroll a bit down. It’s very useful on long pages where your users might want to scroll up quickly and not get mouse scroll rash on their fingers in the process. This is another client request that I hear infrequently but I found this as something that the general population can implement and learn from.

Before you continue, I must mention that SharePoint UI hacks are unsupported and frowned upon by Microsoft as we cannot rely on the UI [html, classes and DOM] to remain the same over time. With that said you are free to implement and learn more about SPFX and the current DOM given this example. When Microsoft implements a change this would potentially stop working and that is all. Post an issue on github and I would be happy to review and make a change.

• Git Repo – Back to Top
• Pre-Build SPPKG

Overview

I’m not going to go into the nitty gritty details of the code in this article, you can look at the code for that. This customization is based on an SPFX application customizer. This application customizer injects a button when the users scrolls past a certain point. The button would then jump the user back to the top of the scroll region.

The scroll region might change at some point for SharePoint, rendering this customization ineffective.

Implementation

In the SPFX application customizer there is some code to detect the scroll event. There is also some code to detect the page navigation event as it’s somewhat tricky. When users navigate away from a page application customizers are not re-rendered. There is also some code to detect a navigation event and refresh the scroll area so that this SharePoint UI hack continues to work.

The current scroll region is defined in the BackToTop.tsx. The current scroll region that is the target can be seen below.

The customization is also theme aware and will respect the primary color of the theme.

Installation

As with many github solution you can always clone the repo and make any changes you desire to the solution, check out the REPO. Alternatively you can take the latest build and install it into your app catalog.

Once you install the solution into your app catalog it will be available as an App on your site. It’s as simple as that.

Summary

I hope you enjoy this, yet another SharePoint UI Hack. It’s a great little enhancement if you have long content and want to scroll back up to the top of the page quickly. Feel free to use the github code to inspect how it’s implemented, make changes or enhancements or just implement it as the package is available for you. I’ll mention again that SharePoint UI hacks are not supported by Microsoft so don’t ask them for support. If you implement this you should always remove it before troubleshooting other issues. Generally it’s safe to apply as it won’t adjust or change anything permanently within your site, but take note that if there is a change with the SharePoint UI it could stop working as some point in the future. Please feel free to reach out or comment if your feedback or experience.

The draw back is that it’s removed for the whole site. Maybe you just want it gone on one page. Well in that case you’ll have to use CSS to do that. For the one page approach I would add a Modern Script editor to the page.

Immediately after removing the left navigation, depending on your screen size, you will notice that the screen does not go full width. This would also need to be fixed with injecting CSS either through the page or into the entire site via Application Customizer.

Microsoft doesn’t recommend modifying their CSS but they almost give us no choice. For now I’ll leave you with the CSS that works (for now) to update these zones. You’ll need to use one of the two methods above to implement this on Modern pages.

// Trimming Left Navigation
#spLeftNav { 
 display: none;
}

// Full Screen CSS
.CanvasComponent.LCS .CanvasZone {
 //there is a max width on this set to 1268px, we'll make it 100%
 max-width: 100%;
}

What I’m about to show you is a technique that you could use to trim the ribbon and suite bar off an Office 365 – SharePoint site. If you worked with any previous on-prem version we had the SPSecurityTrimmedControl where we could set permissions string. I first learned of this from Dr. Z’s famous post, “How To Hide Ribbon From Users Without Edit Page Privilege”

In comes new modern SharePoint sites and pages where we don’t have master pages to work with. Yet the desire of some clients to remove that top bar for users with minimal permissions still remains. So what can we do? I have 2 ways that I can show you how to accomplish this. Let’s start with the easy method and I’ll save the more complex for another post.

Create an SPFx – Application Customizer 

Create the basic hello world application customer. Click the link in the header to reference the Microsoft guidance. We are focused on the top placeholder for this example but any placeholder would work just fine. If you have an application customizer then skip this section

Now that you have an application customizer with top placeholders you are ready for the good stuff.  For this we’ll use PnP JS library to check user permissions. This is consider the easier method because the PnP JS core library does all the heavy lifting. It allows you to easily make a call given a Permission level. Trust me, doing this yourself requires in depth knowledge about the High/Low security permissions, converting decimals to binary and mapping permissions to a bit on a binary string. If you are feeling adventurous you can read some more details on André Lage’s post “It is SharePoint Permission call FullMask or “NearFullMask” in CSOM?”

Add PnP-JS to your project

Follow the guidance here “Getting Started: Install & Use” with the NPM Install

Now in your application customizer .ts file you need to import PnP

import pnp from "sp-pnp-js";

inside the onInit() you must initialize the pnp.setup before you call your content placeholders. If you don’t do this then pnp won’t be ready to use inside the content placeholders.

  @override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    return super.onInit().then(_ => {
      pnp.setup({
        spfxContext: this.context
      });

      this.context.placeholderProvider.changedEvent.add(
        this,
        this._renderPlaceHolders
      );
      this._renderPlaceHolders();
    });

  }

This setups up PnP so it can do it’s work. My application customizer creates a sub component called Header and here is where I do my permission checking and trimming.

 private _renderPlaceHolders(): void {
    if (!this._topPlaceholder) {
      this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
        PlaceholderName.Top
      );

      if (this._topPlaceholder) {
        if (this._topPlaceholder.domElement) {
          const element: React.ReactElement<IHeaderProps> = React.createElement(Header, {});
          ReactDom.render(element, this._topPlaceholder.domElement);
        }
      }
    }
  }

Insides Header.tsx I create a function that will trim the suite bar / ribbon. I am using pnp js to check for a particular security level and then hiding or showing. In my case below I’ve hidden the ribbon for everyone using CSS and then I unhide it here. You can use any of the PermissionKind enumeration listed here

import pnp, { PermissionKind } from "sp-pnp-js";

  public componentDidMount(): void {
    this._trimSuiteBar();
  }
 
 private _trimSuiteBar(): void {
    pnp.sp.web.usingCaching()
      .currentUserHasPermissions(PermissionKind.EditListItems)
      .then(perms => {
        var suiteBar = document.getElementById("SuiteNavPlaceHolder");
        if (!suiteBar || !perms) return; //return if no suite bar OR perms not high enough

        suiteBar.setAttribute("style", "display: block !important");
      });
  }

And there you have it. Suite Bar / Ribbon trimming on Modern Office 365 / SharePoint sites using an SPFx Application Customizer and PnP JS

** Disclaimer ** I have to tell you that this is simply for  information and demonstration purposes. Use at your own risk. It’s not recommended to trim the ribbon or suite bar as it provides functionality to users within the SharePoint site. This is obviously a hack to the product and I’m sure Microsoft would not like you to do this.

This change will be completely rolled out by the end of February.

How will you be impacted?
Some custom web part, master pages, or 3rd parties might rely on the document model as IE=10 compatible.

Known Issues (as of this writing):

• “Open with Explorer” does not work with IE Edge

Steps to take:
If you know you have a custom masterpage and want to continue running in IE=10 compatible mode then you must make the change manually.

Inside the masterpage make the following change:

<!-- comment this out, like so -->
<!--<SharePoint:IECompatibleMetaTag runat="server"/>-->
<!-- add this -->
<meta http-equiv="X-UA-Compatible" content="IE=10"/>

However when working on a Modern Team site if you use the same menu it does not allow you to change the site logo the same way. I’ve tried this on two different tenants and have two different results. I believe both are on standard release.

Tenant 1 – missing Site Logo

Tenant 2 – has Site Logo but errors – Oops! Something went wrong. Please try again in a few minutes.

The error is just a lie, it will never work. I put in a ticket with Microsoft on this and they said that it won’t work that way. For a Modern Team Site you have to go to the Site Assets folder and upload the site logo there. It must be name ‘__siteIcon__.jpg’ and must be a jpg for it to work.

Upload your new file and overwrite the existing file. Wait a few seconds and hit CTRL-F5 to clear the cache and there you have it.

Option 1 [Only Publishing Enabled]
+Alternative CSS URL

Pros:
No special tools needed other than the browser of choice.
Very easy to attach a file using the interface.
The CSS can be applied to every sub site under
Different CSS can be applied per site

Cons:
Can only link 1 file in this slot. Once it’s used you can’t link anymore.
Manual process, not scriptable or repeatable.

From Site Settings

Under Look and Feel, Click on Master Page

At the bottom, Expand Alternate CSS URL, Click Specify a CSS file to be used, locate a CSS file to attach, then Click OK

Option 2 [Not Recommended]
+Using Content Editor / Script Editor Web Parts (CEWP)

Pros:
Quickly add CSS / JavaScript to a page by directly copy/paste into these web parts.

Cons:
Works only on that particular page, not a global solution.
If you accidentally delete the web part, you will lose your customizations. (not if you host the customizations in an external files and link it as content source (CEWP only))
Manual process, not scriptable or repeatable.

Option 3 [Best for Multiple Environments / Repeatable / Scriptable]
+Using SharePoint PnP

Add-PnPJavaScriptBlock – used to add a block of JavaScript to execute
Add-PnPJavaScriptLink – used to add links to JavaScript file

Below is some PowerShell PnP used to attach CSS and JavaScript files. In order to reference CSS you must load it via JavaScript. To do that I’ve borrowed some JavaScript that the PnP JS library uses. You can download that here


## CSS FILES
Add-PnPJavaScriptLink -Name "loadStyles" -Url "$($configObject.siteUrl)/Style Library/js/cssLoader.js" -Sequence 0 -Scope Site
Add-PnPJavaScriptBlock -Name "googleFonts" -Script "cssLoader.loadStylesheet(`"https://fonts.googleapis.com/css?family=Lato:400,700|Roboto+Condensed:400+700|Alegreya+Sans+SC`", false);" -Sequence 1
Add-PnPJavaScriptBlock -Name "fontAwesome" -Script "cssLoader.loadStylesheet(`"$($configObject.siteUrl)/Style Library/vendor/font-awesome/css/font-awesome.min.css`", false);" -Sequence 1
Add-PnPJavaScriptBlock -Name "styles" -Script "cssLoader.loadStylesheet(`"$($configObject.siteUrl)/Style Library/css/styles.css`", true);" -Sequence 2
## JS FILES
Add-PnPJavaScriptLink -Name "jQuery" -Url "$($configObject.siteUrl)/Style Library/vendor/jQuery/jquery-3.2.1.min.js" -Sequence 0 -Scope Site
Add-PnPJavaScriptLink -Name "moment" -Url "$($configObject.siteUrl)/Style Library/vendor/moment/moment.min.js" -Sequence 1 -Scope Site
Add-PnPJavaScriptLink -Name "resize" -Url "$($configObject.siteUrl)/Style Library/vendor/resize/jquery.ba-resize.min.js" -Sequence 1 -Scope Site


Pros:
Easy to apply JavaScript to your site (takes a little bit more for CSS).
Builds a repeatable method to attach JavaScript & CSS to your site. Great for repeatable process and source control (as you can store these files)
You can use the C# PnP or PowerShell PnP

Cons:
Takes a little bit more than 1 command, need to establish a connection.
Need to be comfortable using powershell or C#.
Need to have the powershell modules installed.
No native command to attach CSS, they recommend using JavaScript to attach CSS.

Option 4 [My Favorite for Quick & Easy Applications]
+SP-Editor / Chrome Only

Download SP Editor plugin from the Chrome Store

Once you have the plugin installed and navigated to your SharePoint site, hit F12 to open the developer tools bar.

Click on the SharePoint tab and then click ScriptLinks. Here you can enter the sequence number to order your CSS references or JavaScript links. You also enter a site collection relative url from JavaScript only. After you enter that information, Click on the Add ScriptLink dropdown and select either current web or site collection

Pros:
Super Fast & Easy
Quickly apply CSS or JavaScript to a site or web (sub site) using the browser

Cons:
Requires Chrome [only a con if your organization doesn’t allow you to have Chrome]
Manual process, not scriptable or repeatable.

Where do you put this? There are a number of places that you can put it. The best option would be in the Alternate CSS file [I’m going to get around to posting this cause I haven’t found a great article explaining this to newcomers]. You could also just add it to the MasterPage but that’s not the cleanest method.

Hide Newsfeed

Before:

CSS Snippet:

/* Hiding Newsfeed */
.o365cs-nav-appTile[id='O365_AppTile_Newsfeed'] {
	display: none;
}

After:

Hide OneDrive

Before:

CSS Snippet:

/* Hiding OneDrive */
.o365cs-nav-appTile[id='O365_AppTile_Documents'] {
	display: none;
}

After:

Hide Sites

Before:

CSS Snippet:

/* Hiding Sites */
.o365cs-nav-appTile[id='O365_AppTile_Sites'] {
	display: none;
}

After:

Bonus

After you hide 2 items you’ll get a space like this. Add the next line of CSS to tighten it up.

CSS Snippet:

/* To remove the minimum width off the size of the box */
.o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu {
	min-width: 0;
}

After:

Hide all 3 – Newsfeeds, OneDrive, & Sites + remove the min width of the box

CSS Snippet:

.o365cs-nav-appTile[id='O365_AppTile_Newsfeed'],
.o365cs-nav-appTile[id='O365_AppTile_Documents'],
.o365cs-nav-appTile[id='O365_AppTile_Sites'] {
	display: none;
}

.o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu {
	min-width: 0;
}

Thanks for reading!

If you’ve ever inspected the full width background image from a composed look then you will notice that there is a class on thetag called ‘ms-backgroundImage’ with some css applied to that using the background-image property set to nothing. We are going to take that over.

All you need to do is add some CSS and you can apply this via ‘Alternative Style Sheet’ or if you have a custom CSS file then make your edit there. If not just do an internet search for applying an alternative style sheet and I’m sure you’ll find 100’s of results.

.ms-backgroundImage {
    background-image: url('[REPLACE THIS WITH THE URL TO THE FILE]');
}

If you wanted to do it via JavaScript you could do something like this.

That’s essentially it. No fussing with any additional CSS or JavaScript based plugins.

**Note: I noticed that the image sometimes popped through on my dialog boxes. To eliminate that you could apply this line of CSS. I’m using important so that it’s gone and has no chance of showing itself in that dialog box. **

.ms-dialog body { background-image: none !important; }