How to create a working "Settings"-UI with CommonUI's "TabList"?

Hey. I have a CommonUI question.

My goal: Currently, I am trying to create a “Settings”-Panel with the CommonUI-Plugin in which the user should be able to switch between 3 Sub-Panels via “TabList” and “WidgetSwitcher”. Everything should be “Gamepad compatible”. I would like to navigate through the TabList and then navigate through the SubPanels Eleements with the Arrow-Buttons of the GamePad.

Current problem: When ever I switch the Tab, i don’t get the focus to the SubPanel, unless I click with the mouse on one of its elements.

Question: How can I create a working, Gamepad compatible “Settings”-Section with CommonUI for my game like we can see it in other games?

Attachements: The Video I provided shows the current state of my work. The Screenshots I provided are the structure of the two Widgets (MainPanel and SubPanel “Settings”).

If there is more Info you need please tell me. I couldn’t find any valuable information on how a working Settings page is made with CommonUI. All Tutorials on youtube only show the TabList part in detail but do not elaborate any further on how to make the rest of the TabList + WidgetSwitcher combo work so someone can create a full working, Gamepad compatbile Settings-Section…

Video:

Screenshots:


Seems like I figured out myself. I had to do 2 things.

  • In my Settings-Panel’s Graph, I had to use “OnActiveWidgetIdexChangedBP” and SetFocus to the Sub-Panel Widget
  • In the Sub-Panel (e.g. “Controls” like in my screenshot), I had to define a Widget by overwriting “GetDiesiredFocusTarget”

OnActiveWidgetIdexChangedBP:

GetDiesiredFocusTarget:

Now I can switch tabs and navigate through the SUb-Panels elements afterwards.