Extending the details panel

In this post I’m going to show you how to extend the details panel inside the engine to expose more customised behavior for the systems that you might have built for your designers. Before I dive any further into the code, here’s the end result:

To achieve the result above we need to perform the following steps:

1. Create a custom module
2. Create a specific asset
3. Create our own details panel (which is going to extend the default one)
4. Test the functionality

This post will not cover the 1st step of the process since I’ve already written a tutorial about it here.

Adding the required dependencies

For this post I have created a custom module named “BlogpostModule”. Inside it’s .build.cs file I’ve added the following dependencies:

PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine","PropertyEditor","Slate","SlateCore"});

The reason we need these dependencies is because we’re going to use Slate in order to extend the details panel.

Before going any further make sure to compile your code.

Creating a test Actor

In order for our custom details panel to work, we need to tell our module that we want to bind a specific details panel to appear whenever we modify a specific class. This is the reason we’re going to add a test class just to showcase the functionality. I have named my class as “FancyCube” and placed it into the BlogpostModule as well. Here’s the code for it:

Once we have created the custom details panel we’re going to get tell our module to assign it to the “AFancyCube” class above. For now, create a Blueprint based on the class above and assign the following material to its mesh:

Extending the details panel

In order to extend the details panel you have to add a class that inherits the object class. Keep in mind that this class will not be marked with the typical UCLASS macro and we’re going to replace the default constructors and destructors later on. Once you have created your class, type in the following code in its header file:

Then, type the following code in the source file:

As you can see inside the CustomizeDetails function we used the “[ ]” operators to type “unusual” code. Essentially, in slate, these operators create a new Slate Widget in which we provide the properties that describe its functionality (such as its appearance and/or its contents). If you dive into the engine’s code for example DetailWidgetRow.h at line 113 you will notice the logic behind this operator is pretty straightfoward. (ie every time you use this operator you have to provide a new Slate Widget). If you think about it, this logic is similar to how UMG widgets work.

Binding the details panel to the actor

At this point, the last thing we need is to tie everything together. Go into your module’s startup function and type the following code:

At this point, compile your module and you should see the custom details panel whenever you select any “FancyCube” actors. Keep in mind that you may have to restart the Editor in order to see the changes.