Overview

Author: WCode

This tutorial guides you trough the process of creating a new project and extending the UUserWidget class to expose variables to Widget Blueprints.

1: We start of by creating a new Blank Project from the launcher.

2: After compiling

After compiling the new project and launching it you should have something which looks like this in your project folder.

3: In your new project

In your new project in the top left corner press Tools > New C++ Class... to create the base class for the Widget Blueprint.

4: Add new class

In the new Window that opens up check Show All Classes in the top right corner. And enter UserWidget in the search field at the top of the class list. And Select UserWidget.

Note: After you added your first class it is sometimes necessary to restart the editor manually if the hot-reload throws an error.

5: Add the Dependency Module

Now in you IDE (I am using MS Visual Studio) you need to edit your Build file for your project. You need to add the Dependency Module UMG to the project.

The edited line in you ProjectName.Build.cs file should be.

PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore", "UMG" });

Also you need to uncomment the modules for Slate as shown.

// Uncomment if you are using Slate UI
PrivateDependencyModuleNames.AddRange(new string[] { "Slate", "SlateCore" });

Here is the complete version.

// Copyright Epic Games, Inc. All Rights Reserved.  
  
using UnrealBuildTool;  
  
public class ExtendUserWidgetUMG : ModuleRules  
{  
    public ExtendUserWidgetUMG(ReadOnlyTargetRules Target) : base(Target)  
    {       PCHUsage = PCHUsageMode.UseExplicitOrSharedPCHs;  
    PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore" , "UMG" });    
  
       // Uncomment if you are using Slate UI  
       PrivateDependencyModuleNames.AddRange(new string[] { "Slate" , "SlateCore" });              // Uncomment if you are using online features  
       // PrivateDependencyModuleNames.Add("OnlineSubsystem");  
       // To include OnlineSubsystemSteam, add it to the plugins section in your uproject file with the Enabled attribute set to true    }  
}

6: Extending the User Widget

In order to see the difference and for the sake of this tutorial we now open the MyUserWidget.h file in your IDE. And we add the following member to our new UserWidget class.

public:  
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "My New User Widget")  
    FString MyNewWidgetName;

// Fill out your copyright notice in the Description page of Project Settings.  
  
#pragma once  
  
#include "CoreMinimal.h"  
#include "Blueprint/UserWidget.h"  
#include "MyUserWidget.generated.h"  
  
  
UCLASS()  
class EXTENDUSERWIDGETUMG_API UMyUserWidget : public UUserWidget  
{  
    GENERATED_BODY()  
  
public:  
    UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "My New User Widget")  
    FString MyNewWidgetName;  
  
};

7: Create the Widget Blueprint

Now re-compile your project and open up your project in the editor. Create a new Widget Blueprint.

8: Set Parent Class

Open up the new Widget Blueprint and select the Graph in the top right corner. Press the Class Settings button in the upper left half. (To the right of the compile button.) In the Details panel (To the bottom left in my Editor) find the category Class Options Press on the dropdown menu for Parent Class and select your new User Widget class. (MyUserWidget in this case).

9: Compiling Widget and Notes

Compile the Blueprint Widget and you are done. If you can not see the new member we added earlier make sure you have checked Show Inherited Variabels.

Now your variables tab should look something like this:

Additional interesting headers

    "Runtime/UMG/Public/UMG.h"
    "Runtime/UMG/Public/UMGStyle.h"
    "Runtime/UMG/Public/Slate/SObjectWidget.h"
    "Runtime/UMG/Public/IUMGModule.h"
    "Runtime/UMG/Public/Blueprint/UserWidget.h"

Conclusion

You are done, now you have a simple and fast way to extend the user widget. Everything from Data Storage to picking up "events" delegates and so on.

Hope this was helpful. WCode

Related Tutorials

Epic's UMG Documentation

[Tutorial/ Snippet] Creating a UMG Widget in C++, and delegate example by WCode.

Editors notice:

This was originally a tutorial for a very early version of unreal engine 4. All images have been updated to the UE5.3