Hello EveryBody
Is there A Built-in widget To implement CategoryLike This Pic ???
tag[UE4-26]
What exactly is this picture showing?
Looks like a photoshop accident to me 
Do you have any example that is not cryptic?
2 Likes
hello
thanks for your attention
Sorry I new On UE
I just remove unnecessary text on pic
this option I need to work as a category on Object setting
but I need to prepare this on UMG And Blutility for Optimize My Object
I hope this photo conveys exactly what I mean
Oh… Alright… Thats kinda simple to arrange, but needs some work if needed proceduraly.
First of all, create a new User Interface Widget.
Call it: “CollapseContainer”
If you are in UE4, open the Widget and as first, delete the Canvas Panel, we won´t need it.
In UE5, you just need to open the Widget, UE5 never creates a default Canvas panel.
We first add a VerticalBox to the Widget. You´ll recognize, that you don´t have control of the anchor and offset of this Widget… That´s not a problem, but wanted.
And make sure, to set the Default Render Space to “Desired”.
See this Screenshot:
We now add a HorizontalBox and a ScrollBox to the Widget.
Both as children of the VerticalBox.
Call the ScrollBox “ContainerCollapse” and make sure it is still set as “isVariable” in the Detail Window (top right).
We now add a Button inside of a sizeBox, inside the HorizontalBox.
The sizeBox is to give this Header a maximum Height. Try it by overriding the “Max Desired Height” to f.e. 26.
This will make sure, That our Header never gets taller than 26px.
We now need to redesign the Button a bit.
Select the Button and open its Style Settings in the Detail Tab.
Open the “Normal” Container.
Set the Draw As Combobox to “None”.
Now, rightclick the whole Normal Container by rightclicking the “Normal”, and select Copy.
Now rightclick the Hovered and select paste. This will copy the whole Normal Settings to the Hovered one. Do the same for Pressed and Disabled, too.
Now, the Button is still active… but not drawn as Image.
We now add three Items to the Button… First, another HorizontalBox. And as children of the Box, and Image and a Text Widget.
We call the Image “Arrow” and the Text “ContainerTitle”.
Make sure both are set as “is Variable”.
Arrange the Font of the Text to your Needings.
We now want to add another SizeBox around the Image. To do so, rightclick the Image in the Hierarchy and select:
Wrap With > Size Box
Set the SizeBox Width AND Height Override to 24.
This allows us to shrink any image here to 24x24px.
We now need two Images for this blank one. here are two lazy made ones:
+ 
Add the ArrowClose (the right facing one) as Brush for the Image “Arrow”.
We need the other one in the Code later.
Since both Arrows are blank white, you can colorize them with Tint as you wish.
We now head to the CollapseContainer Item… Our ScrollBox.
Here you can add Content as you wish.
Alternatiuvely, your Content Area can be a Panel, Overlay, Another verticalBox…etc…etc, too. Just keep in Mind to set this CollapseContainer always as Variable.
I added 3 Item to it for Testing:
In the “Behavior” Settings of the ScrollBoxs Detail Panel, set “visibility” to “Collapsed”.
Now… into the Graph!
First, lets create two Variables.
One Text, we call “Title”, and one Bool we call “StartOpened”.
Make sure to mark em Exposed on Spawn and Editable:
Head to the Construct event, if it is not htere, rightclick the graph and search for Construct to create it.
We first Drag our ContainerTitle W9idget our of the Variables Box and get it. from this, we drag the blue line and add a setText Node here, linked to our Variable “Title”:
This will ensure our Container Title is set, when this Widget is created.
Next, we drag the CollapseContainer Widget. It doesn´t matter what type it is… cause we get it and set its visibility.
You may recognize, there is plenty of Space between the SetText and SetVisibility.
That´s cause we need a Boolean Selection here.
So… drag your StartOpened Bool from the Variables into the graph. Now, do not drag a line… just rightclick on the graph and search for this “Select”:
And add it.
You recognize the Wildcard Input at this Node. Simplky Drag your Bool into this Wildcard, to transform the Select into a Boolean Selection, including a true/false Input.
Now, link the Selections Return Value to the “In Visibility” of the SetVisibility Node. Your Selection will now transform into a Visibility Selection of a Bool.
Since we named our Bool “StartOpened”, we let the True Value as Visible. And set the False Value to “Collapsed”.
This will make the Widget initially open or close the Widget on Startup, as we set the bool later.
Now, select your Button_Collapse in the Variables List, and at the very Bottom, click on the + of the green “On Clicked” Button, to add an OnClicked Event to your Graph.
at this Event, we now drag our CollapseContainer, as get, again.
From this, we take a Node called “Is Visible”.
This will return a bool, that is “true”, if the Widget is Visible, or false, if not.
Now, copy and Paste your whole Selection and SetVisibility Code from the Cnstruct Event, to the End of this OnClicked, and link it to the Event. You don´t need to copy the StartOpened bool over, too. If you done so, delete it:
You my think now, you can simply put the output of the IsVisible Bool to the Selection Input…
No!
But we have two ways to go now…
1.) We add a “Not” Node between both.
2.) we link it directly, but switch the Values of true/false.
Both Ways do the Job.
If the IsVisible returns true, the Widget Container should get Collapsed to be Invisible. If it returns false (is hidden), it should get visible again.
In Theory, this is working now…
But we have a small Eye-Catcher, we want to deal with… the “Arrow”.
Drag your Arrow Widget of the Variables Box into the Graph as get.
From this, add a “Set Brush from Texture”.
Now, we add another one of those Select Nodes… And link its Return value to the Texture input:’
As Wildcard Index, we link the Return Bool of IsVisible. Again, this will lead into getting a true/false Selection.
Now… as True Value, set the ArrowOpen. And as false Value, the ArrowClose TEXTURE Image you downloaded/created earlier.
Again… much Space between the Nodes… that has a Reason again…
Zoom outr a Bit, and Link the absolute End of the Construct Event Line, to the SetBrushFromTexture:
(Reuse of premade Code
)
Another thing we can do now is, to Link a PreConstruct Event to the Exact same Line as the Construct. This will enable the Editor to run this Event Line to update Text, Image and Visibility at Design Time:
This, for sure, is not needed. If you don´t do that, and you drag your Widget into your Scene… set the Text and bool… nothing will happen… until you start your Game…
With PreConstruct Linked, the Changes of Title Text and StartOpened Bool will directly be visible to you.
Lets Drag your Widget into another one… Here… my Prototype HUD f.E.:
You can drag and put this everywhere you want.
To populize your Container with Stuff at Runtime, you just get the CollapseContainer of the CollapseContainer Widget… and AddChild… ClearChildren…etc:
And this is, how it works at Runtime:
You may want to give the Widget some Borders, Boxes…and Backdrops… but this is just the basic idea how to create Collapseable Containers 
1 Like
It’s called Expandable Area.
Header for the name and the content in the body.