In this part, we’re going to cover Hyperlinks which go a little more in depth to methods we can pass into our FNotificationInfo. We will also cover some cool styling things we can do with icons on our notification and briefly touch on Styling slate if you would like to add your own custom icons.
If you haven’t followed the first tutorial, please give it a look, it has a lot of what we’ve already set up as foundation for this second tutorial and we will be continuing from that point.
Let’s continue then! Here is the notification we will be creating.
Before we get started — because we will be dealing with Editor Styling, we need to add this module to our Build.cs file of our plugin so we can access it.
YourPlugin.Build.cs is found in your main plugin directory, and is a file responsible for informing the Unreal Build Tool which modules your plugin depends on and will statically link with.
Go ahead and add line 13.
Notification / Slate Styling
Here is the code we will be adding to our SNoficiationButtonWidget, as before let’s go ahead and add this and then we can break it down and talk a little bit more about what’s going on.
.h — added under public:
The first thing we do, which hopefully you’ve become somewhat accustomed to, is adding a button within a new SHorizontalBox slot and we declare another method in our header and cpp file (Lines 19–25 cpp). This time we call it SpawnNotificationWithLink(), and it is also an FReply method same as before.
Simple stuff — let’s talk styling!
So earlier, we added the EditorStyles module to our build.cs file, this means we can now access any of the iconography, widget brushes and fonts from Unreal Engine. We do this on line 45 in our cpp, but using the GetBrush method of the FEditorStyle namespace.
A quick note here, an alternative you can use is FCoreStyle, but I believe this isn’t the recommended way. Most of the editor relies on the use of FEditorStyle and the EditorStyle module. Where FCoreStyle is used for runtime, FEditorStyle is the Editor Module.
The FEditorStyle module itself just wraps and makes most of SlateCore easily accessible, but for a list of any of the brushes that are available you can check out. All you need to do is reference by string.
Side Note: Also! A super fun fact that I was surprised at when researching this. Because I come from a background in web development, did you know that Unreal Engine utilizes the amazing Font Awesome resource?
For a full list of all icons included from Font Awesome, you can find them here: Engine\Source\Editor\EditorStyle\Public\EditorFontGlyphs.h
For now, this is all we’ll talk about styling. You may have noticed, if this is your first plugin the default Editor Standalone Window Template in Unreal has it’s own Style.cpp when created — I’ll dedicate another article to this specifically for the sake of brevity.
(An example of a notification using the “MessageLog.Note” icon instead) notifications_messagelognote.png
So let’s go ahead and add our next section of code to our cpp. In our same SpawnNotificationWithLink() method, let’s add our code for Hyperlinks and then go through it.
Hyperlinks are passed as a delegate into the FNotificationInfo struct via .Hyperlink, these can be a call to another method, but for the sake of simplicity here, we use a lambda.
A lambda, is simply put a small function that is called in-line where it is defined. It can take in parameters, but if this is a new concept for you just know that the contents of this function gets called when our Hyperlink is pressed. For more information on Lambda functions:
Microsoft Lambda Expressions Reference
In this lambda all we do is create a string to a URL and we use FPlatformProcess, a super useful module for handling generalized OS actions. It abstracts to FPlatformProcess to handle Android, IOS, Windows, Mac, HoloLens etc…
It’s got a really nice function that opens a browser window with the specified URL, cool right? :3
Last thing we do is define the text that we want to display in editor. This is done by passing a localized string into the struct via HyperlinkText, nothing crazy!
And that’s it! We’ve now created a cool notification that links to Unreal Engine documentation in just a couple lines of code with some cool styling.