In Unreal Engine, we can create our own Custom Details panels relatively easily by using the FPropertyEditorModule and passing it a custom class with listed UProperties instead of having to draw and generate our own Slate to display them.

For this project, we are going to use UE4.24 but you can use any version you’d like. Let’s go ahead and create a new plugin, and we will use the “Editor Standalone Window” plugin template.

Once you have reloaded the Visual Studio Project, open the editor again and create a new default UObject class under the plugin module. I’ve called this class UCustomSettings, but you can name it whatever you’d like.

Our Visual Studio plugin structure

Specifying our custom Details

Creating our Custom Details panel is simple! Let’s go to our CustomSettings.h file and write up some properties to display.

For our Custom Details panel, all specifiers in a UPROPERTY() macro will be evaluated, so you can organize and split into categories, or use things like AdvancedDisplay to hide certain properties. For a list of full UPROPERTY() macro settings:

UProperty Specifiers

Creating our Details Widget

Next, let’s work on creating our Details View widget. The Details View widget is created and set by the FPropertyEditorModule and will handle the display and creation of our Custom Details Panel.

In our main Plugin Module class we will create two pointers to our CustomSettings class and one to store our created Details View widget.

I’ve added them under the OnSpawnPluginTab function created with our template, as we will do our instantiation in that class.

Here is the important part! Let’s add this in, and then I’ll go through what is happening.

First we create our Object whenever the tab is spawned — you can place this elsewhere to prevent our settings from refreshing everytime the tab is created, but for now. We’ll just create it here.

We then load our Property Editor Module! The module itself can be used for more than just creating Custom Details Panels.

FPropertyEditorModule

Next up is FDetailsViewArgs, this is how we control how our Details Panel is displayed, things like hiding the search box at the top. One argument we’ll pass in here is a tip that appears by default at the top requesting the user select an object. We don’t need this, so we hide it.

We then create our PropertyWidget, this creates the slate widget itself and informs the editor that the widget has been instantiated.

The most important part is line 17, here we tell the DetailsView widget to actually use the UObject class we’ve created and to pull the properties from there.

Then we just add it to our slate on Line 23!

Our Details Panel

Once everything is done — you will see your new Custom Details panel in the Custom Editor Window!

Our Custom Details complete!

For the full example, please check out the Github repository here!

Find this tutorial useful?

If you found my tutorials useful, consider becoming a Patron to support more!

Alessa ❤️