Custom Details Panels in Unreal Engine (FPropertyEditorModule)
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 as any version higher does not come with the default template we would like to use. 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.
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:
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.
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!
For the full example, please check out the Github repository here!
About My Medium
This is my first Medium post, and I’d like to post more of my findings within Slate and Plugin Development as resources are harder to find. If you’d like to see more, my Twitter is where I post most things; but I also post to YouTube whenever I have topics that are harder to be more in-depth with.
I hope you found this useful!
If you did, consider supporting on Ko-Fi or Patreon.
All links can be found here:
And here is a repository I’m trying to keep up-to-date with Slate/Plugin Development tutorial resources:
Alessa ❤.
