The new 4.22 version of the Unreal Engine 4 has just come with a lot of new features. The most marketed one is the real-time ray-tracing which comes with a lot of promises. But among the new features, there is one which is definitely huge if a part of your job is to improve the engine by adding new features: it’s the Editor Utility Widgets.

According to Epic:

Editor Utility Widgets enable you to extend the functionality of Unreal Editor with new user interfaces created entirely using the UMG UI Editor and Blueprint Visual Scripting logic! These are Editor-only UI panels that can be selected from the Windows menu like other Unreal Editor panels.

Due to the novelty of the feature, there’s a lack of tutorials and documentation on how to use it. We will make few articles about the topic to cover most of its features, and today we will start with a small introduction.

Creating a widget


Location of the asset type in the menu

To start, we need to create a new asset of the kind Editor Widget.

Once opened, we are in front of the good old UMG widget editor. Thus, people who are familiar with this editor won’t be lost. For the others, to get started all you need to do is to drag and drop components from the palette to the main window or to the hierarchy.

For this example, we will just make a small “Hello World” button. The Editor Widget window should look like this:

In the Event Graph of the widget, we add this simple behavior:

Running the widget

This widget is pretty simple, but it shows the main principles of the creation of a UMG widget for the editor. Now, we want to test it.

It’s really easy to do it: we just have to right-click on the widget asset, in the content browser, and select Run Editor Utility Widget. The widget should open immediately.


My first Editor Widget

And when we click on the button Hello World: we see the log line “Hello World” in the viewport.
Given that we are in an Editor context, we can call any editor function. It’s really useful if we want for instance, make a widget whose purpose is to programmatically construct a scene from a set of parameters defined in the widget.

In the next episodes…

As said in the introduction, this article is a first one of a serie. It introduces the concept of Editor Widget blueprint and how to use it.
In the next articles, we will cover how to programmatically interact with these widgets, and how to create these widgets using C++. If you want to be notified when these articles will be published, you can follow us on Twitter and Facebook.